feat: dark mode (WIP - DO NOT MERGE)#311
Draft
smmariquit wants to merge 8 commits into
Draft
Conversation
- installed next-themes and added Providers - added floating ThemeToggle button - configured globals.css with automatic override classes for instant dark mode support across the app without manual refactoring
- Removed hacky global CSS overrides that were causing white-on-white text issues - Moved ThemeToggle from a floating button into StudentNavBar and admin PageHeader - Properly added dark mode Tailwind variants to NotAssignedDashboard cards
- Changed global *:focus-visible to a 2px orange ring with a 3px offset, removing laggy transitions - Added rounded-full and padding to navbar icons so focus outlines wrap perfectly instead of forming clunky boxes - Added rounded-md to nav links for tighter focus boundaries
…navbars - Added targeted CSS attribute selectors for bg-white, bg-[#EDE9DE], text-black, borders, inputs - Added dark: variants to AssignedDashboard and NotAssignedDashboard - Added ThemeToggle to landing page navbar and manager layout navbar - Added CSS custom properties for surface/raised colors
Replaced broken CSS attribute selectors with --color-* variable overrides in .dark scope. This is the correct approach for Tailwind v4 since utility classes like bg-white reference --color-white internally.
- All 23 instances of hardcoded cream background now use the CSS variable which flips in dark mode automatically - Added dark text variants to landing page and testimonials section - This ensures page-level backgrounds properly switch
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Dark mode implementation using
next-themes+ Tailwind v4 color variable overrides.What was attempted:
next-themeswithThemeProviderand@custom-variant darkfor Tailwind v4ThemeTogglecomponent in navbars (Student, Manager, Admin, Landing)--color-*variables in.darkscopebg-[#EDE9DE]withbg-[var(--cream)]globallyWhat's broken:
style={{}}and arbitrary Tailwind values that don't flipParking this for now. Do not merge.