Six Modes.
One Feeling.

A recreation of the dany.works theme switching system — built with CSS Houdini @property, body class toggling, and atmospheric overlays. Press the keyboard shortcuts or tap the logo letters.

Modes

Night

Default dark mode. Deep black background, muted grays. Press N.

Moonlight

Dark with a soft lunar glow, twinkling stars, ambient night sounds. Press M.

Day

Warm cream background, rich dark text. Clean and bright. Press D.

Sunny

Day mode plus golden sunlight and gently falling leaves. Press S.

Rainy

A grey-blue wash over the light palette. Raindrops cascade down. Fog rolls in. Press R.

Snowy

A soft winter white with gentle snowfall. Snowflakes drift and swirl in the cold air. Press W.

How It Works

Core Trick

CSS Houdini @property registers color variables as typed values, enabling the browser to interpolate between them. Without this, transition on custom properties does nothing.

Palette

Four tokens — --bg, --text, --mid, --line — define every mode's look. Changing body classes swaps the entire palette with a 400ms ease.

Overlays

Atmospheric effects live in fixed-position overlay divs. Moonlight uses CSS star/d glow. Sunny uses falling leaf shapes. Rain uses animated droplets + fog gradient. Snow uses drifting snowflakes with depth layers.

No State

Zero localStorage. Zero cookies. Theme resets every reload. Body classes are the entire state machine.