Skip to content

feat: add light/dark theme toggle with system-preference default#56

Merged
favasconcelos merged 7 commits into
mainfrom
feature/light-theme-toggle
Jul 18, 2026
Merged

feat: add light/dark theme toggle with system-preference default#56
favasconcelos merged 7 commits into
mainfrom
feature/light-theme-toggle

Conversation

@favasconcelos

Copy link
Copy Markdown
Owner

Summary

  • Adds a light theme to the site alongside the existing dark theme.
  • Adds a fixed top-right light/dark toggle.
  • Defaults to the user’s system preference (prefers-color-scheme) and persists an explicit choice in localStorage.
  • Updates CSS tokens to use Tailwind CSS v4 @theme inline with a custom data-theme dark variant.
  • Adjusts the hero image/overlay for light mode.

Changes

  • src/hooks/use-theme.ts — theme state, system-preference fallback, localStorage persistence.
  • src/components/theme-toggle.tsx — accessible toggle button.
  • src/index.css — light/dark token sets.
  • index.html — inline theme initializer to prevent FOUC.
  • src/app.tsx — integrates the toggle.
  • src/components/hero.tsx — light-mode image opacity and overlay.

Validation

  • npm run check passes.
  • npm run build passes.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 18, 2026

Copy link
Copy Markdown

Deploying portifolio with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1962c8f
Status: ✅  Deploy successful!
Preview URL: https://d6a1b0cd.portifolio-1p0.pages.dev
Branch Preview URL: https://feature-light-theme-toggle.portifolio-1p0.pages.dev

View logs

@favasconcelos
favasconcelos merged commit 985add7 into main Jul 18, 2026
2 checks passed
@favasconcelos
favasconcelos deleted the feature/light-theme-toggle branch July 18, 2026 13:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant