59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
|
|
||
|
|
export const applyColors = (colorName: string) => {
|
||
|
|
const styleStr = `
|
||
|
|
:root {
|
||
|
|
--c-primary: var(--c-${colorName}-primary);
|
||
|
|
--c-on-primary: var(--c-${colorName}-on-primary);
|
||
|
|
--c-primary-container: var(--c-${colorName}-primary-container);
|
||
|
|
--c-on-primary-container: var(--c-${colorName}-on-primary-container);
|
||
|
|
--c-background: var(--c-${colorName}-background);
|
||
|
|
--c-on-background: var(--c-${colorName}-on-background);
|
||
|
|
--c-surface: var(--c-${colorName}-surface);
|
||
|
|
--c-on-surface: var(--c-${colorName}-on-surface);
|
||
|
|
--c-outline: var(--c-${colorName}-outline);
|
||
|
|
--c-surface-variant: var(--c-${colorName}-surface-variant);
|
||
|
|
--c-on-surface-variant: var(--c-${colorName}-on-surface-variant);
|
||
|
|
--c-success: var(--c-${colorName}-success);
|
||
|
|
--c-on-success: var(--c-${colorName}-on-success);
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root {
|
||
|
|
--c-primary: var(--c-${colorName}-primary);
|
||
|
|
--c-on-primary: var(--c-${colorName}-on-primary);
|
||
|
|
--c-primary-container: var(--c-${colorName}-primary-container);
|
||
|
|
--c-on-primary-container: var(--c-${colorName}-on-primary-container);
|
||
|
|
--c-background: var(--c-${colorName}-background);
|
||
|
|
--c-on-background: var(--c-${colorName}-on-background);
|
||
|
|
--c-surface: var(--c-${colorName}-surface);
|
||
|
|
--c-on-surface: var(--c-${colorName}-on-surface);
|
||
|
|
--c-outline: var(--c-${colorName}-outline);
|
||
|
|
--c-surface-variant: var(--c-${colorName}-surface-variant);
|
||
|
|
--c-on-surface-variant: var(--c-${colorName}-on-surface-variant);
|
||
|
|
--c-success: var(--c-${colorName}-success);
|
||
|
|
--c-on-success: var(--c-${colorName}-on-success);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Check for a previous style element in the head
|
||
|
|
let styleEl = document.getElementById("color-scheme-style");
|
||
|
|
|
||
|
|
if (styleEl === null) {
|
||
|
|
styleEl = document.createElement("style");
|
||
|
|
styleEl.id = "color-scheme-style";
|
||
|
|
document.head.appendChild(styleEl);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply the new color
|
||
|
|
styleEl.innerHTML = styleStr;
|
||
|
|
|
||
|
|
// Save
|
||
|
|
localStorage.setItem("color-scheme", colorName);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Applies colors on load
|
||
|
|
(() => {
|
||
|
|
const savedColor = localStorage.getItem("color-scheme") ?? "blue";
|
||
|
|
applyColors(savedColor);
|
||
|
|
})();
|