const applyColors = (colorName) => { 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); })();