Search code examples
csstwitter-bootstrapsassmaterial-designbootstrap-material-design

Changing the colors of Bootstrap Material theme

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?

Solution

  • 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.