Problem
Inside a light page, a section themed with data-theme="dark" flips text/background/surface tokens correctly, but pre blocks become unreadable: the text color flips to near-white while the code background stays light.
Reproduced on v0.6.33 (slashed.optimal.css) in Chromium:
<html> <!-- OS in light mode -->
<section data-theme="dark">
<pre><code>@import "slashed.optimal.min.css";</code></pre>
</section>
</html>Computed styles on the pre:
background-color: oklch(0.94 0.006 250) ← still the light-mode code backgroundcolor: oklch(0.94 0.0225 260) ← correctly flipped to the dark-mode text colorcolor-scheme: dark ← the section scope is applied
Near-white on near-white → invisible code.
Expected
--sf-color-code-bg / --sf-color-code-block-bg (and any other code tokens) should resolve against the nearest data-theme scope like --sf-color-text and --sf-color-surface do, so pre/code stay readable in mixed-mode layouts — one of the framework's headline features.
Suspected cause
The code background tokens appear to be derived through a mechanism that only tracks the page-level scheme (e.g. a :root-resolved derivation or the --sf-is-dark flag not being re-scoped on nested [data-theme] elements), while --sf-color-text resolves per-scope via light-dark().
Workaround
Consumers can pin code blocks to theme-safe tokens inside the themed section:
[data-theme="dark"] pre {
background: var(--sf-color-surface);
color: var(--sf-color-text);
}(This is what the landing-page draft in PR #492 does for its forced-dark install band.)
Problem
Inside a light page, a section themed with
data-theme="dark"flips text/background/surface tokens correctly, butpreblocks become unreadable: the text color flips to near-white while the code background stays light.Reproduced on v0.6.33 (
slashed.optimal.css) in Chromium:Computed styles on the
pre:background-color: oklch(0.94 0.006 250)← still the light-mode code backgroundcolor: oklch(0.94 0.0225 260)← correctly flipped to the dark-mode text colorcolor-scheme: dark← the section scope is appliedNear-white on near-white → invisible code.
Expected
--sf-color-code-bg/--sf-color-code-block-bg(and any other code tokens) should resolve against the nearestdata-themescope like--sf-color-textand--sf-color-surfacedo, sopre/codestay readable in mixed-mode layouts — one of the framework's headline features.Suspected cause
The code background tokens appear to be derived through a mechanism that only tracks the page-level scheme (e.g. a
:root-resolved derivation or the--sf-is-darkflag not being re-scoped on nested[data-theme]elements), while--sf-color-textresolves per-scope vialight-dark().Workaround
Consumers can pin code blocks to theme-safe tokens inside the themed section:
(This is what the landing-page draft in PR #492 does for its forced-dark install band.)