Skip to content

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

New issue
New issue
Open
Open
Would it be possible to handle dark mode differently?#386
Labels
discussionhacktoberfest
@Kam3leoN

Description

@Kam3leoN
Kam3leoN
opened on Jun 18, 2023 · edited by Kam3leoN

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:

  1. Activation or not via the "materialize.init.js" file like the other components.
  2. 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).
  3. Show toast (“Dark”, “Light”, “Automatic” mode “On”, “Off”).
  4. 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

Activity

Jerit3787

Jerit3787 commented on Jun 18, 2023

@Jerit3787
Jerit3787
on Jun 18, 2023 · edited by Jerit3787

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

ivanBell199 commented on Jun 20, 2023

@ivanBell199
ivanBell199
on Jun 20, 2023 · edited by ivanBell199

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

Kam3leoN commented on Jul 16, 2023

@Kam3leoN
Kam3leoN
on Jul 16, 2023
Author

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

danice commented on Jul 16, 2023

@danice
danice
on Jul 16, 2023 · edited by danice

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.

Jerit3787
added
discussion
on Oct 10, 2023
wuda-io
added
hacktoberfest
on Oct 21, 2023
kenny-nt

kenny-nt commented on Jun 27, 2024

@kenny-nt
kenny-nt
on Jun 27, 2024

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

Jerit3787 commented on Jun 27, 2024

@Jerit3787
Jerit3787
on Jun 27, 2024 · edited by Jerit3787

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

kenny-nt commented on Jun 27, 2024

@kenny-nt
kenny-nt
on Jun 27, 2024

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

Jerit3787 commented on Jun 27, 2024

@Jerit3787
Jerit3787
on Jun 27, 2024 · edited by Jerit3787

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

kenny-nt commented on Jun 27, 2024

@kenny-nt
kenny-nt
on Jun 27, 2024

``> > 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

wuda-io commented on Jun 27, 2024

@wuda-io
wuda-io
on Jun 27, 2024
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    discussionhacktoberfest

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @danice@Kam3leoN@wuda-io@kenny-nt@Jerit3787

        Issue actions
          Would it be possible to handle dark mode differently? · Issue #386 · materializecss/materialize