CodingNic

Dynamic Weather Themes

Handle Day and Night Conditions

Dynamic Weather Themes 10 min read

Handle Day and Night Conditions

Task

Use the API icon suffix to distinguish daytime and nighttime clear weather.

File / section

src/App.jsx and src/utils/weather.js

Change

Keep weather.weather[0].icon?.endsWith("n") as the night check. In themeForWeather, return "night" when id === 800 && night; otherwise clear weather returns "clear".

Why this change matters

OpenWeather icon codes include day/night variants. The project uses that signal for the night theme and moon icon.

Test it

Test a nighttime clear response or temporarily log the icon code to verify the branch.

Checkpoint

Clear night conditions can activate the night theme instead of the daytime clear theme.