How can i change theme color in bootstrapvue?

3
votes

I need to change this colors in my bootstrapvue proyect but i don't know how.

primary secondary success info warning danger light dark

1
twitter-bootstrapvue.jsbootstrap-vue

1 Answers

5
votes

Just read the docs ;) https://bootstrap-vue.js.org/docs/reference/theming/

Just like in normal Bootstrap (without vue) You have all variables in _variables.scss in bootstrap library directory (https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss).

You can copy it and modify or make new empty file called ex. variables.scss and import it before You import Bootstrap. Or simply put variables before @import.

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';

If You need to replace colors it will be:

$red: '#ff0000';