true if the browser prefers dark mode, false if it prefers light mode.
import { darkMode, cssVars, $, mount } from 'aberdeen';
// Reactively set colors based on browser preference
$(() => {
cssVars.bg = darkMode() ? '#1a1a1a' : '#ffffff';
cssVars.fg = darkMode() ? '#e5e5e5' : '#000000';
});
$('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 $ and cssVars to implement theme switching: