Dark mode Issues - Dark-Mode not Persisted and Tailwind dark: prefix doesn't work #348

baltermia · 2026-06-08T12:51:01Z

baltermia
Jun 8, 2026

I have multiple issues with the dark mode at the moment.

Not persistent
I added the BbDarkModeToggle, and it switches fine, but reloading or even changing the page (clicking an href) resets it back to light mode. Now I don't know whether the "link-clicking" happens because it's on my login pages, which are rendered differently, maybe that's the issue.
Tailwind prefix not working
This is probably the one that bothers me the most. I do have Tailwind installed and run it while running the App, etc. And the docs say I could use dark: prefix to only do some styling when dark mode is enabled, e.g. for gradients I would often use dark:bg-none, but doing that will simply enable the bg-none always, so also in light mode, which disables the gradient.

If anyone has some suggestions or maybe a Demo project I could check out that gets this correctly, gladly lmk 🙏 Btw I mostly use InteractiveServer Render-Mode, only my Login-Pages don't since they need HttpContext.

mathewtaylor · 2026-09-19T08:54:28Z

mathewtaylor
Sep 19, 2026
Maintainer

Sorry this sat. I dug into both, and they are two different things — one is a missing script, the other is a real bug you found.

1. Not persisted — add the init script

Add this to <head>, before blazor.web.js, as a classic blocking script:

<script src="_content/BlazorBlueprint.Components/js/theme-init.js"></script>

It reads the stored theme and sets the class on <html> before the first paint. Without it the theme is only applied once the circuit is up, so a statically rendered page — your login pages — renders light, and a full navigation between an interactive page and a static one looks like the toggle reset itself. That is exactly the symptom you described, including the "clicking an href" part.

It must stay a classic script rather than a module, or it runs too late and you get a flash of light first. Every demo host in the repo does this in App.razor / index.html if you want a working reference.

2. `dark:` prefix — you were right, and it is worse than you thought

Tailwind v4 defaults dark: to @media (prefers-color-scheme: dark). The library switches dark mode by putting a .dark class on <html>. Those two never meet, so your dark:bg-none keys off the operating system rather than the toggle — which is why it looked like it applied always.

Add this to your own stylesheet:

@custom-variant dark (&:where(.dark, .dark *));

And the library has the same bug in its own CSS, which is what your report uncovered. Nine bb:dark: utilities across BbBadge, BbTextarea, BbBubble and BbTreeView compile into that same media query, so on a light OS they stay light no matter what the toggle says. Raised as #559, along with documenting the consumer-side rule in THEMING.md — it belongs next to the border-colour rule, because it is the same shape of trap.

Thank you for persisting with this. The second one would not have been found otherwise.

0 replies

Navigation Menu

Dark mode Issues - Dark-Mode not Persisted and Tailwind dark: prefix doesn't work #348

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Dark mode Issues - Dark-Mode not Persisted and Tailwind dark: prefix doesn't work #348

Uh oh!

baltermia Jun 8, 2026

Replies: 1 comment

Uh oh!

mathewtaylor Sep 19, 2026 Maintainer

1. Not persisted — add the init script

2. dark: prefix — you were right, and it is worse than you thought

baltermia
Jun 8, 2026

mathewtaylor
Sep 19, 2026
Maintainer

2. `dark:` prefix — you were right, and it is worse than you thought