CodingNic

Dynamic Weather Themes

Apply Theme to App

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.

jsx
<div className={`app-shell theme-${theme}`}>
  <WeatherBackground />
  {/* ...the rest of the app... */}
</div>