Add dark-mode support across the frontend - #592
Conversation
|
@SSpirate11 thank you for your contribution, this feature would be really useful. 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. |
|
@ItsAbhinavM Thanks for the feedback. I will work on the scenerios and the approach mentioned and will share the screenshots with the fix. |
…in both light and dark mode
|
@ItsAbhinavM I've updated the image viewer containers to remain white in both light and dark modes so transparent images and dark graphics retain full visibility for jurors. PTAL |


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 :
exposes init()/toggle(), persists the choice to localStorage
(_montageTheme), and applies it via a data-theme attribute on .
(backgrounds, surfaces, text, links, borders) and dark-mode style rules.
store, plus header colors moved onto 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