Skip to content
NutsNews chestnut logoNutsNews Wiki

Technical guide · Public product

Page status: Active

NutsNews Web Modern Theme UI Update

This update refreshes the NutsNews home page with a more modern, elegant visual system while preserving the existing Nuts [icon] News brand treatment and the amber default identit…

Visual overview

Primary diagram

System map

This update refreshes the NutsNews home page with a more modern, elegant visual system while preserving the existing Nuts [icon] News brand treatment and the amber default identit…

Render the repository-owned system map when you need it.

Diagram is not rendered yet.

View as text
NutsNews Web Modern Theme UI Update

This update refreshes the NutsNews home page with a more modern, elegant visual system while preserving the existing Nuts [icon] News brand treatment and the amber default identit…

flowchart TD
  accTitle: NutsNews Web Modern Theme UI Update
  accDescr {
    This update refreshes the NutsNews home page with a more modern, elegant visual system while preserving the existing Nuts [icon] News brand treatment and the amber default identit…
  }
  A[User selects theme in ThemeSwitcher] --> B[Persist `nutsnews.web.theme` in localStorage]
  B --> C[Global CSS variables update]
  C --> D[Home hero/cards/controls consume new tokens]
  D --> E[Rendered page follows selected theme]
  C --> F[Reduced-motion and animation fallbacks apply]

NutsNews Web Modern Theme UI Update

Fullscreen diagram view.

NutsNews Web Modern Theme UI Update

Section titled “NutsNews Web Modern Theme UI Update”

This update refreshes the NutsNews home page with a more modern, elegant visual system while preserving the existing Nuts [icon] News brand treatment and the amber default identity.

What changed

Section titled “What changed”
  • Rebuilt the home hero banner with glassy surfaces, ambient glow, animated shine, soft rings, and modern stat chips.
  • Added a site-wide floating gear button for reader theme settings.
  • Added four selectable web themes:
    • Amber — the current NutsNews amber identity.
    • The Modern SaaS — charcoal, graphite, off-white, and electric blue.
    • The Creative Premium — midnight navy, deep slate, muted silver, and neon purple.
    • The Moody Cyberpunk — deep green-gray, oiled slate, soft gray, and cyber yellow.
  • Persisted the selected theme in localStorage using nutsnews.web.theme.
  • Converted the home page, story cards, CTA button, loading state, empty state, and footer to CSS custom properties so they react to the selected theme.
  • Added animated ambient background orbs, a subtle grid, card glow, hover lift, image zoom, button glow, and reduced-motion fallbacks.

Files changed

Section titled “Files changed”
  • web/app/layout.tsx
  • web/app/page.tsx
  • web/app/globals.css
  • web/app/components/ArticleFeed.tsx
  • web/app/components/SiteFooter.tsx
  • web/app/components/ThemeSwitcher.tsx

Validation

Section titled “Validation”

Validated with:

Terminal window
cd web
npm run lint
npx tsc --noEmit

npm run build could not complete inside the sandbox because next/font/google could not fetch the Geist font files from Google Fonts in the offline environment. The failure was network/font-fetch related, not a TypeScript or lint failure.