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
@ItsAbhinavM

Copy link
Copy Markdown
Collaborator

@SSpirate11 thank you for your contribution, this feature would be really useful.
I do have some concern regarding the background color, particularly for images with transparent regions. In such cases, the image may blend into the background, making it difficult for jurors to properly distinguish or evaluate the content.

Have you considered how we should handle these scenarios ? One possible approach would be to keep the image viewer background white to ensure visibility across all images. Maybe some screenshots would help.

@SSpirate11

Copy link
Copy Markdown
Author

@ItsAbhinavM Thanks for the feedback. I will work on the scenerios and the approach mentioned and will share the screenshots with the fix.

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

2 participants