Materialize: [Question] Best practice to change the default color for button, text, focus status, etc.

[YoleYu]

I want to know what is the best practice in materializecss to change all widget default color(light green).

Do I need to put some css to my custom.css like below, or there is some better and simple way?

.btn, .btn-large {
color: xxx;
background-color: xxx;
}
xxx:focus{}
...

Want your ways to change the default ones.
Thanks.

[Dogfalo]

Use Sass and it will be easy
On Jan 13, 2016 7:43 AM, "Yole" [email protected] wrote:

I want to know what is the best practice in materializecss to change all
widget default color(light green)

Do I need to put some css to my customcss like below, or there is some
better and simple way?

btn, btn-large {
color: xxx;
background-color: xxx;
}
xxx:focus{}

Want your ways to change the default ones
Thanks

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/2648.

[YoleYu]

I will be nice if materialize have some mechanism can change the default color.

[Dogfalo]

Yea, if you use Sass you can change the primary color

On Wed, Jan 13, 2016 at 5:58 PM, Yole [email protected] wrote:

I will be nice if materialize have some mechanism can change the default
color.

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/2648#issuecomment-171500300
.

Doggy sends his greetings from Mars.

[YoleYu]

Does anyone know what does the below meta used for. Did not find the usage in docs.

[Dogfalo]

It's used to change chrome tab color

[crobinson42]

FOR FOLKS LOOKING FOR THE SOLUTION:

Download the sass files - in components/_variables.scss you'll find the default colors around line 40. You can change these colors and compile your sass into css or whatever fits your project's needs and be good to go.

[longrunningprocess]

fwiw, I appreciated how MDL did it by simply producing all the color combinations from the color wheel into separate css files for download (see the Color Palette section of https://getmdl.io/styles/index.html).

It kept me from having to build out the CSS myself but I understand it should be easy to set something up to have sass build out those files and include them in our project.

Do you think it would be out of the question for contributors on this project to consider integrating a similar process into the existing build? I'd love to migrate over to materialize but this is one slight barrier for me at this time.

[writeless]

Best way I found to change default colors:

$roboto-font-path: "../node_modules/materialize-css/dist/fonts/roboto/" !default;

@import "../node_modules/materialize-css/sass/components/color";

$primary-color: color("blue-grey", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("amber", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

@import '../node_modules/materialize-css/sass/materialize.scss';

[Jakemo136]

Alternatively, you can use their color names and insert them directly into the class of the widget, like so:
class="btn waves-effect waves-light cyan darken-2"