I want to change Bootstrap-vue theme colors , primary , success , danger ...
I have read document but still can't do that
this is theme.scss
$body-bg: red;
$body-color: #111;
$theme-colors: (
"primary": red,
"danger": #caaf12
);
$primary:red;
#import '../node_modules/bootstrap/scss/bootstrap';
#import '../node_modules/bootstrap-vue/src/index.scss';
and I have imported this file in my main.scss like this
#import url('./theme.scss');
body{
...
}
But still primary color does not change
How can I fix this ?
I found answer .
I have to add theme.scss in nuxt-config like this
css:['./assets/theme.scss']
also ichanged import address like this
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
I want to define my own theme color so the standard bootstrap elemets are overriden and also use the value later for my own components. Here is the code I use in a scss file:
$theme-colors: (
"primary": #611fe6,
"secondary": #ffbd58,
"dark": #000000
);
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
.fa-li {
color: $primary;
}
.fa-li then has the original primary color of bootstrap and not my own.
"How to access a theme color in bootstrap 5?"
Short answer, use map-get...
.fa-li {
color: map-get($theme-colors,"primary")
}
Demo
"I want to define my own theme color so the standard bootstrap elements
are overridden and also use the value later for my own components"
Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;
#import "bootstrap";
.fa-li {
color: $primary
}
Demo
Also see: Overriding Bootstrap SCSS Variables
Following the B5 new documentation, this is how you are supposed to add new utilities with the new utilities API. I have not been the get the new output though.
exemple:
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor
responsive: true,
values: auto pointer grab,
)
)
);
my file:
#import "bootstrap.scss";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
I need to import bootstrap.scss because $utilities is undefined otherwise
the goal is to add a new property to make the button rounded.simple example to test out the new API. not working though
I am using the https://github.com/twbs/bootstrap-npm-starter to compile the scss files:
the src is starter.scss and the output is starter.css
I cannot find the new property button-rounded
When making Bootstrap SASS customizations, the #import "bootstrap" should go after the changes. Also, the utilities file requires the variables file, and the variables file requires the functions file, so you must import all 3 before the change...
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap";
Demo
Since Bootstrap 5 is currently beta, I've submitted an issue report for this.
Bootstrap 5.0.1, somehow no luck with map-merge($utilities ...)
but bootstrap has one more extension point: by overriding every $var default value
following will merge inside #import '~bootstrap/scss/utilities';
$utilities: (
'event-type': (
property: background-color,
class: 'event-type', // <- somehow this required
values: (
commit: #BADA55,
issue: #C0FFEE,
),
),
);
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import '~bootstrap/scss/utilities';
#import '~bootstrap/scss/utilities/api';
Since Bootstrap 5.2. update you need to proceed a little different. There is new maps file added.
If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
and then:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
and finally:
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/utilities";
and the rest.
As of Bootstrap 5.0.1 this would be more appropriate:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
#import "bootstrap/scss/helpers";
#import "bootstrap/scss/utilities/api";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
Importing "bootstrap" at the end is not required anymore.
For bootstrap 5.1.3 from documentation
Don't forget #import "bootstrap/scss/maps"; as it's needed by utilities.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/maps";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap/scss/utilities/api";
I have a scss file with themes
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
),
taxi: (
backgroundColor:yellow,
textColor:black,
),
);
I want to switch between them on click of some conditions which I check in my typescript file. How to do it?
You can not access .scss variables in your typescript file but you can access class names.
So, I would suggest you to change these scss variables into classes and you can switch between them using [ngClass] attribute depending on whatever condition you want.
Link for reference:
https://angular.io/api/common/NgClass
I'm just starting with Bootstrap 4 and Sass. I can't for the life of me figure out how to override the default .alert-[whatever] styles.
If I have:
<div class="alert alert-success">Hello!</div>
It creates an alert with the default light shade of green that ships with Bootstrap 4. The only way I can override it is with my own custom CSS style for .alert-success. I'd rather use a built in variable to override it like I'm doing with my other colors, but I have no idea if that's an option?
In my .scss file I have:
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
"primary": $blue,
"success": $green,
);
I assumed that .alert-success would just use the $green I've specified in my .scss file, but that doesn't seem to be the case.
I've tried to do $alert-success: $green;which also doesn't change anything.
What's the correct way to go about this?
This is similar to: How to change the bootstrap primary color? Make sure you import Bootstrap after the overrides, and I will answer as it related to alerts.
/* custom.scss */
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
/* -------begin customization-------- */
$blue: #3498db;
$green: #37bf91;
$theme-colors: (
primary: $blue,
success: $green,
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
#import "bootstrap";
Demo: https://www.codeply.com/go/NCfqvU3Upe
For the alerts, the bg and text colors are derived using the SASS darken function on the theme color. The defaults are:
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
The negative numbers lighten the original theme color, the positive numbers darken the color. So, for example if you want to make the success alert bg closer to the actual $green color, you'd adjust the alert variables:
$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;
I updated the demo to show this.