Skip to content

feat: add dark/light theme toggle with mobile support#409

Open
chethanamp22-tech wants to merge 1 commit into
lovelymahor:mainfrom
chethanamp22-tech:main
Open

feat: add dark/light theme toggle with mobile support#409
chethanamp22-tech wants to merge 1 commit into
lovelymahor:mainfrom
chethanamp22-tech:main

Conversation

@chethanamp22-tech

Copy link
Copy Markdown

### Closes: #385

Summary

Adds a dark/light theme toggle to the navbar so users can switch themes based on their preference in mobile.

Changes Made

  • ThemeProvider.js — Context provider that manages theme state, persists to localStorage, and respects system prefers-color-scheme on first visit
  • Navbar.js — Added toggle button (🌙/☀️) visible in navbar on both desktop and mobile
  • Navbar.css — Dark mode styles via html[data-theme="dark"] selectors, toggle visible in top bar on mobile
  • index.css — CSS variables (--bg, --text, --card, --border, etc.) for both light and dark themes

Checklist

  • Toggle visible in navbar on desktop
  • Toggle visible in navbar on mobile
  • All pages update on switch
  • Preference saved across reloads via localStorage
  • Respects system prefers-color-scheme on first visit

Screenshots

Before:

image

After:

image

@vercel

vercel Bot commented Jun 3, 2026

Copy link
Copy Markdown

@chethanamp22-tech is attempting to deploy a commit to the Lovely Mahour's projects Team on Vercel.

A member of the Team first needs to authorize it.

@Stewartsson

Copy link
Copy Markdown

@lovelymahor I am a GSSoC contributor and i wish to work in this issue and complete it

@chethanamp22-tech

Copy link
Copy Markdown
Author

@lovelymahor I am a GSSoC contributor and i wish to work in this issue and complete it

I have completed this you can search for another issue,thanks!

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.

2 participants