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

Docs for disabling Dark Mode are incomplete #923

Open
3 tasks done
woodseowl opened this issue Dec 23, 2024 · 3 comments
Open
3 tasks done

Docs for disabling Dark Mode are incomplete #923

woodseowl opened this issue Dec 23, 2024 · 3 comments

Comments

@woodseowl
Copy link

Flux version

v1.1.2

Livewire version

v3.5.12

What is the problem?

The docs for disabling dark mode explain you should update tailwind.config.js to use darkMode: null, however, a class="dark" is still added to the root <html> element.

Code snippets

I see this code added by Flux in the generated HTML for a page containing @fluxStyles:

<script>
    let appearance = window.localStorage.getItem('flux.appearance') || 'system'

    if (appearance === 'system') {
        appearance = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    appearance === 'dark' ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')
</script>

How do you expect it to work?

I'd like to have the documentation also describe how to prevent the class from being added.

The way that I came up to do it is add the following before @fluxStyles:

    <script>
        window.localStorage.setItem('flux.appearance', 'none');
    </script>

Ideally, this would not be needed because the code would be able to detect that darkMode: null is set and then not inject the script. For the mean time, just getting better documentation would help.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.
@calebporzio
Copy link
Contributor

Ahhhh you're right - if someone enables dark mode, then tries to disable it, the key is left in localStorage and that bit of JS will bring ".dark" back when it shouldn't be. hmmm. @joshhanley ?

@woodseowl
Copy link
Author

if someone enables dark mode, then tries to disable it, the key is left in localStorage and that bit of JS will bring ".dark" back when it shouldn't be

Well, not quite that. I'm working with an app that specifically should never have dark mode enabled and needs to not have a "dark" class applied universally because we already have that class name in use for other purposes. The code injected by Flux adds "dark" as a class if someone has their system settings set to dark mode, regardless of whether darkMode is intended to be on within the app overall.

(As a side note to this, if there are namespace conflicts with "dark" as a class name in the site design, there's not really a way to use Flux dark mode selection. I did look at how Tailwind handles dark mode naming and saw that the dark mode selector could be customized with a different classname. I realize that's a lot of work to apply in Flux and not a solution for what I've reported in this issue, but maybe it's a long term idea.)

@igmltd
Copy link

igmltd commented Dec 24, 2024

@calebporzio, I do the following, could this be a solution?

#913

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@calebporzio @woodseowl @igmltd