Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import { addons } from "@storybook/manager-api";
import {
GLOBALS_UPDATED,
UPDATE_GLOBALS,
SET_GLOBALS,
} from "@storybook/core-events";
import darkTheme from "./theme-dark.mjs";
import lightTheme from "./theme-light.mjs";
// Change favicon
const link = document.createElement("link");
link.setAttribute("rel", "shortcut icon");
link.setAttribute("href", "chrome://branding/content/document.ico");
document.head.appendChild(link);
const mql = window.matchMedia("(prefers-color-scheme: dark)");
const getToolbarTheme = () => {
// read ‘theme’ from globals in URL if present (initial load)
const g = new URLSearchParams(location.search).get("globals");
return g?.match(/(?:^|,)theme:([^,]+)/)?.[1] ?? null; // 'light' | 'dark' | 'system' | null
};
let selected = getToolbarTheme() || "system";
const pickTheme = () => {
if (selected === "dark") {
return darkTheme;
}
if (selected === "light") {
return lightTheme;
}
return mql.matches ? darkTheme : lightTheme;
};
const apply = () => addons.setConfig({ theme: pickTheme() });
apply();
// update when OS changes (only affects 'system')
const onOsChange = () => {
if (selected === "system") {
apply();
}
};
mql.addEventListener?.("change", onOsChange) || mql.addListener?.(onOsChange);
// update when toolbar changes (cover all events some builds emit)
const channel = addons.getChannel();
const onGlobals = ({ globals }) => {
if (!globals?.theme) {
return;
}
selected = globals.theme; // 'light' | 'dark' | 'system'
apply();
};
channel.on(SET_GLOBALS, onGlobals);
channel.on(UPDATE_GLOBALS, onGlobals);
channel.on(GLOBALS_UPDATED, onGlobals);