Context: kyrers flagged that themes.ts duplicates colors already defined in the library. Most can be replaced with var(--klerosUIComponentsX) so dark mode is driven entirely by the library's .dark class on . Blocked by library issue 7 (some colors are not in the library yet).
Scope:
After the library adds the missing color vars, replace each value in web/src/styles/themes.ts with "var(--klerosUIComponentsX)". lightTheme and darkTheme become structurally identical except for the name field.
Rewrite the 17 hex-opacity callsites (${theme.X}BF, ${theme.X}BB, etc.) to color-mix(in srgb, var(--x) 75%, transparent). Full list:
Footer/index.tsx, Header/Logo.tsx, Header/navbar/Explore.tsx (×2), Header/index.tsx, styles/mdxEditorTheme.ts, LightButton.tsx, ExternalLinkWarning.tsx, ConnectWallet/AccountDisplay.tsx, TopJurors/JurorCard/DesktopCard.tsx and MobileCard.tsx, Voting/VotesDetails/index.tsx, AttachmentDisplay/Header.tsx, Courts/CourtDetails/TopSearch.tsx, StakingHistoryByCourt/DisplayStakes/StakeEventCard/{Desktop,Mobile}Card.tsx, JurorsStakedByCourt/DisplayJurors/JurorCard.tsx.
Keep the theme.name === "dark" checks (4-5 places in Header/Footer) working; just keep the name field in themes.ts.
Cost: ~30 lines added in the library, ~halved themes.ts, 17 callsite rewrites, visual regression eyeballing.
Context: kyrers flagged that themes.ts duplicates colors already defined in the library. Most can be replaced with var(--klerosUIComponentsX) so dark mode is driven entirely by the library's .dark class on . Blocked by library issue 7 (some colors are not in the library yet).
Scope:
After the library adds the missing color vars, replace each value in web/src/styles/themes.ts with "var(--klerosUIComponentsX)". lightTheme and darkTheme become structurally identical except for the name field.
Rewrite the 17 hex-opacity callsites (${theme.X}BF, ${theme.X}BB, etc.) to color-mix(in srgb, var(--x) 75%, transparent). Full list:
Footer/index.tsx, Header/Logo.tsx, Header/navbar/Explore.tsx (×2), Header/index.tsx, styles/mdxEditorTheme.ts, LightButton.tsx, ExternalLinkWarning.tsx, ConnectWallet/AccountDisplay.tsx, TopJurors/JurorCard/DesktopCard.tsx and MobileCard.tsx, Voting/VotesDetails/index.tsx, AttachmentDisplay/Header.tsx, Courts/CourtDetails/TopSearch.tsx, StakingHistoryByCourt/DisplayStakes/StakeEventCard/{Desktop,Mobile}Card.tsx, JurorsStakedByCourt/DisplayJurors/JurorCard.tsx.
Keep the theme.name === "dark" checks (4-5 places in Header/Footer) working; just keep the name field in themes.ts.
Cost: ~30 lines added in the library, ~halved themes.ts, 17 callsite rewrites, visual regression eyeballing.