CodingNic

Dynamic Weather Themes

Activate Rain, Snow, Storm & Star Effects

Dynamic Weather Themes 10 min read

Activate Rain, Snow, Storm & Star Effects

Task

Let the prepared background layers respond to the selected theme.

File / section

src/components/WeatherBackground.jsx and src/styles.css

Change

Keep the background markup with .stars, .rain-layer, and .snow-layer. The CSS already activates them with .theme-night .stars, .theme-rain .rain-layer, .theme-snow .snow-layer, and a subtle storm star layer. Do not rewrite the prepared visual system.

Why this change matters

The visual work is already supplied; the lesson connects application state to the CSS selectors rather than teaching CSS from scratch.

Test it

Inspect the page under rain, snow, storm, and night themes. Look for falling layers or stars while the base theme changes.

Checkpoint

WeatherNow now has dynamic background effects without adding new UI markup.