Returns whether the user's browser prefers a dark color scheme.
This function is reactive - scopes that call it will re-execute when the
browser's color scheme preference changes (via the prefers-color-scheme media query).
Use this in combination with A and cssVars to implement theme switching:
Returns boolean
true if the browser prefers dark mode, false if it prefers light mode.
Example
importAfrom'aberdeen';
// Reactively set colors based on browser preference A(() => { A.cssVars.bg = A.darkMode() ? '#1a1a1a' : '#ffffff'; A.cssVars.fg = A.darkMode() ? '#e5e5e5' : '#000000'; });
A('div bg:$bg fg:$fg p:1rem #Colors change based on system dark mode preference');
Returns whether the user's browser prefers a dark color scheme.
This function is reactive - scopes that call it will re-execute when the browser's color scheme preference changes (via the
prefers-color-schememedia query).Use this in combination with A and cssVars to implement theme switching: