Would it be possible to handle dark mode differently? #386

Kam3leoN · 2023-06-18T08:47:12Z

Before submitting...

I have searched for duplicate or closed issues.
I have read the CONTRIBUTING document and my issue is following the guidelines.
I have read the template completely before filling it in.

Context

The darkmode is not advanced enough in terms of options

Current Behavior

The dark mode option is perfect but deserves to be deepened

Expected behavior

If possible, the ideal would be to be able to activate it as a component

Here are some interesting leads and cool options like:

Activation or not via the "materialize.init.js" file like the other components.
Dark mode with choice between: Dark, Light and Automatic (ex: in a drop-down menu) the automatic would be executed, if selected
by the user instead of darkmode depending on the time of day (example "darkmode" between 19pm and 7am otherwise "lightmode", it's just one more condition but very practical).
Show toast (“Dark”, “Light”, “Automatic” mode “On”, “Off”).
Switching from darkmode to lightmode with a wave effect as (https://vuetifyjs.com/)

Possible Solutions or Causes

No response

Your Environment

MaterializeCSS : 2.0.1 alpha
Chrome : Version 114.0.5735.134 (Build officiel) (64 bits)
Windows 11 on desktop

Jerit3787 · 2023-06-18T16:30:17Z

Hi, I would like to just give my opinions on this one. Actually, I think that this should be the website developer responsibility to implement this, not under the responsibility of maintainer as different websites have their own different needs and implementations. I haven't found a CSS library that do this yet on a library-level of implementations. Plus, it would be a hassle to properly maintain this as it will depends on other's library / browser feature. Would also want to hear from others as well. This is only mere my opinions.

EDIT : I wouldn't say it is impossible but I'm looking at other library approach.

ivanBell199 · 2023-06-20T19:36:00Z

As a random (not advanced) user of the library I can say that I am completely happy with the current implementation. A simple example of JS theme-toggle and a list of CSS variables are fine for me

Kam3leoN · 2023-07-16T13:16:58Z

The idea is to appeal not just to one person but to a wide audience.
I agree with the fact that it is the developer of the site but in the absolute it is finally a component like any other some will use the sidebar others not, hence the idea of making it a component and to give free rein to choice via options. ;)

danice · 2023-07-16T17:14:54Z

I agree with @Jerit3787 , a framework should leave open how to apply the styles.
For example, about this light / dark , it also exist the prefers-color-scheme , I have not used that but it seems a way for the user to fix its preferences from the browser:

prefers-color-scheme is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

If the framework had implemented what you said (the "automatic" option)it will conflict with this option.

kenny-nt · 2024-06-27T04:45:45Z

I create personal wordpress plugin with materialize and it is default set to dark > make all admin go to dark. How to make default theme to light? I check localstorage and no attribute: theme

Jerit3787 · 2024-06-27T06:24:50Z

I create personal wordpress plugin with materialize and it is default set to dark > make all admin go to dark. How to make default theme to light? I check localstorage and no attribute: theme

Hi @kenny-nt, you can view this issue for solutions #483.

p/s sorry my mistake

for default theme, it seems to react based on theme set on the html element

// for light theme
document.documentElement.setAttribute('theme', 'light');

// for debugging
<html theme="light">
</html>

// for dark theme
document.documentElement.setAttribute('theme', 'dark');

// for debugging
<html theme="dark">
</html>

the usage of localstorage is to store user's preference for the theme option and loads up every time users load the website.

kenny-nt · 2024-06-27T07:10:08Z

html tag currently do not have attribute theme and it is still dark as default. I tried to edit and add theme="light" > make body to light. Is it should be light as default!?

Jerit3787 · 2024-06-27T07:13:39Z

html tag currently do not have attribute theme and it is still dark as default. I tried to edit and add theme="light" > make body to light. Is it should be light as default!?

I'm not sure why your default theme is dark. The default theme for materialize is light, and you should also be able to switch to dark. If you could provide how the implementations on your side would be appreciated.

kenny-nt · 2024-06-27T12:51:31Z

``> > html tag currently do not have attribute theme and it is still dark as default. I tried to edit and add theme="light" > make body to light. Is it should be light as default!?

I'm not sure why your default theme is dark. The default theme for materialize is light, and you should also be able to switch to dark. If you could provide how the implementations on your side would be appreciated.

I just enqueue materialize into an option page of wordpress (wp-admin_ . I dont setup html tag, the default html tag of wordpress admin backend. I checked html tag:

<html class="wp-toolbar wf-poppins-n7-inactive wf-poppins-n4-inactive wf-dancingscript-n4-inactive wf-inactive" lang="en-US">
<body>
.....
</body>
</html>

But the page is dark mode... It is not happened with 2.0.4

wuda-io · 2024-06-27T20:21:57Z

The default theme depends now on the system preferences. If you have set your System to dark mode then Materialize will also render in dark. If you have default light mode, then it will render light.

You can override the theme via Javascript. The documentation needs to be updated. And also all the old theme variables are deprecated. We use now directly the M3 vars, because they were already mix up and it was cleaner to use them directly. There is still a lot of work to do, so please contribute. Every support is very welcome! Thanks.

Jerit3787 added the discussion label Oct 10, 2023

wuda-io added the hacktoberfest label Oct 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Would it be possible to handle dark mode differently? #386

Would it be possible to handle dark mode differently? #386

Kam3leoN commented Jun 18, 2023 •

edited

Loading

Jerit3787 commented Jun 18, 2023 •

edited

Loading

ivanBell199 commented Jun 20, 2023 •

edited

Loading

Kam3leoN commented Jul 16, 2023

danice commented Jul 16, 2023 •

edited

Loading

kenny-nt commented Jun 27, 2024

Jerit3787 commented Jun 27, 2024 •

edited

Loading

kenny-nt commented Jun 27, 2024

Jerit3787 commented Jun 27, 2024 •

edited

Loading

kenny-nt commented Jun 27, 2024

wuda-io commented Jun 27, 2024

Would it be possible to handle dark mode differently? #386

Would it be possible to handle dark mode differently? #386

Comments

Kam3leoN commented Jun 18, 2023 • edited Loading

Before submitting...

Context

Current Behavior

Expected behavior

Possible Solutions or Causes

Your Environment

Jerit3787 commented Jun 18, 2023 • edited Loading

ivanBell199 commented Jun 20, 2023 • edited Loading

Kam3leoN commented Jul 16, 2023

danice commented Jul 16, 2023 • edited Loading

kenny-nt commented Jun 27, 2024

Jerit3787 commented Jun 27, 2024 • edited Loading

kenny-nt commented Jun 27, 2024

Jerit3787 commented Jun 27, 2024 • edited Loading

kenny-nt commented Jun 27, 2024

wuda-io commented Jun 27, 2024

Kam3leoN commented Jun 18, 2023 •

edited

Loading

Jerit3787 commented Jun 18, 2023 •

edited

Loading

ivanBell199 commented Jun 20, 2023 •

edited

Loading

danice commented Jul 16, 2023 •

edited

Loading

Jerit3787 commented Jun 27, 2024 •

edited

Loading

Jerit3787 commented Jun 27, 2024 •

edited

Loading