Add theme toggle implementation#72
Open
rahul-vyas-dev wants to merge 1 commit into
Open
Conversation
WalkthroughAdds a complete dark/light theme system with React Context state management and localStorage persistence. ThemeProvider initializes theme from storage, manages document data-theme attributes, and exposes toggleTheme. ThemeToggle component renders a sun/moon icon button in the navbar. Light mode CSS variables override global theme tokens. App wraps providers with ThemeProvider at the top level. ChangesDark/Light Theme Implementation
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant ThemeToggle
participant useTheme
participant ThemeProvider
participant localStorage
participant document
User->>Navbar: Load page
Navbar->>ThemeToggle: Render toggle button
ThemeToggle->>useTheme: Access theme state
useTheme->>ThemeProvider: Read context
ThemeProvider->>localStorage: Initialize theme (default: dark)
ThemeProvider->>document: Set data-theme attribute
User->>ThemeToggle: Click toggle button
ThemeToggle->>useTheme: Call toggleTheme()
useTheme->>ThemeProvider: Flip theme value
ThemeProvider->>document: Update data-theme attribute
ThemeProvider->>localStorage: Persist theme to storage
Note over document: CSS applies [data-theme="light"] styles
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
no-issue-linked
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Navbar.jsx (1)
23-30:⚠️ Potential issue | 🟠 Major | ⚡ Quick winMake the navbar background theme-aware instead of hardcoded dark.
Line 25 uses a fixed dark RGBA value, so the navbar does not visually switch with light theme. Use theme variables for this background.
Proposed fix
<nav style={{ position: 'sticky', top: 0, zIndex: 100, - background: 'rgba(13,13,13,.97)', + background: 'var(--surface)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--border)',🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Navbar.jsx` around lines 23 - 30, The nav inline style in Navbar.jsx currently hardcodes a dark RGBA background; change it to use a theme CSS variable instead (e.g., replace the 'background' property's hardcoded 'rgba(13,13,13,.97)' with a theme-aware CSS variable like --navbar-bg or --surface-translucent, with a sensible fallback) so the bar respects light/dark themes; update the nav style in the render of Navbar.jsx and ensure the chosen CSS variable is defined in the global/theme stylesheet.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/ThemeToggle.jsx`:
- Line 21: The title prop in ThemeToggle.jsx currently hardcodes the user-facing
string (`title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}`)
which must be externalized for i18n; replace this inline string with a lookup
from the localization resource (e.g., use a key like "theme.switchTo" and pass
the computed target theme as a variable), update the component to import/use the
i18n helper (e.g., t or useTranslation) and call it where the title is set
(referencing ThemeToggle and the theme variable), and add the corresponding key
with pluralization/variable placeholder to the locale files so translations can
render "Switch to {target} theme".
- Around line 8-24: The icon-only theme toggle button in ThemeToggle.jsx lacks
explicit accessibility semantics; update the button element used with the
toggleTheme handler to include type="button", an aria-label that reflects the
target action (e.g., "Switch to light theme" or "Switch to dark theme" based on
the theme prop/state), and aria-pressed set to true/false according to the
current theme (use the theme variable to compute the boolean) so assistive tech
can determine its name and state; ensure these attributes are added alongside
the existing props on the same button that renders the FiSun/FiMoon icons.
In `@src/context/ThemeContext.jsx`:
- Around line 6-8: The theme initializer in ThemeContext.jsx currently trusts
localStorage.getItem('oe_theme') directly; update the useState initializer (the
theme/setTheme logic) to read the persisted value, validate it against an
allowed whitelist ('dark' or 'light'), and return the persisted value only if it
matches, otherwise return the fallback 'dark' so invalid values never get
applied to data-theme or token overrides.
---
Outside diff comments:
In `@src/components/Navbar.jsx`:
- Around line 23-30: The nav inline style in Navbar.jsx currently hardcodes a
dark RGBA background; change it to use a theme CSS variable instead (e.g.,
replace the 'background' property's hardcoded 'rgba(13,13,13,.97)' with a
theme-aware CSS variable like --navbar-bg or --surface-translucent, with a
sensible fallback) so the bar respects light/dark themes; update the nav style
in the render of Navbar.jsx and ensure the chosen CSS variable is defined in the
global/theme stylesheet.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 14c8b4b6-b40a-43ee-957a-f026354ab01a
📒 Files selected for processing (5)
src/App.jsxsrc/components/Navbar.jsxsrc/components/ThemeToggle.jsxsrc/context/ThemeContext.jsxsrc/styles/global.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Screenshots/Recordings:
Before:
https://1drv.ms/v/c/49769719fd71e0ee/IQBw8_zmESfLR7LQ_HTb68K6AQr9aR_oNi1aMxGHwrPZHVo?e=1EPLVE
After:
https://1drv.ms/v/c/49769719fd71e0ee/IQCmGYAtcZfcSru74o9NKCqDAa_GeuzD70IXJyir9yShDng?e=yh5p89
Additional Notes:
This PR adds a theme toggle feature to improve the user experience by allowing users to switch between different themes dynamically across the application.
Checklist
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit