How to use CSS variables

[iocast]

you wrote in the doc that css variables can be used change the colors. But in the compiled css under daemonite-material\css\ I cannot see any color attribute is using var(--abc). Can you elaborate how to use these css variables described in the doc.

many thanks iocast

[djibe]

Css vars are declared at the beginning of daemonite and bootstrap CSS files.

:root { --amber: #ffc107; --blue: #2196f3; --blue-grey: #607d8b; }

To call a CSS var in your own CSS, write .my-class { background-color: var(--amber); }

This is basic CSS, please close issue.

[iocast]

thanks for the reply

Sadly is does not work. What i tried is to change the colors for --primary etc. this is my css

@import 'daemonite-material/css/material.css';
:root {
  --primary: #77c565;
  --secondary: #927628;
}

What I expect is that for e.g. for the css class is-selected the new color #77c565 is used. currently it uses the following css

.floating-label.is-focused label {
    color: #ff4081;
}

or do I miss something

[djibe]

CSS vars are not used to theme but to use variables ... as it implies.

To theme Daemonite, open variables/_palette.scss and change primary and secondary colors. Then rebuild material.scss (with GUI like Koala)

[iocast]

So means your are not using this default principal var(--variable, fallback). Hence I have to use sass in my build process. hmmm ... ok thanks.

[djibe]

OK, for now, change the --amber: color declaration.

Add to your CSS : .floating-label.is-focused label { color: var(--amber); } Import your CSS AFTER material.css. Test

[iocast]

Yes but then I have to do it for all color's. I go with a sass plugin for postcss.

thanks

[rashad]

Hello, small 🆙 on this issue for a n00b who doesn't really get how scss works. What are the steps one has to follow to be able to customize material theming?

Thanks a looot for your help and the amazing work you guys did on Material 🔥

[djibe]

Simple steps.

1. Download http://koala-app.com/ and install Koala.

2. Download Daemonite material UI.

3. Go to assets/scss/variables/

4. Open _palette.scss.

5. Replace colors

6. Open koala and open assets/scss folder

7. material.scss file is shown in gui. Click on it, Check options Autoprefix and Output Style compressed in side panel. A new material.css file is generated.

8. Enjoy your custom theme.

9. To remove unncessary Bootstrap components from your theme, you can comment lines (add // in front of the line) in material.scss file. Ex : // @import 'bootstrap/alert';

You can find tutorials online for SASS, but here is the simplest start. Tell me if you need more info. Or you can try my upgraded material theme.

[rashad]

Thank you soooo much @djibe your solution worked perfectly the first time. It's pure gold 💎 Thanks for your help and answering on a closed issue moreover 😅

Please share with me your upgraded material theme as well so I can take a look and use it as well 🙏

Thanks again you really helped me save some hours here! Cheers from France 👋

[djibe]

@rashad My material is here : https://github.com/djibe/material/tree/master/css Still some bugs with snackbars ans switches.

Cheers from France