Material-components-web: Help with customizing mdc-theme colors

[Frame1910]

I could just use some help with changing the default theme colors to custom colors. I am new to the theming part of MDC.

For some reason, with whatever method I use, I cannot change my themes to my own colors.
I have tried :root
:root { --mdc-theme-primary: #4e0087; --mdc-theme-secondary: #fff; --mdc-theme-background: #000; }
I have tried SASS
$mdc-theme-primary: #9c27b0; // Purple 500 $mdc-theme-secondary: #ffab40; // Orange A200 $mdc-theme-background: #fff; // White

And i have tried SASS mixins
body { --mdc-theme-primary: #9c27b0; }

Palm-Paradise-Web.zip

I just can't figure it out, any help would be much appreciated to a budding web designer :)

[touficbatache]

Hey @Frame1910, to fix this just put the <link href="styling.css" rel="stylesheet"> tag after the <link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css"> one, not before it. Then, you can use

:root {
    --mdc-theme-primary: #9c27b0;
    --mdc-theme-secondary: #ffab40;
    --mdc-theme-background: #fff;
}

[touficbatache]

And yes, forgot to mention, you can remove the @import from your styling.css file.

[Frame1910]

Ok, thanks... I'll try it later as I'm currently meeting the guy I'm
designing the site for. Will post back the result of the changes.

On 2 Nov. 2017 3:22 pm, "Toufic Batache" [e-mail] wrote:

And yes, forgot to mention, you can remove the @import
https://github.com/import from your styling.css file.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/1527#issuecomment-341337636,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVM5SpjtJn6FpKrgMRMlNy-m9BezT6Sgks5syW2sgaJpZM4QPJAv
.

[Frame1910]

And on a seperate note, a couple other components from MDC don't seem to
work for me either, it's probably the same problem of referencing... But
it's menus and dropdown inputs that also do not work, I'll get more info on
it and maybe make a new issue on it if that's the case. Mdc's components
just look so clean and pleasing to all my clients and they want to use
them, but they don't work for me.

On 2 Nov. 2017 4:52 pm, "Darren .Meiring" [e-mail] wrote:

Ok, thanks... I'll try it later as I'm currently meeting the guy I'm
designing the site for. Will post back the result of the changes.

On 2 Nov. 2017 3:22 pm, "Toufic Batache" [e-mail] wrote:

And yes, forgot to mention, you can remove the @import
https://github.com/import from your styling.css file.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/1527#issuecomment-341337636,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVM5SpjtJn6FpKrgMRMlNy-m9BezT6Sgks5syW2sgaJpZM4QPJAv
.

[touficbatache]

You can read the README for every component so you know how it works. If
you're still struggling, there is a demo page where you can see all the components in action. If you need more help, feel free to reply here.

[Frame1910]

Ok so I tried what you said and.. it worked. Hooray! Thanks for the help.
I'll get back to you about the other components, I have looked at the usage
instructions and did everything to the letter, but like I said it might be
a load order issue like the other one.

On Thu, Nov 2, 2017 at 5:02 PM, Toufic Batache [e-mail]
wrote:

You can read the README for every component so you know how it works. If
you're still struggling, there is a demo page where you can see all the
components in action. If you need more help, feel free to reply here.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/1527#issuecomment-341357678,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVM5ShfhKJmVwLlqFiFzQ3oyA_pYaCKJks5syYUjgaJpZM4QPJAv
.

[thebrightestday]

There are rules how to use CSS.
This solution from @touficbatache is basically a cascading rule. Maybe you should read this first:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance