isDarkModePreferred

1/**
2 * Checks if the user's system prefers dark color scheme.
3 *
4 * @returns True if dark mode is preferred, false otherwise.
5 */
6export function isDarkModePreferred(): boolean {
7  if (typeof window === 'undefined' || !window.matchMedia) return false;
8  return window.matchMedia('(prefers-color-scheme: dark)').matches;
9}

1const originalMatchMedia = window.matchMedia;
2
3afterEach(() => {
4  window.matchMedia = originalMatchMedia;
5});
6
7test('returns true when prefers-color-scheme is dark', () => {
8  window.matchMedia = jest.fn().mockImplementation(query => ({
9    matches: query === '(prefers-color-scheme: dark)',
10    media: query,
11    onchange: null,
12    addEventListener: jest.fn(),
13    removeEventListener: jest.fn(),
14    dispatchEvent: jest.fn(),
15  }));
16  expect(isDarkModePreferred()).toBe(true);
17});
18
19test('returns false when prefers-color-scheme is light', () => {
20  window.matchMedia = jest.fn().mockImplementation(query => ({
21    matches: false,
22    media: query,
23    onchange: null,
24    addEventListener: jest.fn(),
25    removeEventListener: jest.fn(),
26    dispatchEvent: jest.fn(),
27  }));
28  expect(isDarkModePreferred()).toBe(false);
29});
30
31test('returns false in non-browser environment', () => {
32  const original = globalThis.window;
33  // @ts-expect-error
34  delete globalThis.window;
35  expect(isDarkModePreferred()).toBe(false);
36  globalThis.window = original;
37});