Dark mode broken with shadow DOM - :root specifier is missing in dark.css

[iva2k]

Describe the bug

Dark mode is broken (e.g. when used in a shadow DOM framework, such as SvelteKit).

Inspecting the sources, light.css has :root specifier on 1st line, but dark.css does not have it.

To Reproduce

diff dist/themes/light.css dist/themes/dark.css | head -n 5

Demo

n/a

Screenshots

n/a

Browser / OS

n/a

Additional information

Inserting :root, as 1st line into dark.css fixes the problem.

[CetinSert]

For reference, links to the themes at the time of this issue:

• light.css
• dark.css

[claviska]

This is how themes are designed to work, not a bug. See this section of the docs:

Root-scoped styles

We default to the light theme as a convention in the light/dark themes we provide using :root. This makes it easier for users to get started, as they can include both the light and dark stylesheets and toggle dark mode using the sl-theme-dark class.

If we scoped tokens to :root in both stylesheets, you couldn't simply toggle a class. This is because the tokens would be competing for the :root scope so the last one included would always win. Instead, you'd have to remove the current stylesheet and add the new one.

Note that this convention isn't a requirement if you're building your own themes. You can scope custom light/dark themes to :root or even just to classes of your choice.

Host-scoped styles

For custom element authors, we do provide :host-scoped styles in both themes. If you include our theme styles inside your custom element's shadow root, you should see the appropriate tokens and styles.

If that's not what you're seeing, feel free to open a new issue with a repro so we can take a look.

[iva2k]

@claviska - thanks for the pointers. The code indeed was toggling light and dark theme stylesheets. After changing it to include both stylesheets as suggested, and toggling the class, dark theme works.