How to override scss variables? - css

I am currently using materialize.css and I want to override the default variables so that the main file remain unchanged. What I am trying in my main stylesheet.scss is like
#import '_materialize';
#import '_modified';
#import '_new';
In my _modified file I am setting
$secondary-color: color("blue", "darken-1");
In materialize.scss, _variable.scss is already imported (default framework file) in which secondary color value is
$secondary-color: color("teal", "lighten-1") !default;
Still secondary color remain teal.How to override with external scss file like this one?
Edit-1: Found the solution.
$secondary-color: color("teal", "lighten-1") !default;
was not working due to not loading color mixin file of materialize css.
After #import "materialize/components/color"; in modified.scss and then
$secondary-color:color("teal", "lighten-5");
works now.


Import your vars first (not last):
#import '_your-vars'; // your own vars
#import '_materialize'; // includes framework vars
... // other modifications
As far as I understand the SCSS !default flag: it's a fallback, when nothing has been declared before. So when you import your variables (only the variables, no other modifications which might have dependencies) first, it will work.


See below examples
$secondary-color: color("blue", "darken-1");
.someClass{
$secondary-color: color("teal", "darken-1") !important;
.someClass h2{
color: $secondary-color;
}
}

Related

How to change the color of the success button with SASS?

Currently the success button of my theme is green. I want to put it in yellow. How can I do this ?
In the _variables.scss file there are these lines :
$btn-success-color: $btn-default-color !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
I added the following lines to my custom file style.scss :
$btn-success-color: #000 !default;
$btn-success-bg: #FFD700 !default;
$btn-success-border: #FFD700 !default;
I don't know if it's the right method, but it doesn't work.
I have compiled my theme with the changes but the success button is always green.

If you really want to override the variables in your style.scss, you have to position them before importing _variables.sccs
According to Bootstrap :
Variable overrides within the same Sass file can come before or after
the default variables. However, when overriding across Sass files,
your overrides must come before you import Bootstrap’s Sass files.
If you want to do this the clean way, I suggest you load default bootstrap variables first, and load your custom var form another file, for example _variables-custom.scss .
In _variables-custom.scss, you copy / paste the values from _variables.scss to override them. You have to remember several things :
_variables-custom.scss must be imported after the default _variables.scss
all the !default must be removed in you _variables-custom.scss, for them to correctly override the _variables.scss values.
I suggest, if possible, not to store any variables outside of _variables-custom.scss so when you search a var, you know where it is.
so you should have in you style.scss :
#import 'variables.scss'
#import 'variables-custom.scss'
_variables.scss :
$btn-success-color: $btn-default-color !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
_variables-custom.scss :
$btn-success-color: #000 ;
$btn-success-bg: #FFD700;
$btn-success-border: $btn-success-bg;

Sass outputs default file even with changed variables

