feat(theme): implement GitHub-aligned light mode with centralized col… by hunnyboy1217 · Pull Request #898 · entrius/gittensor-ui

hunnyboy1217 · 2026-04-30T16:17:49Z

Summary

Full light mode implementation across 74 files, tuned to match GitHub Primer color tokens exactly
Theme toggle relocated to top-right header (icon-only, next to search bar)
Logo uses brightness(0) CSS filter in light mode for solid black rendering
All hardcoded hex values removed from components — colors now live exclusively in theme.ts as named exports (CHART_COLORS, INSIGHT_COLORS, WATCHLIST_COLORS, UI_COLORS, etc.)
New modeActiveTabSx utility in src/utils/themeUtils.ts replaces repeated dark/light active-tab ternary patterns across 5+ components
Duplicate ECharts tooltip functions merged into a shared base in gittensorChartTheme.ts

Related Issues

Closes #881

Type of Change

New feature
Refactor

Screenshots

Recording.2026-04-30.081356.mp4

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

hunnyboy1217 · 2026-05-01T05:36:54Z

Hi, @e35ventura ,
Could you please review my PR?

ericwong0256-a11y · 2026-05-03T21:22:37Z

Good job, Hope to see this in Gittensor platform.

ventura-oss · 2026-05-08T14:49:20Z

Please resolve merge conflicts.

hunnyboy1217 · 2026-05-08T18:17:39Z

Hi, @ventura-oss ,
I resolved conflicts again.
Could you please review my PR?

e35ventura · 2026-05-08T22:28:52Z

please resolve conflicts

hunnyboy1217 · 2026-05-09T11:10:01Z

Sorry for the late reply, @ventura-oss , @e35ventura ,
Could you please review my PR?
I am ready for review.
Thanks.

hunnyboy1217 · 2026-05-10T02:06:23Z

Hi, @ventura-oss ,
I am ready for review.
Could you please review my PR?

e35ventura · 2026-05-10T18:15:10Z

failing CI checks, please fix

ventura-oss · 2026-05-10T18:17:23Z

⚠️ Skipped during review — No CI checks have run on this PR. CI requires maintainer approval for first-time contributors and won't auto-run regardless of new pushes. A maintainer will approve the workflow run when ready to review.

ventura-oss · 2026-05-10T18:25:37Z

⚠️ Skipped during review — CI is failing (Format Code check failed). Please run npm run format and npm run lint:fix locally, then push the fixes.

ventura-oss · 2026-05-10T19:23:00Z

⚠️ Changes requested — The sidebars on the Leaderboard, Watchlist, and Bounties pages have readability issues in light mode. Some text is not visible / hard to read against the sidebar background. Please fix the contrast on these sidebar panels before this can be merged.

hunnyboy1217 · 2026-05-10T19:31:19Z

⚠️ Changes requested — The sidebars on the Leaderboard, Watchlist, and Bounties pages have readability issues in light mode. Some text is not visible / hard to read against the sidebar background. Please fix the contrast on these sidebar panels before this can be merged.

Hi, @e35ventura ,
I just fixed this issue.
Could you please review again?
Thanks.

hunnyboy1217 · 2026-05-12T17:07:35Z

Hi, @anderdc ,
Could you please review my PR?

ventura-oss · 2026-05-13T00:43:40Z

Holding off on merge — this branch's base predates two fixes that have landed on test and touches the same files, so a merge in the current state would revert them:

fix(dashboard): use mirror data for issues trend #1001 (fix(dashboard): use mirror data for issues trend) — this PR's src/api/MinerApi.ts and src/pages/dashboard/*.ts undo the since parameter, getMirrorSinceParam helper, and resolved-issue filtering.
fix(ui): repository watchlist action on miner details Repositories table #1011 (fix(ui): repository watchlist action on miner details Repositories table) — this PR's src/components/miners/MinerRepositoriesTable.tsx removes the WatchlistButton column that fix(ui): repository watchlist action on miner details Repositories table #1011 added.

GitHub reports the PR as MERGEABLE because the text conflicts auto-resolve, but the resolution drops the recent fixes silently. Please rebase onto current origin/test and we'll take another look.

Two smaller code notes for the rebase pass:

