Detect dark mode

Read the prefers-color-scheme media feature.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function isDarkMode() { return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false; }

Usage

// With the system appearance set to dark:
isDarkMode(); // → true

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• The preference can change while the page is open: listen for the change event on the MediaQueryList.
• For styling alone, the CSS media query or light-dark() needs no JavaScript.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Convert Celsius to Fahrenheit — Apply the temperature conversion without rounding the result.
• Convert hex to RGB — Expand #rgb if needed and read the red, green and blue channels.
• Convert URL parameters to object — Read a query string into an object; repeated keys become arrays.