49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
export type ChromeColorScheme = "light" | "dark";
|
|
|
|
export const CHROME_COLORS: Record<
|
|
ChromeColorScheme,
|
|
{ base: string; dimmed: string }
|
|
> = {
|
|
light: { base: "#ffffff", dimmed: "#999999" },
|
|
dark: { base: "#242424", dimmed: "#161616" },
|
|
};
|
|
|
|
// theme-color meta ownership: while a drawer holds a dimmed color, base
|
|
// writes (from scheme/theme changes) must not overwrite it.
|
|
let dimmedDepth = 0;
|
|
|
|
export function setBaseThemeColor(color: string): void {
|
|
if (dimmedDepth === 0) setThemeColorMeta(color);
|
|
}
|
|
|
|
export function pushDimmedThemeColor(color: string): void {
|
|
dimmedDepth++;
|
|
setThemeColorMeta(color);
|
|
}
|
|
|
|
export function popDimmedThemeColor(base: string): void {
|
|
dimmedDepth = Math.max(0, dimmedDepth - 1);
|
|
if (dimmedDepth === 0) setThemeColorMeta(base);
|
|
}
|
|
|
|
export function setThemeColorMeta(color: string): void {
|
|
if (typeof document === "undefined") return;
|
|
|
|
const metas = document.querySelectorAll<HTMLMetaElement>(
|
|
'meta[name="theme-color"]'
|
|
);
|
|
|
|
if (metas.length === 0) {
|
|
const meta = document.createElement("meta");
|
|
meta.name = "theme-color";
|
|
meta.content = color;
|
|
document.head.appendChild(meta);
|
|
return;
|
|
}
|
|
|
|
metas.forEach((meta) => {
|
|
meta.removeAttribute("media");
|
|
meta.setAttribute("content", color);
|
|
});
|
|
}
|