feat: add light/dark theme toggle with localStorage persistence#106
feat: add light/dark theme toggle with localStorage persistence#106MkDev11 wants to merge 1 commit intoentrius:testfrom
Conversation
|
@anderdc @LandynDev can you please review the PR and let me know your feedback? |
75b3e9e to
ffa044c
Compare
- Add ThemeProvider with light/dark mode toggle and localStorage persistence - Replace all hardcoded dark-mode colors with theme-aware tokens across 53 files - Use useTheme() hook and theme.palette tokens for dynamic theming - Convert static style objects to theme-aware functions where needed - Add conditional isDark logic for backgrounds, borders, gradients - Preserve semantic STATUS_COLORS, CHART_COLORS, TIER_COLORS constants - Keep intentionally dark-styled components (PRFilesChanged, PRComments) - Components updated: pages, dashboard, leaderboard, PR, repository, issues, miners, onboard, FAQ, layout - Build passes with zero TypeScript errors
ffa044c to
283f927
Compare
|
if you can see some of the cards are wrong color in the demo video, just ignore it. its already fixed |
|
howdy MK, although I like the quality of the PR, we're simply not looking for light/dark theme, our current theme suits us well and we prefer having it how it is now. Please feel free to make other PRs or perhaps start an issue thread/discussion if you're unclear on if something will work out |
|
closing |
|
Great work on this PR @MkDev11! The implementation looks solid — localStorage persistence for theme preference is the right approach, and updating 200+ hardcoded colors is no small effort. Even though the maintainers aren't prioritizing this right now, the quality here speaks for itself. Would love to see this revisited in a future release. 👍 |
Thanks for your feedback @travellingsoldier85 |
|
I also feel like this pr is good enough and @anderdc already said he likes it. |
Summary
Adds a fully functional light/dark theme toggle to Gittensor UI with
localStoragepersistence. The entire application — including all charts, tables, diff viewers, code browsers, and layout components — has been updated to be theme-aware, replacing ~200+ hardcoded dark-mode colors with conditional palette tokens andalpha()calls. A newThemeContextprovider manages theme state globally, and a toggle button is available in the sidebar.Key changes:
ThemeContext— new React context + provider that wraps the app, exposestoggleTheme(), and persists the user's preference tolocalStoragetheme.ts— fully dual-mode MUI theme with custom palette extensions (surface,border,status,diff) for both light and dark modesbrightness(0)CSS filter) in light modeKpiCard,CommitTrendChart,ContributionHeatmap,LiveCommitLog,RepositoriesTable,TierPerformanceTable,GlobalActivity,TierRepoCardall updatedLeaderboardCharts,TopPRsTable,TopRepositoriesTable,TopMinersTable, MinerCard,LeaderboardSidebar,SectionCard,MinerSectionECharts options and table styles updatedPRDetailsCard,PRHeaderupdatedCodeViewer,ReadmeViewer,ContributingViewer,RepositoryCodeBrowser,FileExplorer, LanguageWeightsTable,RepositoryWeightsTable,RepositoryScoreCard, RepositoryPRsTable, RepositoryIssuesTable,RepositoryContributorsTable,RepositoryCheckTabupdatedAboutPage,OnboardPage,IssuesPage,GettingStarted,Scoring,RoadmapContent,FAQ,BountyProgress,IssueHeaderCard,IssueSubmissionsTable,IssuesList,CredibilityChart,PerformanceRadarupdatedtheme.test.tsvalidating palette structure for both modesType of Change
Demo Video
https://www.dropbox.com/scl/fi/c90qlvgztmrtzlz2vbz4t/screen-capture.webm?rlkey=qvoaseatuf8pwvlk698he2ozh&st=1bxa2q3g&dl=0
Checklist
npm run formatandnpm run lint:fixhave been runnpm run buildpasses