Turn on dark mode locally

[cemerick]

In the course of building some static (landing) pages, I wanted to clearly delineate sections with stark background transitions (i.e. generally alternating light vs. dark, as one often finds on landing/marketing pages).

I initially thought I'd be able to enable dark mode styling within a section just by adding a data-theme='dark' attribute. This unfortunately doesn't work though, as the dark-mode css rules all require that attribute to be page-wide, on the html element. The only workaround I see at the moment is to reverse-engineer dark-mode styles and apply them "by hand" as needed.

In a quick messy experiment, it seemed that eliminating that constraint (changing html[data-theme='dark'] { ... } to simply [data-theme='dark'] { ... }, among other things) showed good results, i.e. I could locally turn on dark mode quite easily with no ill effects AFAICT.

Is there a better workaround to opt in a particular component into dark-mode styling, or will some CSS work as I tinkered with going to be necessary to resolve this use case smoothly?

(Very alternatively, a tailwind-flavoured theme would probably make this moot, as its 'selector' dark mode option is responsive to a .dark class on any parent element.)

[slorber]

So what I understand is that you want the overall page to be light, but have some layout elements like navbar, footer and sidebar to be dark? 🤔

Yes, it seems like we could enable [data-theme='dark'] on any parent like Tailwind and not only on the HTML element.

I don't really know any other workaround to achieve that apart from overriding CSS variables locally if they are available, which might not be as convenient.

---

Note that there's an upcoming Web Preference API that enables global override of the theme that should work with prefers-color-scheme, light-dark(), and co.

https://x.com/sebastienlorber/status/1836698597548593350
https://github.com/WICG/web-preferences-api

Your requirement might prevent us from adopting this 😅 cc @lukewarlow

[cemerick]

So what I understand is that you want the overall page to be light, but have some layout elements like navbar, footer and sidebar to be dark? 🤔

No -- while the light/dark framing is useful for utilitarian sites/pages, it's too limiting when talking about landing/marketing pages (which often don't provide "light" and "dark" themes, but rather a single design aesthetic). If you look at e.g. https://panic.com/transmit/ (just a nice example I happened to see yesterday), there's no obvious dichotomy to each section's "theme". I don't think that that's at odds with user color scheme preferences, insofar as in such contexts, those preferences are often mostly (intentionally) ignored.

I'm well aware that I'm abusing docusaurus a bit so that it is doing double duty (hosting marketing pages as well as documentation and such) 😈 But, I can imagine a pure documentation site having an interest in selectively making certain sections of content specifically "dark" or "light" vs the surrounding context -- to suit a design aesthetic, provide proper contrast for some embedded content or image, function as an un-ignorable admonition, etc.

[slorber]

So, you want:

• some pages of your site to support both dark/light
• and some landing pages not have any theme (or forcing a single "light" theme)?

If I still don't understand, maybe you should rather create a concrete Docusaurus site example and show me which URL should have which theme, and eventually provide a mockup.

What would help me understand is a concrete example like

/ should be "light"
/page2 should be "dark"
/page3 should be "light" | "dark" depending on theme toggle

Keep in mind that:

• on a React page, you are free to use any React/CSS code you want, and not forced to use html[data-theme="x"] selectors
• the layout is shared by default. If your page only has a single theme, what do you expect to happen if the user clicks the theme toggle on that page?

---

But, I can imagine a pure documentation site having an interest in selectively making certain sections of content specifically "dark" or "light" vs the surrounding context -- to suit a design aesthetic, provide proper contrast for some embedded content or image, function as an un-ignorable admonition, etc.

Hmm, isn't this exactly what I suggested above where layout elements can force a certain theme independently?