37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import {
|
|
normalizeColorSchemePreference,
|
|
resolveColorScheme,
|
|
} from "../application/policies/color-scheme.js";
|
|
|
|
/**
|
|
* Applies the persisted public preference before React paints.
|
|
*
|
|
* @param {import("../application/ports/storage-port.js").StoragePort} storage
|
|
* @param {{
|
|
* documentElement?: HTMLElement,
|
|
* matchMedia?: (query: string) => MediaQueryList
|
|
* }} [browser]
|
|
*/
|
|
export function initializeColorScheme(storage, browser = {}) {
|
|
const documentElement = browser.documentElement ?? document.documentElement;
|
|
const matchMedia =
|
|
browser.matchMedia ??
|
|
(typeof window.matchMedia === "function"
|
|
? window.matchMedia.bind(window)
|
|
: () => /** @type {MediaQueryList} */ ({ matches: false }));
|
|
const stored = storage.read("COLOR_SCHEME");
|
|
const preference = normalizeColorSchemePreference(
|
|
stored.ok ? stored.value : undefined,
|
|
);
|
|
const resolved = resolveColorScheme(
|
|
preference,
|
|
matchMedia("(prefers-color-scheme: dark)").matches,
|
|
);
|
|
|
|
documentElement.dataset.theme = resolved;
|
|
documentElement.dataset.themePreference = preference;
|
|
documentElement.style.colorScheme = resolved;
|
|
|
|
return Object.freeze({ preference, resolved });
|
|
}
|