fix: Add missing CSS rules for dark mode theme - #47
Merged
udaycodespace merged 2 commits intoAug 6, 2026
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces the missing dark-mode styling needed for the existing NavBar toggle (which adds/removes dark-mode on document.body) to produce an actual visual theme change across the app.
Changes:
- Adds global
body.dark-modeCSS variable overrides and new theme variables/classes inApp.css(navbar/admin tabs/teacher cards/footer). - Adds component-level
body.dark-modeoverrides in several feature stylesheets (admin Activity Logs / Payments, Reviews, Bookmarks), including fixes for native<select><option>popup readability. - Updates Admin/Teacher components to use theme-aware classnames instead of hardcoded inline colors.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/App.css | Adds global dark-mode variable overrides and shared theme classes (navbar/admin tabs/teacher cards/footer tweaks). |
| frontend/src/components/common/NavBar.jsx | Implements the dark-mode toggle behavior and navbar styling hooks. |
| frontend/src/components/admin/AdminHome.jsx | Replaces hardcoded admin tab styling with theme-aware classes. |
| frontend/src/components/user/teacher/TeacherHome.jsx | Applies new theme-aware classes to course cards and enrolled text. |
| frontend/src/components/admin/PaymentRecords.css | Adds dark-mode variable overrides and fixes for controls/status colors in dark mode. |
| frontend/src/components/admin/ActivityLogs.css | Adds dark-mode variable overrides and fixes for controls/table/badges in dark mode. |
| frontend/src/components/reviews/CourseReviews.css | Adds dark-mode variable overrides and dark-mode control/background styling for reviews UI. |
| frontend/src/components/bookmarks/Bookmarks.css | Adds dark-mode variable overrides and button/empty/error state styling for bookmarks UI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+375
to
+386
| body.dark-mode .review-form-card textarea, | ||
| body.dark-mode .review-form-actions button, | ||
| body.dark-mode .review-owner-actions button, | ||
| body.dark-mode .review-pagination button, | ||
| body.dark-mode .reviews-toolbar select { | ||
| background: #2a2a2a; | ||
| color: var(--review-ink); | ||
| } | ||
|
|
||
| body.dark-mode .review-form-actions button:last-child { | ||
| color: #1a1a1a; | ||
| } |
Comment on lines
+1288
to
+1292
| .premium-navbar { | ||
| backdrop-filter: blur(12px) saturate(1.2); | ||
| background: var(--navbar-bg); | ||
| border-radius: 0 0 18px 18px; | ||
| border-bottom: 1px solid var(--navbar-border); |
Comment on lines
+1296
to
+1300
| .settings-btn { | ||
| background: var(--surface-dark); | ||
| color: #fff; | ||
| } | ||
|
|
Owner
|
@sujalv28 Nice work on this PR! The Copilot suggestions look worthwhile please address them, and I'll take another look. |
udaycodespace
added
ECSoC26
udaycodespace
self-requested a review
August 6, 2026 02:08
Contributor
Author
|
Okk sure @udaycodespace I'll check them |
Contributor
Author
|
Hello @udaycodespace, I have made the changes requested. You can review them and merge if it solve the issue. |
Owner
LGTM! |
udaycodespace
added
good-issue
ecsoc-sentinel
Bot
added
the
ECSoC26-L2
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
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.
Summary
This PR fixes the issue #27 [Dark Mode Toggle Does Nothing] where the dark mode toggle in the NavBar had no visual effect. While the toggle correctly applied the .dark-mode class to document.body, the corresponding CSS styles were completely missing from the project.
I have added a comprehensive set of .dark-mode CSS variables/rules to the global stylesheet so the application correctly switches to a dark theme when the class is active.
Related Issue
Issue #27 [Dark Mode Does Nothing]
Closes #27 [Dark Mode Does Nothing]
What changed?
Root theming:
Component-local dark-mode blocks (each had its own CSS variable scope, disconnected from the global toggle):
Fixed-background-paired-with-theme-variable-text bugs (same failure pattern, found in three places):
Native 'select' dropdown popups (5 instances):
Components entirely outside the theme system:
Files touched: App.css, NavBar.jsx, PaymentRecords.css, ActivityLogs.css, CourseReviews.css, Bookmarks.css, AdminHome.jsx, TeacherHome.jsx.
Type
Areas touched
Testing
Test steps
Screenshots
Before
After
Edge cases checked
Checklist
CONTRIBUTING.md