Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create Theme v2.1.0 #483

Closed
vutsalsinghal opened this issue Jun 21, 2024 · 6 comments
Closed

Create Theme v2.1.0 #483

vutsalsinghal opened this issue Jun 21, 2024 · 6 comments
Labels
documentation Improvements or additions to documentation

Comments

@vutsalsinghal
Copy link

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
Copy link

quillaja commented Jun 21, 2024 •
edited
Loading

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

@Jerit3787 Jerit3787 added the documentation Improvements or additions to documentation label Jun 22, 2024
@vutsalsinghal
Copy link
Author

thanks a lot! Let me try and get back

@danice
Copy link

danice commented Jun 25, 2024

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

@vutsalsinghal
Copy link
Author

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

@vutsalsinghal
Copy link
Author

@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
Copy link
Author

vutsalsinghal commented Jun 26, 2024 •
edited
Loading

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)

@Jerit3787 Jerit3787 mentioned this issue Jun 27, 2024
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@danice @vutsalsinghal @quillaja @Jerit3787