feat(theme): implement GitHub-aligned light mode with centralized col…#898
Open
hunnyboy1217 wants to merge 2 commits intoentrius:testfrom
Open
feat(theme): implement GitHub-aligned light mode with centralized col…#898hunnyboy1217 wants to merge 2 commits intoentrius:testfrom
hunnyboy1217 wants to merge 2 commits intoentrius:testfrom
Conversation
xiao-xiao-mao
Bot
added
feature
Author
|
Hi, @e35ventura , |
hunnyboy1217
force-pushed
the
feat/881-light-mode
branch
from
4ff965d to
fa8c9bc
Compare
|
Good job, Hope to see this in Gittensor platform. |
Contributor
|
Please resolve merge conflicts. |
Author
|
Hi, @ventura-oss , |
Collaborator
|
please resolve conflicts |
Author
|
Sorry for the late reply, @ventura-oss , @e35ventura , |
hunnyboy1217
force-pushed
the
feat/881-light-mode
branch
3 times, most recently
from
ff7d0c4 to
1202596
Compare
Replaces hardcoded colour values across the codebase with theme.palette references and adds a light/dark mode split aligned with GitHub's design system. Highlights: - Centralised colour tokens through theme.palette.* — every component now reads colours from the theme rather than from constants. - Light mode: GitHub-aligned canvas, surface, and text tokens; dedicated highlight palette for success/warning/error chip backgrounds. - Dark mode: preserved the existing palette while routing it through the same theme structure. - Theme toggle integrated into the sidebar footer with refined link layout. - Chart colour hooks (getPositiveColor, getChartSegmentColors) so charts pick the correct mode-aware tint without local conditionals. - modeActiveTabSx helper for active/hover styling shared across filter buttons and tab controls. - Component-level adaptations: MinerCard, LeaderboardSidebar, Sidebar, AppLayout, IssueHeaderCard, IssueSubmissionsTable, BountyCard, RepositoryPRsTable, RepositoryCheckTab, RepositoryContributorsTable, RepositoriesPage, RepositoryDetailsPage, WatchlistPage, TopRepositoriesTable, ContributionTrends, FilterButton, etc.
…ites
Three additions on top of the GitHub-aligned light mode commit:
1) src/utils/themeUtils.ts — extends the existing helper with structural
exports that centralise the 'theme.palette.mode === "dark" ? X : Y'
branching pattern repeated across 30+ callsites:
- isDarkMode(theme) / isLightMode(theme) — typed predicates
- themeAware<T>(theme, dark, light) — generic value picker
- mode<T>(theme, { dark, light }) — labelled object form
- darkOnly<T>(theme, value, fallback?) — overloaded conditional
- lightOnly<T>(theme, value, fallback?) — mirror of darkOnly
- tintedText / tintedSurface / modeBorder — palette-aware tints
- getNegativeColor / getWarningColor — palette-derived selectors
- darkOnlySx / lightOnlySx — sx-fragment spreads
2) src/utils/themeContrast.ts (new) — WCAG 2.x contrast utilities so the
light-mode rollout can verify text legibility on coloured surfaces:
- parseColor / relativeLuminance / contrastRatio
- WCAG_AA_NORMAL / WCAG_AA_LARGE / WCAG_AAA_NORMAL / WCAG_AAA_LARGE
- meetsContrast(fg, bg, level, size)
- readableForegroundFor(theme, bg)
- pickHighestContrast(bg, candidates)
- ensureReadable(theme, fg, bg, level, size)
3) src/hooks/useThemedSx.ts (new) — three hooks for memoising theme-derived
values so child components don't re-render on unrelated parent updates:
- useThemedSx(builder) — single sx
- useThemedSxBatch(builders) — array of sx
- useThemedValue(selector) — non-sx values
Refactored seven high-traffic callsites to consume the new helpers:
- MinerCard, LeaderboardSidebar, Sidebar (boxShadow / hover / nav state)
- AppLayout (drawer tint colour + mobile logo filter)
- GlobalSearchBar (search-field shadow)
- RankBadge (podium colour predicate)
- ContributionTrends (3 toggle-button mode branches → mode() calls)
All helpers preserve the caller's static type via generics and have JSDoc
describing intent + a usage example.
hunnyboy1217
force-pushed
the
feat/881-light-mode
branch
from
f62a5a8 to
b34c42d
Compare
Author
|
Hi, @ventura-oss , |
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
4 participants
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
brightness(0)CSS filter in light mode for solid black renderingtheme.tsas named exports (CHART_COLORS,INSIGHT_COLORS,WATCHLIST_COLORS,UI_COLORS, etc.)modeActiveTabSxutility insrc/utils/themeUtils.tsreplaces repeated dark/light active-tab ternary patterns across 5+ componentsgittensorChartTheme.tsRelated Issues
Closes #881
Type of Change
Screenshots
Recording.2026-04-30.081356.mp4
Checklist
npm run formatandnpm run lint:fixhave been runnpm run buildpasses