Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Firefox is not switching between light/dark

See original GitHub issue

Hei,

First of all i want to thank you about this lib 😉 I have an issue with Firefox, even if the local storage is set and the class is added on <html>the theme does not change.

I’m using the last next.js with tailwind jit

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:12 (5 by maintainers)

Top GitHub Comments

6reactions

Thisisjukecommented, May 4, 2021

Hello everyone, I had the same issue in my NextJS app, with TailwindCSS (without JIT). I might be wrong, but I fixed it on my project.

CONTEXT

Working great on chrome and Safari : I can switch between themes. When switching on Firefox, only my TailwindCSS classes prefixed by dark: where working : no auto change of the text-color or background-color 😞

WHY IS IT HAPPENING ?

Firefox seems to have few problems with prefers-color-scheme, triggered with enableColorScheme props

The developer of a dark-theme Firefox extension said that some things are missing inside the browser API. https://discourse.mozilla.org/t/how-to-test-preferred-color-scheme-dark-mode-with-firefox/40769/4

HOW TO FIX IT ?

Sad to say, but if you are encountering this issue, you should do enableColorScheme = false and style all your DOM with custom Tailwind class : Don’t let the browser API do changes for you Add dark:bg-dark dark:text-white on your <body>

No magic here, a little more work on the text and the buttons, but you can fully use next-themes on all your browsers ! I hope it helped a bit ! Peace ✌️

1reaction

jhg023commented, Apr 23, 2021

@pacocoursey I’m happy to help, but frontend development isn’t my area of expertise, so you’ll have to bear with me.

My provider was initially defined as <ThemeProvider attribute="class" defaultTheme="dark">, and the library it was conflicting with was react-use-intercom (https://www.npmjs.com/package/react-use-intercom, version 1.1.9).

The only relevant value in my local storage is theme mapped to a value of dark, which is the same whether or not I set enableColorScheme={false}.

Top Results From Across the Web

1565469 - [10.15] Firefox Light/Dark appearance does not ...

Workaround: manually click on Light or Dark, check if Firefox's theme is now correct, switch back to Automatic. Expected results: Firefox should also...

How can I switch between light/dark theme from the command ...

Hey, I am trying to create a script which will allow me to switch between light and dark mode on Firefox without having...

How to Turn on Firefox Dark Mode on Desktop or Mobile

How to turn on a Firefox browser's dark mode on a computer or mobile device ... and choose between Light, Dark, or Follow...

Light/Dark firefox theme switching - Remy Sharp

Firefox recently updated with a System Theme that would change when the system went from light to dark and back again, but I...

How to get Firefox dark mode - TechRadar

Get Firefox dark mode on desktop or mobile and enjoy a more stylish ... switching to dark mode reduces the amount of light...