Changing the colors of Bootstrap Material theme

Question

I am working on an app, where I want to use a more deep-orange color style and have tried to override certain variables from the sass version of the files, but when I compile it using gulp it does not change. Another thing that is weird is that when I use the sass version, the default colors are blue/indigo, but when just using the precompiled css from the github repo, it uses the teal color style. I have the following in my app.scss file

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
@import "vendor/material/ripples";

I tried to override variables by adding the variables that I wanted to change, such as the link-color, but no luck

@import "vendor/bootstrap/_bootstrap";
@import "vendor/bootstrap-material/bootstrap-material-design";
$link-color: $red !default;
@import "vendor/material/ripples";

Does anyone know how to change the overall color style of the theme?

Answer 1

为了更改Bootstrap变量的默认值，您需要在实际导入引导程序部分之前对其进行定义-确保对它应用！default标志，以使其无法被覆盖。

Answer 2

The issue could be that SASS partials should start with an underscore, or the file would otherwise compiled to a CSS file.

Since vendor/bootstrap-material/bootstrap-material-design doesn't start with an underscore, it is probably being compiled into CSS without taking the variables defined after the @import into account.

I'd also like to mentioned that as of now ( Until the next major release supporting Bootstrap4 ), Bootstrap Material Design projects sass files are automatically generated from LESS files. So in case prefixing with underscore doesn't help, you'll have better luck modifying the LESS files and compiling CSS or generating SASS files.

Answer 3

When changing Bootstrap styles/themes, I find the browser's Inspector to be very useful.

• In Firefox: Tools > Web Developer > Inspector
• In Safari: Develop > Show Web Inspector

Select an element in the page, and it shows all CSS styles being applied to it in hierarchical order (ie styles that are being applied correctly, but overridden by another style that takes precedence). Often, something is being modified by an element I didn't realize or is called something different than I thought.