Comments (12)
Thisisjuke
commented on May 20, 2024
6
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 ✌️
from next-themes.
pacocoursey
commented on May 20, 2024
1
Hey, I was able to reproduce this issue when the theme is system. I'll take a look today
Oops, never mind. See comment below
from next-themes.
jhg023
commented on May 20, 2024
1
@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}.
from next-themes.
christofferbergj
commented on May 20, 2024
I haven't looked in depth, but it seems like there's an issue in version 0.0.14. Try downgrading to 0.0.10.
from next-themes.
trm217
commented on May 20, 2024
I tested this with V 0.0.14 in my Next.js deployment.
For me it works as expected with no issues when using Firefox 87.0.
However unlike you, I don't use the JIT compiler for Tailwind, perhaps it has something to do with that.
Either way I doubt the problem is related to this package. I suppose it's a Tailwind error, have you checked if the compiled output is as expected?
from next-themes.
trm217
commented on May 20, 2024
Hey, I was able to reproduce this issue when the theme is
system. I'll take a look today
That's odd, how exactly could you reproduce it? On what OS are you working on?
from next-themes.
pacocoursey
commented on May 20, 2024
My mistake – could not actually reproduce! Using next@latest with tailwindcss@latest, including mode: jit.
@Christofferberg You mentioned there may be some issues in 0.0.14, could you provide a reproduction?
from next-themes.
jhg023
commented on May 20, 2024
I had a similar issue, and I was able to fix it by setting enableColorScheme={false} in the <ThemeProvider>.
from next-themes.
pacocoursey
commented on May 20, 2024
Do you have any more details @jhg023? Things like defaultTheme, what was in localStorage, and what the current theme was would be helpful. And a reproduction would be best of all 👑
from next-themes.
pacocoursey
commented on May 20, 2024
Thank you for the additional details and fix! I think I'll make enableColorScheme be false by default in a new version until all browsers can properly support it.
from next-themes.
trm217
commented on May 20, 2024
@pacocoursey if it was true so far couldn‘t this break existing pages? I believe it would be better to add a disclaimer for the behavior in Firefox and just keep it the way it is. Firefox is just one of many browsers and most are chromium based anyways. So it should work as expected for most.
from next-themes.
pacocoursey
commented on May 20, 2024
The latest few Firefox versions support color-scheme and I haven't been able to reproduce this for a while, closing. Please let me know if it's still an issue!
from next-themes.
Related Issues (20)
- [Wish] Theme only for subpages or subcomponents HOT 1
- First call on setTheme not working HOT 6
- Set color-scheme: dark with Tailwind and custom themes HOT 2
- Dynamic Forced Theme HOT 2
- run npx create-next-app@latest, accept all defaults, add theme provider. Getting: "Warning: Extra attributes from the server: class,style at html"" HOT 1
- Unhandled Runtime Error , Error: Text content does not match server-rendered HTML. HOT 1
- How to force theme (app router) HOT 9
- Support for Next.js 14
- i cant install next-theme on new verison next 14.0.0 HOT 6
- Warning: Extra attributes from the server: data-theme,style with App router HOT 4
- Does it work with `grommet`?
- useTheme() doesn't return active theme
- `resolvedTheme` does not resolve to `dark` | `light` but instead to `system` HOT 1
- Support for multiple attributes (more in depth theme management)
- Flash of no theme (zero-config ThemeProvider, Next 14, not Cloudflare) HOT 1
- setTheme does not update DOM (next 13) HOT 1
- How can I get a transition between dark and light mode HOT 3
- defaultTheme did't work in the latest Chrome for macOS HOT 7
- Next Themes Flash of White BG when using the basePath HOT 4
- Inconsistent theming when the page loads HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-themes.