Configuration

Configuration

Customize Colors

Edit assets/world-config.js:

window.WorldCSSConfig = {
    phases: {
        night: {
            background: { hue: 240, saturation: 70, lightness: 15 },
            accent: { hue: 200, saturation: 80, lightness: 60 },
            text: '#ffffff'
        },
        day: {
            background: { hue: 60, saturation: 30, lightness: 95 },
            accent: { hue: 200, saturation: 80, lightness: 50 },
            text: '#000000'
        }
        // ... other phases
    }
};

CSS Variables Available

:root {
    --background-hue: 200;
    --background-saturation: 60;
    --background-lightness: 50;
    --accent-color: hsl(200, 80%, 60%);
    --text-color: #000000;
}

Phase Classes

Your HTML gets classes like:

• .worldcss-night
• .worldcss-day
• .worldcss-sunset
• etc.

Manual Control

// Switch modes
window.worldcss?.setMode('light');
window.worldcss?.setMode('dark');
window.worldcss?.setMode('auto');