materializecss/materialize

Create Theme v2.1.0

vutsalsinghal opened this issue · 6 comments

vutsalsinghal commented

Hi There,

Could you please update the docs for "Creating a Theme" (link) with a little more detailed example. I'm not very familiar with advance css theming and any help would be appreciated 🙏🏼

Also I don't understand this warning message

Deprecated in 2.1.0! Use the Material M3 Variables instead to create a custom Theme!

An example usage with M3 vars would be awesome!

quillaja commented

@vutsalsinghal I had a question about using the M3 themes just a few days ago (last few posts of #409 ). Here's what to do:

  1. goto https://material-foundation.github.io/material-theme-builder/ and create your theme.
  2. download as CSS and unpack the stylesheets in the appropriate place in your project
  3. link at least one of the stylesheets in your html
  4. set the body class to the class in one of the stylesheets. For example, for the standard contrast light theme (light.css) add set <body class="light">.

That's it. I think there are a few things in materializecss that still don't 100% respect the theme, however. (such as #385 )
Hopefully that'll help you until the website itself is updated.

  • ❤️2
vutsalsinghal commented

thanks a lot! Let me try and get back

danice commented

Just to add that we don't depend material-foundation anymore, you can generate css theme directly in https://materializeweb.com

imagen

(well there is an issue right now but it should be fixed by this PR materializecss/materialize-docs#12 )

Also this theme selector allows to check how all components will look like with the theme.

In this first version materializeweb theme selector only allows to select Primary color, but we could make it more complete in future versions. The generated file should be the same as with https://material-foundation.github.io/material-theme-builder

  • 👍4
vutsalsinghal commented

@quillaja your solution is working. thanks a lot!!

vutsalsinghal commented

@quillaja / @danice , Qq - how do I style individual elements?

For example, I want to toggle color of text on light/dark theme. Is there a class I can use or do I have to add inline style like so style="color: var(--md-sys-color-primary)" to each element?

vutsalsinghal commented

ok, this file answers my question!

https://github.com/materializecss/materialize/blob/main/sass/components/colors.module.scss

(I think adding this to theme docs would be helpful)

  • 👍1