Skip to content

feat: add light/dark theme toggle with localStorage persistence#106

Closed
MkDev11 wants to merge 1 commit intoentrius:testfrom
MkDev11:feat/light-dark-theme-toggle
Closed

feat: add light/dark theme toggle with localStorage persistence#106
MkDev11 wants to merge 1 commit intoentrius:testfrom
MkDev11:feat/light-dark-theme-toggle

Conversation

@MkDev11
Copy link

@MkDev11 MkDev11 commented Mar 13, 2026

Summary

Adds a fully functional light/dark theme toggle to Gittensor UI with localStorage persistence. 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 and alpha() calls. A new ThemeContext provider manages theme state globally, and a toggle button is available in the sidebar.

Key changes:

  • ThemeContext — new React context + provider that wraps the app, exposes toggleTheme(), and persists the user's preference to localStorage
  • theme.ts — fully dual-mode MUI theme with custom palette extensions (surface, border, status, diff) for both light and dark modes
  • Layout — sidebar and app bar logos switch to solid black (brightness(0) CSS filter) in light mode
  • Dashboard — PRStatusChart, KpiCard, CommitTrendChart, ContributionHeatmap, LiveCommitLog, RepositoriesTable, TierPerformanceTable, GlobalActivity, TierRepoCard all updated
  • LeaderboardLeaderboardCharts, TopPRsTable, TopRepositoriesTable, TopMinersTable, MinerCard, LeaderboardSidebar, SectionCard, MinerSection ECharts options and table styles updated
  • PR detail views — PRFilesChanged split/unified diff views use opaque sticky line-number backgrounds, theme-aware borders/text; PRComments markdown body + timeline colors; PRDetailsCard, PRHeader updated
  • Repository pagesCodeViewer, ReadmeViewer, ContributingViewer, RepositoryCodeBrowser, FileExplorer, LanguageWeightsTable, RepositoryWeightsTable, RepositoryScoreCard, RepositoryPRsTable, RepositoryIssuesTable, RepositoryContributorsTable, RepositoryCheckTab updated
  • Other — HomePage, AboutPage, OnboardPage, IssuesPage, GettingStarted, Scoring, RoadmapContent, FAQ, BountyProgress, IssueHeaderCard, IssueSubmissionsTable, IssuesList, CredibilityChart, PerformanceRadar updated
  • Tests — new theme.test.ts validating palette structure for both modes

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Other (describe below)

Demo Video

https://www.dropbox.com/scl/fi/c90qlvgztmrtzlz2vbz4t/screen-capture.webm?rlkey=qvoaseatuf8pwvlk698he2ozh&st=1bxa2q3g&dl=0

Checklist

  • New components are modularized/separated where sensible
  • Uses predefined theme (e.g. no hardcoded colors)
  • Responsive/mobile checked
  • Tested against the test API
  • npm run format and npm run lint:fix have been run
  • npm run build passes
  • Screenshots included for any UI/visual changes

@MkDev11
Copy link
Author

MkDev11 commented Mar 13, 2026

@anderdc @LandynDev can you please review the PR and let me know your feedback?

@MkDev11 MkDev11 force-pushed the feat/light-dark-theme-toggle branch from 75b3e9e to ffa044c Compare March 13, 2026 22:18
- 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
@MkDev11 MkDev11 force-pushed the feat/light-dark-theme-toggle branch from ffa044c to 283f927 Compare March 13, 2026 22:30
@MkDev11
Copy link
Author

MkDev11 commented Mar 15, 2026

if you can see some of the cards are wrong color in the demo video, just ignore it. its already fixed
background and card are the same color

@anderdc
Copy link
Collaborator

anderdc commented Mar 16, 2026

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

@anderdc
Copy link
Collaborator

anderdc commented Mar 16, 2026

closing

@anderdc anderdc closed this Mar 16, 2026
@travellingsoldier85
Copy link

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. 👍

@MkDev11
Copy link
Author

MkDev11 commented Mar 16, 2026

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

@James-4u
Copy link

I also feel like this pr is good enough and @anderdc already said he likes it.
Having this pr closed would affect final scoring I guess and I believe it's not fair enough as we already do collestral scoring, right?
I believe you guys can keep it open and merge when you feel like you need this feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants