export 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
    const 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);
})();