Found it. --sidebar-bg and --sidebar-fg are only declared inside .dark and [data-theme="dark"] -- there's no base value on :root (or on .sidebar itself). That's fine when your toggle adds the .dark class, because then one of those selectors matches. But when nobody has touched the toggle and the OS itself prefers dark, neither selector matches (you're not listening to prefers-color-scheme at all), so both custom properties are undefined -- the browser falls back to background: transparent and color: inherit (usually black), which is exactly the invisible sidebar text you're seeing. Fix: give both tokens a base value on :root, then layer your toggle and the OS preference as overrides of that base: :root { --sidebar-bg: #f5f5f5; --sidebar-fg: #1b1b1f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sidebar-bg: #1b1b1f; --sidebar-fg: #f5f5f5; color-scheme: dark; } } [data-theme="dark"] { --sidebar-bg: #1b1b1f; --sidebar-fg: #f5f5f5; color-scheme: dark; } .sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); } Now the sidebar is correct whether the user never touches your toggle (OS dark), explicitly turns your toggle on, or explicitly forces light -- all three states resolve to a real color instead of falling through to the browser default.