feat: implement dark mode toggle with Tailwind CSS dark: classes#134
Open
arbitask-ai wants to merge 1 commit intosorosave-protocol:mainfrom
Open
feat: implement dark mode toggle with Tailwind CSS dark: classes#134arbitask-ai wants to merge 1 commit intosorosave-protocol:mainfrom
arbitask-ai wants to merge 1 commit intosorosave-protocol:mainfrom
Conversation
- Enable darkMode: 'class' in tailwind.config.js - Add DarkModeToggle component with localStorage persistence and system preference detection - Update Navbar to include toggle button and dark: classes - Update layout.tsx body with dark background - Update page.tsx sections and cards with dark: variants - Update GroupCard status badges and text with dark: variants Closes sorosave-protocol#31
Author
|
Hi! Just checking in on this dark mode implementation. Happy to make any adjustments based on your feedback. I've tested across Chromium, Firefox, and mobile viewports. |
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.
Summary
Implements a fully functional dark mode toggle for SoroSave frontend, addressing issue #31.
Changes
tailwind.config.js— EnableddarkMode: "class"strategyDarkModeToggle.tsx(new) — Toggle button component that:localStorageor systemprefers-color-schemelocalStoragedarkclass on<html>elementNavbar.tsx— AddedDarkModeToggleto the nav bar; addeddark:class variants for nav background, borders, linkslayout.tsx— Addeddark:bg-gray-950 dark:text-gray-100to<body>page.tsx— Addeddark:variants to all sections (hero, how-it-works, features, footer)GroupCard.tsx— Addeddark:variants to card background, text, and status badge colorsHow it works
prefers-color-scheme: darkand applies itlocalStoragedark:utility classesResolves #31
Submitted as part of the Algora bounty for #31