Skip to content

Make the theme configurable instead of hardcoded hex #59

Description

@Kaushik4141

The theme is not in the theme file. index.css declares --color-brand-orange, --color-brand-red, .bg-wevote-gradient, and .topographic-line — grep confirms all four are defined and never used. The actual palette is around 30 hex literals scattered across five components: #070014, #2A0040, #FF2D55 / #E0264A, #FF6321, #00E5FF, #8B5CF6 / #6D28D9, plus three more at LoginScreen.tsx:72. Rebranding currently means hunting through JSX.

Clean up first

  • Delete apps/web/src/App.css — dead Vite starter CSS (.hero, #next-steps, #docs, .ticks) referencing undefined --accent / --border / --shadow, imported by nothing
  • Delete apps/web/public/bg.png — 961 KB, committed, unreferenced. bg.webp (8 KB) is what the app actually uses; that one file is about half the repo's asset weight.
  • Drop the four unused declarations from index.css

Semantic tokens

  • Define role-named tokens in the @theme block: --color-surface, --color-surface-raised, --color-accent, --color-accent-strong, --color-accent-warm, --color-highlight, --color-feature, --color-feature-deep
  • Replace the inlined hexes with token utilities (bg-surface, text-accent, from-accent to-accent-warm)

Named by role rather than colour, so a rebrand does not leave behind --color-brand-orange: blue.

Runtime override and presets

  • Tailwind v4 compiles @theme into plain custom properties on :root, so ConfigContext can write config.themeOverrides onto document.documentElement — recolouring the whole app with no rebuild
  • Ship two or three [data-theme="..."] presets (the current warm pink/purple as default, a cool blue, a neutral dark), selected via config.themePreset, with per-variable overrides layering on top

Presets matter because most adopters want their own colours before their own features, and few will hand-pick eight values.

Two smaller fixes while in here

  • Self-host Inter and Outfit via @fontsource. index.css:1 hotlinks Google Fonts on every page load — a third-party request on the critical rendering path, and a GDPR problem for some deployers.
  • Move overflow-hidden off body (index.css:14) onto the voting layout wrapper. It is correct for the fixed-viewport voting screens, but it will silently clip the admin tables.

Deliberate exception

The 0–10 rating scale colours at RatingScreen.tsx:21-24 (#94a3b8 / #f43f5e / #fbbf24 / #22c55e) stay hardcoded. They are semantic — low / poor / fair / good — not brand. Someone theming the app pink should not end up with a green "0" and a red "10".

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendReact / web appthemingDesign tokens, colors, fonts

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions