Comments (2)
@sspenst I made a theme called dim
and added the following to my global css:
:is(.dim .dark\:prose-invert) {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-kbd: var(--tw-prose-invert-kbd);
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
I don't know if that's what you're looking for but it did the job for my use-case.
from next-themes.
@CSpencerND your comment gave me some inspiration to try this again and I finally got it working. The difficulty for my case is that I want two classes:
- one for my custom theme (eg
theme-modern
) - one for dark mode
next-themes allows mapping custom themes to different class names, but in my case I need to map each class to multiple class names. I think my implementation could be a lot simpler if this was a feature:
<ThemeProvider
attribute='class'
themes={Object.values(Theme)}
value={{
[Theme.Modern]: ['dark', 'theme-modern'],
[Theme.Light]: ['light', 'theme-light'],
...
}}
>
What I ended up doing was creating a new attribute data-theme-dark
that I keep track of manually based on the the current theme, and then updated my Tailwind config to have:
darkMode: [
'class',
'[data-theme-dark="true"]',
],
I then used the idea from #77 (comment) to update the color-scheme:
[data-theme-dark="true"] {
color-scheme: dark;
}
Finally, for dark mode to work instantly I had to add the following script:
<script dangerouslySetInnerHTML={{
__html: `
!function() {
const theme = localStorage.getItem('theme');
// set data-theme-dark for Tailwind dark classes
document.documentElement.setAttribute('data-theme-dark', theme === 'theme-light' ? 'false' : 'true');
// check for an invalid theme and default to theme-modern
// ThemeProvider doesn't handle this case with defaultTheme so we have to do it manually here
if (!${JSON.stringify(Object.values(Theme))}.includes(theme)) {
localStorage.setItem('theme', 'theme-modern');
}
}();
`,
}} />
It would be great if there was a simple way to do this with next-themes, but for now this seems to get the job done.
from next-themes.
Related Issues (20)
- How to disable syncing themes between tabs HOT 2
- Documentation out of date with Tailwind's new dark-mode API
- Should `resolvedTheme` obey `forcedTheme`? HOT 3
- Allow nested providers HOT 2
- Theme object is injected into the "data-theme" property. HOT 1
- useTheme doesn't work in monorepo ui library. HOT 1
- `TypeError: Cannot read properties of undefined (reading 'addListener')` using `vitest`/`@testing-library/react` HOT 1
- Support for changing both class and data-theme attribute simultaneously HOT 1
- Callback Version of `setTheme` Passes Itself HOT 1
- Possibility to share across sub-domains? HOT 1
- ThemeProvider returns multiple types HOT 3
- setTheme not working HOT 1
- Theme flashing v0.3.0 HOT 7
- Next.js suspense triggered twice with next-themes HOT 1
- Flash Of Unstyled Content (FOUC) on Live Website HOT 6
- The way avoid hydration errors has a negative impact on SEO. HOT 2
- [Feature request]:setTheme multiple classes for next-themes HOT 5
- [Feature request]: The opportunity not to store theme value in LS
- [Feature request]: react 19 support HOT 2
- [Bug]: NextJs dark mode background is black on overscroll
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.