src/utils/echarts/gittensorChartTheme.ts:16,19 introduce raw hex literals ('#ffffff', '#d0d7de') for the light-mode tooltip chrome — these should route through theme.palette.background.paper and theme.palette.divider to satisfy the no-hardcoded-color rule the rest of the PR is so careful about.
The home hero's development. accent uses theme.palette.status.merged, which is green in dark mode and GitHub's done.fg purple (#8250df) in light. That flips the brand-green accent on the landing page to purple in light mode — worth confirming that's the intended design call vs. reusing a different token there.

e35ventura

you are missing details on outline of cards on pull request tab on watchlist

hunnyboy1217 · 2026-05-13T02:35:45Z

you are missing details on outline of cards on pull request tab on watchlist

Ok. I'll fix it asap.

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 · 2026-05-13T03:00:42Z

Hi, @e35ventura ,
Thanks for your review and time.
I just fixed and resolved the conflicts.

ventura-oss · 2026-05-13T22:46:55Z

Auto-skipping this review pass: no CI checks have run on this branch, which usually means workflows are awaiting maintainer approval for a contributor whose GH Actions haven't been authorized yet. Once a maintainer approves and build + format checks come back green, this PR will be eligible for visual review again.

xiao-xiao-mao Bot added feature Net-new functionality refactor Code restructuring without behavior change labels Apr 30, 2026

hunnyboy1217 force-pushed the feat/881-light-mode branch from 4ff965d to fa8c9bc Compare May 3, 2026 08:11

hunnyboy1217 force-pushed the feat/881-light-mode branch 4 times, most recently from f62a5a8 to b34c42d Compare May 9, 2026 20:57

hunnyboy1217 force-pushed the feat/881-light-mode branch from b34c42d to 970c0ba Compare May 10, 2026 18:19

hunnyboy1217 force-pushed the feat/881-light-mode branch from 970c0ba to d051f3f Compare May 10, 2026 18:30

hunnyboy1217 force-pushed the feat/881-light-mode branch from d051f3f to 751c07e Compare May 10, 2026 19:30

hunnyboy1217 force-pushed the feat/881-light-mode branch 3 times, most recently from 809a599 to bfbf325 Compare May 12, 2026 14:23

e35ventura requested changes May 13, 2026

View reviewed changes

hunnyboy1217 force-pushed the feat/881-light-mode branch from bfbf325 to 2acad7d Compare May 13, 2026 02:41

ventura-oss mentioned this pull request May 13, 2026

enhance(onboard): simplify Overview, extract shared OnboardingCard, use theme tokens #1069

Open

6 tasks

hunnyboy1217 force-pushed the feat/881-light-mode branch 2 times, most recently from 7d4f8bf to f013303 Compare May 13, 2026 02:53

hunnyboy1217 added 2 commits May 12, 2026 21:56

hunnyboy1217 force-pushed the feat/881-light-mode branch from f013303 to a4002ef Compare May 13, 2026 02:56

hunnyboy1217 requested a review from e35ventura May 13, 2026 03:07

Conversation

hunnyboy1217 commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issues

Type of Change

Screenshots

Checklist

Uh oh!

hunnyboy1217 commented May 1, 2026

Uh oh!

ericwong0256-a11y commented May 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ventura-oss commented May 8, 2026

Uh oh!

hunnyboy1217 commented May 8, 2026

Uh oh!

e35ventura commented May 8, 2026

Uh oh!

hunnyboy1217 commented May 9, 2026

Uh oh!

hunnyboy1217 commented May 10, 2026

Uh oh!

e35ventura commented May 10, 2026

Uh oh!

ventura-oss commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ventura-oss commented May 10, 2026

Uh oh!

ventura-oss commented May 10, 2026

Uh oh!

hunnyboy1217 commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hunnyboy1217 commented May 12, 2026

Uh oh!

ventura-oss commented May 13, 2026

Uh oh!

e35ventura left a comment

Choose a reason for hiding this comment

Uh oh!

hunnyboy1217 commented May 13, 2026

Uh oh!

hunnyboy1217 commented May 13, 2026

Uh oh!

ventura-oss commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

hunnyboy1217 commented Apr 30, 2026 •

edited

Loading

ericwong0256-a11y commented May 3, 2026 •

edited

Loading

ventura-oss commented May 10, 2026 •

edited

Loading

hunnyboy1217 commented May 10, 2026 •

edited

Loading