Light Theme#790
Conversation
|
🤖 Claude Code Review Status: Complete This PR implements a light theme for the Teranode dashboard UI. The implementation adds theme toggle functionality, CSS variable-based theming, and comprehensive light mode color definitions. Issues Found:
Analysis: The light theme file (441 lines) uses an inline approach, while the dark theme (95 lines) uses a modular structure with separate component files. This architectural difference is intentional and acceptable, but creates maintenance asymmetry. The theme toggle implementation in the toolbar is clean and functional. All CSS variables appear properly mapped through the setCSSVariablesFromObj utility. |
Benchmark Comparison ReportBaseline: Current: Summary
All benchmark results (sec/op)
Threshold: >10% with p < 0.05 | Generated: 2026-05-01 08:35 UTC |
mkpuig
force-pushed
the
feature/light-theme
branch
from
2c8a47a to
b82c80f
Compare
mkpuig
force-pushed
the
feature/light-theme
branch
from
d87ccd0 to
2ba88b4
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| height: var(--height); | ||
|
|
||
| background: #33373c; | ||
| background: var(--toggle-bg-color); |
There was a problem hiding this comment.
Update: The light theme now includes a toggle definition (lines 403-407), which will generate the --toggle-bg-color CSS variable correctly.
However, the dark theme is still missing the toggle definition. The dark theme file (ui/dashboard/src/internal/styles/themes/dark/index.ts) does not export or import a toggle theme object, which means the toggle component will use an incorrect background color in dark mode.
Action needed: Add the toggle configuration to the dark theme to match the light theme structure.
| color: '#E4E6EB', | ||
| }, | ||
| }, | ||
| tab: { default: { |
There was a problem hiding this comment.
[Minor] Formatting issue: missing newline between tab object and default property.
|
There was a problem hiding this comment.
Blocking bugs
Toggle invisible in dark mode. lib/components/toggle/index.svelte:197 uses var(--toggle-bg-color) with no fallback. Dark theme has no toggle key, so background falls back to transparent. Fix: var(--toggle-bg-color, #33373c) or add toggle key to dark theme.
Settings clear-search invisible on hover. routes/settings/+page.svelte:534-537 sets color: var(--app-color); background-color: var(--app-color) — text and bg same value.
Peers catchup modal hardcoded dark. routes/peers/+page.svelte:1577,1596 — background: #1a1b23 and #15161d. Dark island in light theme.
Admin scrollbar + refresh-button use text color as background. routes/admin/+page.svelte:1426-1432, 1612 — background-color: var(--app-color).
P2P peer header still hardcoded white. routes/p2p/+page.svelte:403 — background: rgba(255, 255, 255, 0.05) not converted.
Untouched, broken in light (call out as follow-up or fix here)
internal/components/breadcrumbs/index.svelte:81,85— every page headerinternal/components/block-assembly-modal/index.svelte— entire modalinternal/components/page/viewer/no-data-card/index.svelte:29,37internal/components/page/home/home-stats-graph/graph.ts:195— chart axeslib/components/navigation/{drawer,menu-item}— sidenavlib/components/textinput/index.svelte:370routes/{login,wstest}/+page.svelte
Other
FOUC. Removing $theme = 'dark' from +layout.svelte means SSR returns null (browser=false), first paint = light, then snaps to dark. Inline an early script in app.html to set the class before paint.
clearAllCSSVariables then partial set. Causes the toggle bug above. Add CI check that both themes share the same key shape.
Toolbar toggle a11y. Add aria-label and aria-pressed — title attr alone insufficient.
Behaviour change. json-tree boolean color went from CSS blue (#0000FF) to #1a6bd4 in dark — intentional? Note in description.
3 participants
Light theme screenshots
Dashboard
Block Explorer
P2P
Peers
Network
Admin
Settings
