# Detect dark mode

Read the prefers-color-scheme media feature.

Canonical: https://1loc.dev/misc/detect-dark-mode/
Version: 1.0.0
Runtime: JavaScript · modern browsers (DOM)
Verification: Usage lines executed in headless Chromium against the fixture markup; no external services
Updated: 2026-10-28

## Implementation

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

## Usage

```javascript
// 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.

## 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 does not validate its arguments. Add checks where it receives untrusted input.

## Source and license

Original: https://github.com/phuocng/1loc/blob/14b481cf60dff1620ab1bb99a43b1f68068cdd9b/contents/detect-dark-mode.mdx
Author: Nguyen Huu Phuoc and original contributors
Contributors: See original repository history
Source commit: 14b481cf60dff1620ab1bb99a43b1f68068cdd9b
Copyright (c) 2020 phuoc-ng
License: MIT — https://1loc.dev/licenses/
Maintainer: Oveyon
Modifications: A function instead of a value read once at load. Executed in Chromium with dark mode emulated. Original MDX retained as inert source evidence.