I'm trying to change some variables for my custom version of Bootstrap. Right now I have the Bootstrap SCSS files and my own variables file. My file looks like this:
#import "/path/to/bootstrap";
$blue: #42a5f5;
$indigo: #5c6bc0;
more styles here…
However, when I run sass /path/to/custom.scss /path/to/output.css, it still outputs the default Bootstrap files like this:
:root {
--blue: #007bff;
--indigo: #6610f2;
more styles here…
Why does this happen?

According to Bootstrap 4:
Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.
Since you create your own custom.scss file, it should look like this:
// Your variable overrides
$blue: #42a5f5;
$indigo: #5c6bc0;
// Bootstrap and its default variables
#import "/path/to/bootstrap";

Conditially override scss variables for bootstrap 4 theme switching

Per the Bootstrap docs,
Every Sass variable in Bootstrap 4 includes the !default flag allowing
you to override the variable’s default value in your own Sass without
modifying Bootstrap’s source code. Copy and paste variables as needed,
modify their values, and remove the !default flag. If a variable has
already been assigned, then it won’t be re-assigned by the default
values in Bootstrap.
So they recommend you create your own theme like this:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
What I would like to do is have two sets of variables, and uses this to switch between a light and dark theme:
// Your variable overrides
body.light-mode {
$body-bg: #fff;
}
body.dark-mode {
$body-bg: #000;
}
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
But this doesn't seem to be working, I think because of how variables are scoped.
Is this possible? Ideally I'd like to have light and dark variables in their own file.
For a little context; I am using bootstrap in a web app created by create-react-app, and they recommend to import bootstrap as detailed here. If I just generated 2 separate style sheets I'd have copy those to my /public folder manually and reference, and they wouldn't be part of the webpack bundling.

This was the solution I went with:
// Default theme
$body-bg: #fff;
// etc...
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
// dark theme, turned on by adding class dark to document.documentElement (html tag)
.dark {
$body-bg: #000;
// etc...
// Import just the things you customize
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/tables";
#import "~bootstrap/scss/button-group"
// etc....
}

That won't work. Why not make two different themes - dark/light:
light theme (light-theme.scss):
// Your variable overrides
$body-bg: #fff;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
dark theme (dark-theme.scss):
// Your variable overrides
$body-bg: #000;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
and then pull the appropriate style sheet into the page as needed?

How to change the bootstrap primary color?

Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.

Bootstrap 5 (update 2021)
The method is still the same for Bootstrap 5.
https://codeply.com/p/iauLPArGqE
Bootstrap 4
To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...
$primary: purple;
$danger: red;
#import "bootstrap";
Demo: https://codeply.com/go/f5OmhIdre3
In some cases, you may want to set a new color from another existing Bootstrap variable. For this #import the functions and variables first so they can be referenced in the customizations...
/* import the necessary Bootstrap files */
#import "bootstrap/functions";
#import "bootstrap/variables";
$theme-colors: (
primary: $purple
);
/* finally, import Bootstrap */
#import "bootstrap";
Demo: https://codeply.com/go/lobGxGgfZE
Also see: this answer, this answer or changing the button color in (CSS or SASS)
It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.

I've created this tool: https://lingtalfi.com/bootstrap4-color-generator,
you simply put primary in the first field, then choose your color, and click generate.
Then copy the generated scss or css code, and paste it in a file named my-colors.scss or my-colors.css (or whatever name you want).
Once you compile the scss into css, you can include that css file AFTER the bootstrap CSS and you'll be good to go.
The whole process takes about 10 seconds if you get the gist of it, provided that the my-colors.scss file is already created and included in your head tag.
Note: this tool can be used to override bootstrap's default colors (primary, secondary, danger, ...), but you can also create custom colors if you want (blue, green, ternary, ...).
Note2: this tool was made to work with bootstrap 4 (i.e. not any subsequent version for now).

There are two ways you can go to
http://getbootstrap.com/customize/
And change the color in this adjustments and download the bootstrap customized.
Or you can use sass with this version https://github.com/twbs/bootstrap-sass and import in your sass assets/stylesheets/_bootstrap.scss but before import this you can change the defaults variable colors
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff !default;
//** Global text color on `<body>`.
$text-color: $gray-dark !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
And compile the result

Bootstrap 5
For bootstrap 5 you can just go to you main scss file and add:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
or whatever changes you wanna make...
And don't forget to import bootstrap right after.
Your final main.scss file should look like this:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
#import "~node_modules/bootstrap/scss/bootstrap";

Bootstrap 4
This is what worked for me:
I created my own _custom_theme.scss file with content similar to:
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
Added it to the top of the file bootstrap.scss and recompiled (In my case I had it in a folder called !scss)
#import "../../../!scss/_custom_theme.scss";
#import "functions";
#import "variables";
#import "mixins";

Any element with 'primary' tag has the color #brand-primary. One of the options to change it is adding a customized css file like below:
.my-primary{
color: lightYellow ;
background-color: red;
}
.my-primary:focus, .my-primary:hover{
color: yellow ;
background-color: darkRed;
}
a.navbar-brand {
color: lightYellow ;
}
.navbar-brand:hover{
color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<br>
<nav class="navbar navbar-dark bg-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Default (navbar-dark bg-primary)</a>
</div>
</nav>
<button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
</div>
<br>
<div class="container">
<nav class="navbar my-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Customized (my-primary)</a>
</div>
</nav>
<button type="button" class="btn my-primary">Customized (btn my-primary)</button>
</div>
For more about customized css files with bootstrap, here is a helpful link: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

This might be a little bit old question, but I want to share the best way I found to customize bootstrap.
There's an online tool called bootstrap.build https://bootstrap.build/app. It works great and no installation or building tools setup required!

The correct way to change the default primary colour in Bootstrap 4.x using SASS, or any other colours like secondary, success and so on.
Create the following SASS file and import Bootstrap SASS as indicated:
// (Required) Import Bootstrap
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
$primary: blue;
$secondary: green;
$my-color: red;
$theme-colors: (
primary: $primary,
secondary: $secondary,
my-color: $my-color
);
// Add below your SASS or CSS code
// (Required) Import Bootstrap
#import "bootstrap/bootstrap";

Using SaSS
change the brand color
$brand-primary:#some-color;
this will change the primary color accross all UI.
Using css- suppose you want to change button primary color.So
btn.primary{
background:#some-color;
}
search the element and add a new css/sass
rule in a new file and attach it after u load the bootstrap css.

Bootstrap 4 rules
Most of the answers here are more or less correct, but all of them with some issues (for me). So, finally, googleing I found the correct procedure, as stated in the dedicated bootstrap doc: https://getbootstrap.com/docs/4.0/getting-started/theming/.
Let's assume bootstrap is installed in node_modules/bootstrap.
A. Create your your_bootstrap.scss file:
#import "your_variables_theme"; // here your variables
// mandatory imports from bootstrap src
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
#import "../node_modules/bootstrap/scss/mixins";
// optional imports from bootstrap (do not import 'bootstrap.scss'!)
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
etc...
B. In the same folder, create the _your_variables_theme.scss file.
C. Customize the bootstrap variables in _your_variables_theme.scss file following this rules:
Copy and paste variables from _variables.scss as needed,
modify their values, and remove the !default flag. If a
variable has already been assigned, then it won’t be re-assigned
by the default values in Bootstrap.
Variable overrides within the same Sass file can come before or after
the default variables. However, when overriding across Sass files,
your overrides must come before you import Bootstrap’s Sass files.
Default variables are available in node_modules/bootstrap/scss/variables.scss.

This seem to work for me in Bootstrap v5 alpha 3
_variables-overrides.scss
$primary: #00adef;
$theme-colors: (
"primary": $primary,
);
main.scss
// Overrides
#import "variables-overrides";
// Required - Configuration
#import "#/node_modules/bootstrap/scss/functions";
#import "#/node_modules/bootstrap/scss/variables";
#import "#/node_modules/bootstrap/scss/mixins";
#import "#/node_modules/bootstrap/scss/utilities";
// Optional - Layout & components
#import "#/node_modules/bootstrap/scss/root";
#import "#/node_modules/bootstrap/scss/reboot";
#import "#/node_modules/bootstrap/scss/type";
#import "#/node_modules/bootstrap/scss/images";
#import "#/node_modules/bootstrap/scss/containers";
#import "#/node_modules/bootstrap/scss/grid";
#import "#/node_modules/bootstrap/scss/tables";
#import "#/node_modules/bootstrap/scss/forms";
#import "#/node_modules/bootstrap/scss/buttons";
#import "#/node_modules/bootstrap/scss/transitions";
#import "#/node_modules/bootstrap/scss/dropdown";
#import "#/node_modules/bootstrap/scss/button-group";
#import "#/node_modules/bootstrap/scss/nav";
#import "#/node_modules/bootstrap/scss/navbar";
#import "#/node_modules/bootstrap/scss/card";
#import "#/node_modules/bootstrap/scss/accordion";
#import "#/node_modules/bootstrap/scss/breadcrumb";
#import "#/node_modules/bootstrap/scss/pagination";
#import "#/node_modules/bootstrap/scss/badge";
#import "#/node_modules/bootstrap/scss/alert";
#import "#/node_modules/bootstrap/scss/progress";
#import "#/node_modules/bootstrap/scss/list-group";
#import "#/node_modules/bootstrap/scss/close";
#import "#/node_modules/bootstrap/scss/toasts";
#import "#/node_modules/bootstrap/scss/modal";
#import "#/node_modules/bootstrap/scss/tooltip";
#import "#/node_modules/bootstrap/scss/popover";
#import "#/node_modules/bootstrap/scss/carousel";
#import "#/node_modules/bootstrap/scss/spinners";
// Helpers
#import "#/node_modules/bootstrap/scss/helpers";
// Utilities
#import "#/node_modules/bootstrap/scss/utilities/api";
#import "custom";

Bootstrap 5.2. update
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.

Since Bootstrap 4 you can easily change the primary color of your Bootstrap by downloading a simple CSS file on BootstrapColor.net. You don't need to know SASS and the CSS file is ready to use for your website. You can choose the color you want like blue, indigo, purple, pink, red, orange, yellow, green, teal or cyan color.

You cannot change the color in cdn file.
Download the bootstrap file.
Search For bootstrap.css file.
open this(bootstrsap.css) file and search for 'primary'.
change it to the colour you desire.

This is a very easy solution.
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
replace the class bg-dark, with bg-custom.
In CSS
.bg-custom {
background-color: red;
}

Yes,
I'd suggest opening up the .css file, inspect the page and find the color code you want to change and Find All and Replace (depending on your text editor) to the color you want. Do that with all the colors you want to change

"lessify" a CSS color theme

I've inherited a project with a ton of CSS and been assigned the task of modifying it so the color palette can easily be changed.
I've immediately thought of using a CSS preprocessor, tried less and easily switched the colors for variables, so I just have to define a base color and can switch the color theme.
The problem is, every time I switch the color theme I have to either overwrite colors.less with the new color settings or modify the colors.less import in a ton of files.
What I want is to end up with a single file with a lot of imports (basically one per component or set of components), and on that file when I import colors-red.less instead of colors-blue.less all the components imported right after use the red palette so the theme compiled is red instead of blue, for example.
The problem I am having is that the component files do not get the "globals" with the color definitions so I can't compile the base file that imports those files.
I've read there is the possibility of using "partials" (files starting with _ that won't get compiled independently but imported and then compiled), but my compiler seems to be ignoring this feature, and the eclipse plugin I use for editing and verifying less files also complains about the color variables not being defined on those partials.
How can I can get the partials to work? Is there a better approach to do this task?

Stil, they won't be defined on the imported files, just on the main file, so >compilation will break on the imported files. You see what I mean?
Nope? example:
mixins.less:
.mixin()
{
color: #color;
}
variables.less:
#color: orange;
project.less:
#import "mixins";
#import "variables";
p {
.mixin();
}
Now running lessc project.less outputs:
p {
color:orange;
}
Now i change to content of project.less as follows:
#import "mixins";
#import "variables";
p {
.mixin();
}
#color: red;
Then running lessc project.less outputs:
p {
color:red;
}

Resources