Skip to content

Add dark-mode support across the frontend#592

Open
SSpirate11 wants to merge 9 commits into
hatnote:masterfrom
SSpirate11:dark-mode
Open

Add dark-mode support across the frontend#592
SSpirate11 wants to merge 9 commits into
hatnote:masterfrom
SSpirate11:dark-mode

Conversation

@SSpirate11

@SSpirate11 SSpirate11 commented Jun 27, 2026

Copy link
Copy Markdown

Fixes: #591 , #22

Adds a site-wide dark mode to the Montage frontend. A theme toggle in the
header lets users switch between light and dark, with their choice persisted
across sessions. All major views are restyled to use CSS theme variables so
they render correctly in both themes.

Changes done :

  • Theme store: a Pinia store that tracks isDark,
    exposes init()/toggle(), persists the choice to localStorage
    (_montageTheme), and applies it via a data-theme attribute on .
  • Theme variables (assets/main.css): light/dark CSS custom properties
    (backgrounds, surfaces, text, links, borders) and dark-mode style rules.
  • Header toggle (AppHeader.vue): a sun/night switch wired to the theme
    store, plus header colors moved onto theme variables.
  • App root (App.vue): initializes the theme store on startup.
  • Component restyling: hardcoded colors replaced with theme variables
    across Campaign, Round, and Vote components, the footer, login box,
    avatar, and permission-denied view.

Working

The selected theme is stored in localStorage and reflected as
data-theme="dark|light" on the document root. CSS variables resolve per
theme, so components stay theme-agnostic. Theme defaults to light on first
visit.

Screencast.from.2026-06-27.15-38-35.online-video-cutter.com.mp4

@SSpirate11 SSpirate11 marked this pull request as draft June 27, 2026 08:58
@SSpirate11 SSpirate11 marked this pull request as ready for review June 28, 2026 05:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FEATURE(Approach ): Dark mode for Montage

1 participant