Three component stylesheets carried `:where(.dark) &` rules to react
to the `<html>.dark` class. Angular's emulated CSS encapsulation
descends into `:where()` and rewrites its contents with the
`_ngcontent-XXX` scoping attribute — the produced selector then
demands that `<html>` (which carries `.dark`) also carry the scoping
attribute, which it doesn't, so the rules never matched.
Visible symptom: the main page background and a handful of inner
states (sidebar hover/focus/active, theme-switcher menu surface)
stayed light even when `.dark` was on `<html>` and every Tailwind
`dark:` utility in the templates was working correctly.
Fixes:
- `app.scss` and `sidebar.scss` switch to `:host-context(.dark)` for
their dark variants. The Angular template compiler recognises
`:host-context()` and expands it without forcing the ancestor to
carry the scoping attribute.
- `theme-switcher` switches to `ViewEncapsulation.None`. Its CDK menu
opens in an overlay portal outside the component's host, so even
`:host-context()` would miss it. The styles ship globally; the
BEM-style class names (`.theme-switcher__menu`, ...) are specific
enough to keep the rules contained.
Drive-by:
- Remove the right border on the header logo zone — the visible
vertical hairline above the sidebar was extra noise; the alignment
of widths already carries the visual relationship to the rail below.
Julien Gautier