Sep 14
Independent Dark Mode Color Customization & Auto-Sync
I’d like to request a feature enhancement: allowing users to customize color options specifically for Dark Mode, independent of the light mode palette.
The Use Case:
Currently, when dark mode is enabled, the site relies on a single fixed dark color palette. Many users prefer choosing their own dark aesthetics—such as an ultra-dark/OLED black theme, a softer slate/charcoal gray, or a navy tint—along with custom accent colors that pop better against dark backgrounds.
Implementation / Keeping CSS Lean:
To avoid adding CSS bloat or extra stylesheets, this can be handled easily using dynamic CSS variables attached to a data attribute (or dark class) on the root element.
Example implementation concept:
CSS
/* Base values / default light mode */
:root {
--bg-color: #ffffff;
--text-color: #111111;
--accent-color: #0066cc;
}
/* Default dark mode values */
[data-theme="dark"] {
--bg-color: var(--dark-user-bg, #121212);
--text-color: var(--dark-user-text, #e0e0e0);
--accent-color: var(--dark-user-accent, #38bdf8);
}
By binding the dark mode customizer settings directly to these --dark-user-* variables inline or via a single dynamic block in the header, dark mode stays completely lightweight while giving end users full control over their shade and accent preferences.
Would love to see this considered for a future update!
Thanks!
Pending