Materialize: Dark Mode/ Theme in materialize?
Expected Behavior
As Google added it to their Material Design Guidelines, are there any plans to implement it in materialize? What would it take? Icons would need to change from Black to White, background colors, text colors, what else? Are there plans for integrating this yet? Or is it just out of scope for this project, as in everyone needs to implement this for themselves?
Context
As many major websites and apps are offering dark themes for multiple reasons, I think it would be great to help people who already use materialize to implement this really quick. Maybe by offering a second CSS file or a single variable?
creyD
All 12 comments
Any news on this?
tyler-wp
on 6 Aug 2019
@Tyler-HS Nope...
creyD
on 7 Aug 2019
@Dogfalo could someone at least mark this as feature request or acknowledge this? I don't have a problem if this won't be developed or doesn't fit the size of the project, but please close this then or decline it.
creyD
on 16 Aug 2019
Thank you!
creyD
on 17 Aug 2019
Any updates on this?
trandzient
on 20 Sep 2019
So what's going on with this feature? Any updates? @Dogfalo Please do something, people will be very excited to see dark theme in materialize, and more people will use it in their new projects.
Thank you
developerfromjokela
on 19 Oct 2019
You can always compile SASS files with your own custom colors.
edit: see file css/_variables.scss
sijanec
on 19 Feb 2020
Are there any updates on this yet?
ShRyDeR
on 10 Mar 2020
Made a flexible and well working solution for the Dark Mode:
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/
Works with basic CSS variables + short JavaScript.
Can be used to define multiple color themes in one CSS file or other dynamic style settings like text size settings, etc...
Have fun using my code !
Dorson
on 9 Apr 2020
Made a flexible and well working solution for the Dark Mode:
https://dorson.github.io/CSS-Dark-Mode-and-color-switch/
Works with basic CSS variables + short JavaScript.
Can be used to define multiple color themes in one CSS file or other dynamic style settings like text size settings, etc...
Have fun using my code !
This is the github link: https://github.com/Dorson/CSS-Dark-Mode-and-color-switch
Looking good so far, but I need materialize anyway.
creyD
on 9 Apr 2020
What about just using the prefers-color-scheme CSS media query to detect user preference for dark mode without any buttons? Would this be welcome in materialize?
Or is the project still being maintained?
tonimelisma
on 28 Oct 2020
It would still be better to allow the developer to force the dark theme,
let's say the user does not use prefers-color-scheme but still wants dark
layout.
A nice feature of the javascript part would be to specify colors with var()
CSS format in an array, so the SCSS files would not contain any color
values at all, only var(--color-foreground...) placeholders, which could be
changed at runtime.
On Wed, 28 Oct 2020, 23:01 Toni Melisma, notifications@github.com wrote:
What about just using the prefers-color-scheme CSS media query to detect
user preference for dark mode without any buttons? Would this be welcome in
materialize?Or is the project still being maintained?
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/6363#issuecomment-718233920,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKFM2EVFRUGV5R2BWVFF2G3SNCIENANCNFSM4HMPHB5A
.
sijanec
on 29 Oct 2020
Related issues
acierpinski
·
3Comments
MickaelH974
·
3Comments
hartwork
·
3Comments
heshamelmasry77
·
3Comments
artur99
·
3Comments
Most helpful comment
So what's going on with this feature? Any updates? @Dogfalo Please do something, people will be very excited to see dark theme in materialize, and more people will use it in their new projects.
Thank you