Dynamic Weather Themes
10 min read
Apply Theme to App
Task
Attach the calculated theme class to the app shell.
File / section
src/App.jsx
Change
Change the shell to <div className={app-shell theme-${theme}}>.
Why this change matters
The prepared CSS already contains .theme-clear, .theme-clouds, .theme-rain, .theme-storm, .theme-snow, and .theme-night rules.
Test it
Use browser devtools to inspect the app shell after a search and verify the theme class changes.
Checkpoint
The visual theme follows the weather response.
<div className={`app-shell theme-${theme}`}>
<WeatherBackground />
{/* ...the rest of the app... */}
</div>