darkMode

darkMode(): boolean

Defined in: aberdeen.ts:2175

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

import A from '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');