Skip to content

feat(frontend): add dark mode support with ThemeToggle closes #29 - #47

Merged
dark-sarge merged 2 commits into
arflexx:mainfrom
pkakajoseph-png:feat/dark-mode-issue-29
Aug 11, 2026
Merged

feat(frontend): add dark mode support with ThemeToggle closes #29#47
dark-sarge merged 2 commits into
arflexx:mainfrom
pkakajoseph-png:feat/dark-mode-issue-29

Conversation

@pkakajoseph-png

@pkakajoseph-png pkakajoseph-png commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Pull Request — Dark Mode Support (Closes #29)

Summary

Adds full dark mode support to the AirFlex frontend using Tailwind CSS's class strategy and next-themes for theme management, persistence, and FOUC prevention.

Changes

New Files

File Purpose
frontend/app/layout.tsx Root layout — wraps entire app in ThemeProvider, sets <html suppressHydrationWarning>
frontend/app/globals.css Global CSS with @tailwind directives and color-scheme tokens
frontend/tailwind.config.ts Tailwind config with darkMode: "class"
frontend/postcss.config.js PostCSS config for Tailwind + Autoprefixer
frontend/next.config.ts Next.js config
frontend/tsconfig.json TypeScript config
frontend/package.json Project dependencies including next-themes@0.3.0
frontend/components/ThemeToggle.tsx Sun/moon toggle button component added to all navbars

Modified Files

File Changes
frontend/app/page.tsx Added dark: variants to all elements + ThemeToggle in navbar
frontend/app/error.tsx Added dark: variants throughout
frontend/app/loading.tsx Added dark: variants to skeleton bones and containers
frontend/app/not-found.tsx Added dark: variants throughout
frontend/app/auth/layout.tsx Added dark: variants + ThemeToggle in header
frontend/app/auth/signup/page.tsx Added dark: variants to form, inputs, labels, errors
frontend/app/auth/verify/page.tsx Added dark: variants to form, inputs, banners
frontend/app/sell/layout.tsx Added dark: variants + ThemeToggle in header
frontend/app/sell/page.tsx Added dark: variants to form, cards, badges, alerts
frontend/app/trades/[id]/layout.tsx Added dark: variants + ThemeToggle in header
frontend/app/trades/[id]/TradeDetailClient.tsx Added dark: variants to all UI states

How It Works

Theme Strategy

  • tailwind.config.ts uses darkMode: "class" — the dark class on <html> activates all dark: variants.
  • next-themes manages the class, persists the choice in localStorage, and injects an inline <script> before first paint to apply the correct theme synchronously — this prevents any flash of unstyled content (FOUC).

First Visit Behaviour

  • defaultTheme="system" + enableSystem means the OS prefers-color-scheme is respected on first visit with no stored preference.

ThemeToggle Component

  • Placed in the navbar of every layout (/, /sell, /trades/[id], /auth/*).
  • Renders a moon icon in light mode (action: switch to dark) and a sun icon in dark mode (action: switch to light).
  • aria-label describes the next action: "Switch to dark mode" / "Switch to light mode".
  • A mounted guard prevents SSR hydration mismatch — renders an invisible placeholder of the same size until the client resolves the theme.

Dark Colour Mapping

Light token Dark token
bg-white dark:bg-gray-800
bg-gray-50 dark:bg-gray-900
text-gray-900 dark:text-gray-100
text-gray-700 dark:text-gray-300
text-gray-500 dark:text-gray-400
border-gray-100 dark:border-gray-700
bg-violet-50 dark:bg-violet-900/20
text-violet-700 dark:text-violet-400
Red/green/amber alerts dark:bg-*/20 with lighter text

Acceptance Criteria Checklist

  • tailwind.config.ts uses darkMode: 'class'
  • ThemeToggle button added to every navbar — toggles dark class on <html>
  • User preference persisted in localStorage via next-themes
  • FOUC prevented — theme applied via inline script before first paint
  • First visit defaults to OS preference via prefers-color-scheme
  • All pages and components audited — dark: variants added for readable contrast
  • Toggle aria-label describes the current action ("Switch to dark mode" / "Switch to light mode")

Testing

  1. Open the app — theme should match your OS setting.
  2. Click the toggle in the navbar — theme switches immediately.
  3. Reload the page — persisted theme is applied with no flash.
  4. Change OS appearance preference — on first visit (no stored pref) the app follows it.
  5. Check all routes: /, /sell, /trades/[id], /auth/signup, /auth/verify, /not-found, error boundary.

Related

closes #29

@dark-sarge
dark-sarge merged commit 97cdc4c into arflexx:main Aug 11, 2026
1 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dark-sarge dark-sarge Awaiting requested review from dark-sarge dark-sarge is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[frontend] - Implement Dark Mode Support with Theme Toggle

2 participants

@pkakajoseph-png @dark-sarge