From 25d4b3300886174f8e91828df2086f0d353a55e3 Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:21:19 +0530
Subject: [PATCH 1/9] feat(theme): add theme store and wire dark-mode into App
 root

---
 frontend/src/App.vue         | 10 +++++++++-
 frontend/src/stores/theme.js | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/stores/theme.js

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e0bf9b3d..f1cdfc52 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,14 +7,22 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import AppHeader from '@/components/AppHeader.vue'
 import AppFooter from '@/components/AppFooter.vue'
+import { useThemeStore } from '@/stores/theme'
+
+const themeStore = useThemeStore()
+
+onMounted(() => {
+  themeStore.init()
+})
 </script>
 
 <style scoped>
 .main-container {
-  background-color: #fafafa;
+  background-color: var(--bg-page);
   min-height: calc(100vh - 116.5px);
   padding: 0 8px;
 }
diff --git a/frontend/src/stores/theme.js b/frontend/src/stores/theme.js
new file mode 100644
index 00000000..3a3e1f36
--- /dev/null
+++ b/frontend/src/stores/theme.js
@@ -0,0 +1,23 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme-store', () => {
+  const isDark = ref(false)
+
+  function init() {
+    isDark.value = localStorage.getItem('_montageTheme') === 'dark'
+    _apply()
+  }
+
+  function toggle() {
+    isDark.value = !isDark.value
+    localStorage.setItem('_montageTheme', isDark.value ? 'dark' : 'light')
+    _apply()
+  }
+
+  function _apply() {
+    document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : 'light')
+  }
+
+  return { isDark, init, toggle }
+})

From 42250feaa329cda230f0c83d5e2adab0f5c671ae Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:21:28 +0530
Subject: [PATCH 2/9] feat(theme): add dark-mode styles and theme variables to
 main.css

---
 frontend/src/assets/main.css | 738 ++++++++++++++++++++++++++++++++++-
 1 file changed, 722 insertions(+), 16 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index b8b9e11c..9ddd5a8c 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,3 +1,72 @@
+/* ============================================================
+   CSS Custom Properties — Light mode (default)
+   ============================================================ */
+:root {
+  --bg-page: #fafafa;
+  --bg-surface: #ffffff;
+  --bg-surface-alt: #e8e8e8;
+  --bg-image-panel: #e6e6e6;
+  --bg-gallery-image: #cccccc;
+  --bg-gallery-hover: #e0e0e0;
+  --bg-image-dialog: #f5f5f5;
+  --text-primary: rgba(0, 0, 0, 0.87);
+  --text-secondary: rgba(0, 0, 0, 0.54);
+  --text-muted: #666666;
+  --text-header: #000000;
+  --text-header-user: gray;
+  --border-color: #c8ccd1;
+  --border-footer: #e0e0e0;
+  --link-color: #006cb6;
+  --text-card-label: #000000;
+  --icon-round-bg: #0645ad;
+  --bg-overlay: rgba(0, 0, 0, 0.18);
+  --color-fave: #e53935;
+  --btn-normal-bg: #f8f9fa;
+  --btn-normal-text: #202122;
+  --btn-normal-border: #a2a9b1;
+  --icon-color: #202122;
+}
+
+/* ============================================================
+   CSS Custom Properties — Dark mode overrides
+   ============================================================ */
+[data-theme='dark'] {
+  --bg-page: #1c1c1c;
+  --bg-surface: #272727;
+  --bg-surface-alt: #323232;
+  --bg-image-panel: #222222;
+  --bg-gallery-image: #272727;
+  --bg-gallery-hover: #3c3c3c;
+  --bg-image-dialog: #272727;
+  --text-primary: #e4e4e4;
+  --text-secondary: #b0b0b0;
+  --text-muted: #999999;
+  --text-header: #f0f0f0;
+  --text-header-user: #cccccc;
+  --border-color: #444;
+  --border-footer: #3a3a3a;
+  --link-color: #6db3f8;
+  --text-card-label: #e0e0e0;
+  --icon-round-bg: #4a80e0;
+  --bg-overlay: rgba(0, 0, 0, 0.45);
+  --color-fave: #ff5252;
+  --btn-normal-bg: #2a2a2a;
+  --btn-normal-text: #e0e0e0;
+  --btn-normal-border: #555;
+  --icon-color: #ccc;
+
+  /* Codex internal token. Codex applies `mix-blend-mode: multiply` to quiet
+     buttons (Logout, Accept, Decline, Save, …) and framed tabs on hover via
+     `var(--mix-blend-mode-blend, multiply)`. Multiply is tuned for light
+     backgrounds; over the dark page it blends a hovered button — background,
+     text and icon — toward black until it disappears. Neutralising the blend
+     here restores the hover state for every Codex component at once. */
+  --mix-blend-mode-blend: normal;
+}
+
+/* ============================================================
+   Global base reset
+   ============================================================ */
 * {
   margin: 0;
   padding: 0;
@@ -5,8 +74,49 @@
   font-family: 'Lato', sans-serif;
 }
 
+body {
+  color: var(--text-primary);
+  background-color: var(--bg-page);
+  min-height: 100vh;
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-header);
+}
+
+p,
+span,
+label,
+li,
+td,
+th,
+div {
+  color: inherit;
+}
+
 .greyed {
-  color: #8c8c8c;
+  color: var(--text-muted);
+}
+
+.text-primary {
+  color: var(--text-primary);
 }
 
 .icon-small {
@@ -19,29 +129,21 @@
   width: 18px;
   line-height: 18px;
   height: 18px;
-
   text-align: center;
-  color: darkgray;
-  background: white;
+  color: var(--text-secondary);
+  background: var(--bg-surface);
   font-size: 11px;
   border-radius: 3px;
-  text-shadow: 0 1px 0 white;
+  text-shadow: 0 1px 0 var(--bg-surface);
   white-space: nowrap;
-  border: 1px solid grey;
-
-  -moz-box-shadow:
-    0 1px 0px rgba(0, 0, 0, 0.2),
-    0 0 0 2px #fff inset;
-  -webkit-box-shadow:
-    0 1px 0px rgba(0, 0, 0, 0.2),
-    0 0 0 2px #fff inset;
+  border: 1px solid var(--border-color);
   box-shadow:
     0 1px 0px rgba(0, 0, 0, 0.2),
-    0 0 0 2px #fff inset;
+    0 0 0 2px var(--bg-surface) inset;
 }
 
 .juror-campaign-accordion summary:focus {
-  border-color: white !important;
+  border-color: var(--border-color) !important;
   box-shadow: none !important;
 }
 
@@ -55,9 +157,613 @@
 
 .date-time-inputs .cdx-label {
   font-size: 14px !important;
-  color: gray !important;
+  color: var(--text-muted) !important;
 }
 
 .cdx-select-vue__handle {
   min-width: 120px;
 }
+
+/* Highlight key info in cards */
+.information-card strong {
+  color: var(--link-color);
+}
+
+/* ============================================================
+   Custom Toggle Switch
+   ============================================================ */
+.theme-switch-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 16px;
+  color: var(--text-header);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #b0b0b0;
+  transition: background-color 0.3s ease;
+  border-radius: 22px;
+}
+
+.slider::before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background-color: #fff;
+  transition: transform 0.3s ease;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #4a80e0;
+}
+
+input:checked + .slider::before {
+  transform: translateX(22px);
+}
+
+/* ============================================================
+   Codex Component Overrides for Dark Mode
+   ============================================================ */
+
+/* --- Cards & Accordions --- */
+[data-theme='dark'] .cdx-card {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .cdx-accordion {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .cdx-card__title,
+[data-theme='dark'] .cdx-accordion__header-title {
+  color: var(--text-header) !important;
+}
+
+[data-theme='dark'] .cdx-card__description,
+[data-theme='dark'] .cdx-card__supporting-text,
+[data-theme='dark'] .cdx-accordion__content {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-card p,
+[data-theme='dark'] .cdx-card span,
+[data-theme='dark'] .cdx-card strong,
+[data-theme='dark'] .cdx-accordion p,
+[data-theme='dark'] .cdx-accordion span {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-accordion summary,
+[data-theme='dark'] .cdx-accordion__header,
+[data-theme='dark'] details summary {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .cdx-accordion summary::before,
+[data-theme='dark'] .cdx-accordion__header::before,
+[data-theme='dark'] .cdx-accordion__indicator svg,
+[data-theme='dark'] .cdx-accordion__header-icon svg {
+  background-color: var(--text-primary) !important;
+  fill: var(--text-primary) !important;
+  color: var(--text-primary) !important;
+}
+
+/* --- Text Inputs, Text Areas --- */
+[data-theme='dark'] .cdx-text-input__input,
+[data-theme='dark'] .cdx-text-area__textarea {
+  background-color: var(--bg-surface-alt) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .cdx-text-input__input::placeholder,
+[data-theme='dark'] .cdx-text-area__textarea::placeholder {
+  color: var(--text-muted) !important;
+}
+
+/* --- Labels & Fields --- */
+[data-theme='dark'] .cdx-label {
+  color: var(--text-secondary) !important;
+}
+
+[data-theme='dark'] .cdx-label__label__text {
+  color: var(--text-secondary) !important;
+}
+
+[data-theme='dark'] .cdx-field__help-text {
+  color: var(--text-muted) !important;
+}
+
+/* --- Select / Dropdowns --- */
+[data-theme='dark'] .cdx-select-vue__handle {
+  background-color: var(--btn-normal-bg) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .cdx-select-vue__handle:hover,
+[data-theme='dark'] .cdx-select-vue__handle:focus {
+  border-color: var(--link-color) !important;
+}
+
+/* Fix the dropdown arrow icon and menu indicators */
+[data-theme='dark'] .cdx-select-vue__handle .cdx-icon svg,
+[data-theme='dark'] .cdx-select-vue__indicator svg,
+[data-theme='dark'] .cdx-select-vue__handle svg,
+[data-theme='dark'] .cdx-menu-item__indicator svg {
+  fill: var(--icon-color) !important;
+  color: var(--icon-color) !important;
+}
+
+/* Menu / Dropdown popup */
+[data-theme='dark'] .cdx-menu {
+  background-color: var(--bg-surface) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .cdx-menu-item {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-menu-item--enabled:hover,
+[data-theme='dark'] .cdx-menu-item--highlighted {
+  background-color: var(--bg-surface-alt) !important;
+  color: var(--text-header) !important;
+}
+
+[data-theme='dark'] .cdx-menu-item--active {
+  background-color: rgba(74, 128, 224, 0.2) !important;
+  color: var(--link-color) !important;
+}
+
+[data-theme='dark'] .cdx-menu-item__text,
+[data-theme='dark'] .cdx-menu-item__text__label,
+[data-theme='dark'] .cdx-menu-item__text__description,
+[data-theme='dark'] .cdx-menu-item__content {
+  color: inherit !important;
+}
+
+/* --- Buttons --- */
+
+/* Quiet buttons — neutral by default.
+   Only the action-specific rules below (progressive / destructive) add an accent
+   colour. Painting every quiet button with --link-color here would also highlight
+   empty-action toggles (e.g. an unselected Accept/Decline or gallery-size button,
+   whose `:action` resolves to ''), making both options look selected. Codex does
+   the same in light mode: a quiet button stays neutral until it gets a
+   progressive/destructive action. */
+[data-theme='dark'] .cdx-button--weight-quiet {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-button--weight-quiet:hover {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+  color: var(--text-primary) !important;
+}
+
+/* Normal weight buttons — the main issue */
+[data-theme='dark'] .cdx-button--weight-normal {
+  background-color: var(--btn-normal-bg) !important;
+  color: var(--btn-normal-text) !important;
+  border-color: var(--btn-normal-border) !important;
+}
+
+[data-theme='dark'] .cdx-button--weight-normal:hover {
+  background-color: #383838 !important;
+  color: #fff !important;
+}
+
+/* Progressive primary buttons */
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-primary {
+  background-color: #3366cc !important;
+  color: #fff !important;
+  border-color: #3366cc !important;
+}
+
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-primary:hover {
+  background-color: #447ff5 !important;
+  border-color: #447ff5 !important;
+}
+
+/* Destructive primary buttons */
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-primary {
+  background-color: #d33 !important;
+  color: #fff !important;
+  border-color: #d33 !important;
+}
+
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-primary:hover,
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-primary:enabled:hover {
+  background-color: #ff4d4d !important;
+  border-color: #ff4d4d !important;
+}
+
+/* Progressive normal buttons */
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-normal {
+  background-color: rgba(51, 102, 204, 0.15) !important;
+  color: var(--link-color) !important;
+  border-color: var(--link-color) !important;
+}
+
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-normal:hover,
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-normal:enabled:hover {
+  background-color: rgba(51, 102, 204, 0.3) !important;
+  color: #fff !important;
+}
+
+/* Destructive quiet buttons (e.g. Logout) */
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet {
+  color: #ff6b6b !important;
+}
+
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet:enabled:hover {
+  background-color: rgba(255, 77, 77, 0.15) !important;
+  color: #ff8a8a !important;
+}
+
+/* Default action quiet buttons (and buttons lacking an action class) */
+[data-theme='dark'] .cdx-button--action-default.cdx-button--weight-quiet,
+[data-theme='dark'] .cdx-button--weight-quiet:not([class*='--action-']) {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-button--action-default.cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--action-default.cdx-button--weight-quiet:enabled:hover,
+[data-theme='dark'] .cdx-button--weight-quiet:not([class*='--action-']):hover,
+[data-theme='dark'] .cdx-button--weight-quiet:not([class*='--action-']):enabled:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+}
+
+/* Progressive quiet buttons (e.g. Accept selected) */
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet {
+  background-color: transparent !important;
+  color: var(--link-color) !important;
+}
+
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:enabled:hover {
+  background-color: rgba(51, 102, 204, 0.2) !important;
+  color: #fff !important;
+}
+
+/* --- All SVGs/Icons inside Codex components --- */
+[data-theme='dark'] .cdx-button svg {
+  fill: currentColor !important;
+}
+
+[data-theme='dark'] .cdx-icon svg {
+  fill: var(--icon-color) !important;
+}
+
+/* Material design icons inside dark mode */
+[data-theme='dark'] .material-design-icon svg {
+  fill: currentColor !important;
+}
+
+/* --- Radio buttons & Checkboxes --- */
+[data-theme='dark'] .cdx-radio__label,
+[data-theme='dark'] .cdx-checkbox__label {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-radio__icon {
+  border-color: var(--border-color) !important;
+  background-color: var(--bg-surface-alt) !important;
+}
+
+[data-theme='dark'] .cdx-radio__input:checked + .cdx-radio__icon {
+  border-color: var(--link-color) !important;
+}
+
+/* --- CdxMultiselectLookup (Coordinator/Juror selection) --- */
+[data-theme='dark'] .cdx-chip-input,
+[data-theme='dark'] .cdx-chip-input__chips,
+[data-theme='dark'] .cdx-multiselect-lookup {
+  background-color: var(--bg-surface-alt) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .cdx-chip-input__input {
+  background-color: transparent !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-chip-input__input::placeholder {
+  color: var(--text-muted) !important;
+}
+
+[data-theme='dark'] .cdx-input-chip {
+  background-color: #3a3a3a !important;
+  color: var(--text-primary) !important;
+  border-color: #555 !important;
+}
+
+[data-theme='dark'] .cdx-input-chip__icon svg {
+  fill: var(--text-muted) !important;
+}
+
+[data-theme='dark'] .cdx-input-chip__icon:hover svg {
+  fill: var(--text-header) !important;
+}
+
+[data-theme='dark'] .cdx-multiselect-lookup .cdx-text-input__input {
+  background-color: transparent !important;
+  color: var(--text-primary) !important;
+}
+
+/* --- Dialog / Modal --- */
+[data-theme='dark'] .cdx-dialog,
+[data-theme='dark'] .cdx-dialog__body {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .cdx-dialog__header {
+  background-color: var(--bg-surface) !important;
+  border-bottom-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .cdx-dialog__header__title-group .cdx-dialog__header__title {
+  color: var(--text-header) !important;
+}
+
+[data-theme='dark'] .cdx-dialog__footer {
+  background-color: var(--bg-surface) !important;
+  border-top-color: var(--border-footer) !important;
+}
+
+/* --- Tooltip --- */
+[data-theme='dark'] .cdx-tooltip {
+  background-color: #555 !important;
+  color: #fff !important;
+}
+
+/* --- Date Picker (vue-datepicker-next) --- */
+
+/* The calendar/time icon inside the input */
+[data-theme='dark'] .mx-icon-calendar,
+[data-theme='dark'] .mx-icon-clear {
+  color: var(--text-muted) !important;
+}
+
+[data-theme='dark'] .mx-icon-clear:hover {
+  color: var(--text-header) !important;
+}
+
+/* Date picker input field */
+[data-theme='dark'] .mx-input {
+  background-color: var(--bg-surface-alt) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-color) !important;
+  box-shadow: none !important;
+}
+
+[data-theme='dark'] .mx-input:hover,
+[data-theme='dark'] .mx-input:focus {
+  border-color: var(--link-color) !important;
+}
+
+/* Date picker popup/calendar */
+[data-theme='dark'] .mx-datepicker-main {
+  background-color: var(--bg-surface) !important;
+  color: var(--text-primary) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .mx-datepicker-popup {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
+}
+
+[data-theme='dark'] .mx-datepicker-header,
+[data-theme='dark'] .mx-datepicker-footer {
+  border-color: var(--border-footer) !important;
+}
+
+/* Calendar navigation buttons */
+[data-theme='dark'] .mx-btn {
+  color: var(--text-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+[data-theme='dark'] .mx-btn:hover {
+  color: var(--link-color) !important;
+  border-color: var(--link-color) !important;
+}
+
+[data-theme='dark'] .mx-btn-text {
+  color: var(--text-primary) !important;
+}
+
+/* Calendar header arrows (border-based icons) */
+[data-theme='dark'] .mx-icon-left::before,
+[data-theme='dark'] .mx-icon-right::before,
+[data-theme='dark'] .mx-icon-double-left::before,
+[data-theme='dark'] .mx-icon-double-right::before,
+[data-theme='dark'] .mx-icon-double-left::after,
+[data-theme='dark'] .mx-icon-double-right::after {
+  border-color: var(--text-secondary) !important;
+}
+
+/* Calendar header labels */
+[data-theme='dark'] .mx-calendar-header-label {
+  color: var(--text-primary) !important;
+}
+
+/* Table header (day names) */
+[data-theme='dark'] .mx-table th {
+  color: var(--text-muted) !important;
+}
+
+/* Calendar day cells */
+[data-theme='dark'] .mx-calendar-content .cell {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .mx-calendar-content .cell:hover {
+  color: var(--text-header) !important;
+  background-color: var(--bg-surface-alt) !important;
+}
+
+[data-theme='dark'] .mx-calendar-content .cell.active {
+  background-color: #3366cc !important;
+  color: #fff !important;
+}
+
+[data-theme='dark'] .mx-calendar-content .cell.in-range,
+[data-theme='dark'] .mx-calendar-content .cell.hover-in-range {
+  background-color: rgba(51, 102, 204, 0.2) !important;
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .mx-calendar-content .cell.not-current-month {
+  color: var(--text-muted) !important;
+}
+
+[data-theme='dark'] .mx-table-date .today {
+  color: var(--link-color) !important;
+}
+
+/* Time picker */
+[data-theme='dark'] .mx-time {
+  background-color: var(--bg-surface) !important;
+}
+
+[data-theme='dark'] .mx-time + .mx-time {
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .mx-time-header {
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .mx-time-column {
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .mx-time-item {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .mx-time-item:hover {
+  color: var(--text-header) !important;
+  background-color: var(--bg-surface-alt) !important;
+}
+
+[data-theme='dark'] .mx-time-item.active {
+  color: var(--link-color) !important;
+  background-color: transparent !important;
+}
+
+[data-theme='dark'] .mx-time-option {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .mx-time-option:hover {
+  background-color: var(--bg-surface-alt) !important;
+}
+
+[data-theme='dark'] .mx-time-option.active {
+  color: var(--link-color) !important;
+}
+
+/* Calendar adjacent borders */
+[data-theme='dark'] .mx-calendar + .mx-calendar {
+  border-color: var(--border-footer) !important;
+}
+
+/* --- CdxField description text --- */
+[data-theme='dark'] .cdx-field .cdx-field__control,
+[data-theme='dark'] .cdx-field__help-text {
+  color: var(--text-muted) !important;
+}
+
+/* --- Toast notifications --- */
+/* Intentionally NOT themed. Each toast is an opaque coloured card from
+   vue-toastification (success = green #4caf50, error = red #ff5252, info and
+   warning too) with white text, legible on the dark page. Overriding the shared
+   `.Vue-Toastification__toast` background would beat the per-type colours (they
+   carry no !important) and flatten every toast to one grey, losing the
+   success/error distinction. */
+
+/* --- Progress bar --- */
+[data-theme='dark'] .cdx-progress-bar {
+  background-color: var(--bg-surface-alt) !important;
+}
+
+[data-theme='dark'] .cdx-progress-bar__bar {
+  background-color: var(--link-color) !important;
+}
+
+/* --- Lookup Loading State Fix --- */
+[data-theme='dark']
+  .cdx-multiselect-lookup--pending
+  .cdx-chip-input:not(.cdx-chip-input--has-separate-input)
+  .cdx-chip-input__chips,
+[data-theme='dark']
+  .cdx-multiselect-lookup--pending
+  .cdx-chip-input
+  .cdx-chip-input__separate-input,
+[data-theme='dark'] .cdx-lookup--pending .cdx-text-input__input,
+[data-theme='dark'] .cdx-typeahead-search--pending .cdx-text-input__input {
+  background-image: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.1) 75%,
+    transparent 75%,
+    transparent
+  ) !important;
+  background-size: 40px 40px !important;
+}
+/* Absolute fallback for all quiet buttons (handles empty string actions) */
+[data-theme='dark'] .cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--weight-quiet:enabled:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+}
+
+/* Redefine specific quiet button hovers after the fallback so they win */
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:enabled:hover {
+  background-color: rgba(51, 102, 204, 0.2) !important;
+  color: #fff !important;
+}
+
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet:hover,
+[data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet:enabled:hover {
+  background-color: rgba(255, 77, 77, 0.15) !important;
+  color: #ff8a8a !important;
+}

From 91f88098620bdca4dda1f6a58f71bd55db398c44 Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:21:34 +0530
Subject: [PATCH 3/9] feat(theme): add dark-mode support to app header and
 footer

---
 frontend/src/components/AppFooter.vue |  9 +++++----
 frontend/src/components/AppHeader.vue | 25 ++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AppFooter.vue b/frontend/src/components/AppFooter.vue
index b7992db8..f59ee9eb 100644
--- a/frontend/src/components/AppFooter.vue
+++ b/frontend/src/components/AppFooter.vue
@@ -30,8 +30,9 @@ const envName = import.meta.env.DEV ? 'DEV' : 'PROD'
   align-items: center;
   padding: 20px;
   font-size: 14px;
-  color: #666;
-  border-top: 1px solid #e0e0e0;
+  color: var(--text-muted);
+  border-top: 1px solid var(--border-footer);
+  background-color: var(--bg-surface);
 }
 
 .footer-left {
@@ -41,7 +42,7 @@ const envName = import.meta.env.DEV ? 'DEV' : 'PROD'
 
 .footer-link {
   margin-left: 12px;
-  color: #006cb6;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -51,6 +52,6 @@ const envName = import.meta.env.DEV ? 'DEV' : 'PROD'
 
 .env-label {
   font-weight: bold;
-  color: #006cb6;
+  color: var(--link-color);
 }
 </style>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 4c37f99d..4f07346a 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="header-container">
     <router-link to="/" class="header-title">MONTAGE</router-link>
-    <div style="display: flex">
+    <div style="display: flex; align-items: center">
       <div v-if="userStore.user !== null" class="header-user">
         <div class="account-info-container">
           <account class="account-info-icon" />
@@ -11,6 +11,16 @@
           {{ $t('montage-login-logout') }}
         </cdx-button>
       </div>
+
+      <div class="theme-switch-wrapper">
+        <weather-sunny v-if="themeStore.isDark" :size="18" />
+        <weather-night v-else :size="18" />
+        <label class="switch">
+          <input type="checkbox" :checked="themeStore.isDark" @change="themeStore.toggle" />
+          <span class="slider"></span>
+        </label>
+      </div>
+
       <cdx-select
         class="language-select"
         :menu-items="availableLanguages"
@@ -24,6 +34,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useUserStore } from '@/stores/user'
+import { useThemeStore } from '@/stores/theme'
 import { useI18n } from 'vue-i18n'
 import ISO6391 from 'iso-639-1'
 
@@ -32,8 +43,11 @@ import { CdxButton, CdxSelect } from '@wikimedia/codex'
 
 // Icons
 import Account from 'vue-material-design-icons/Account.vue'
+import WeatherNight from 'vue-material-design-icons/WeatherNight.vue'
+import WeatherSunny from 'vue-material-design-icons/WeatherSunny.vue'
 
 const userStore = useUserStore()
+const themeStore = useThemeStore()
 const { locale, messages } = useI18n()
 
 const selectedLanguage = ref('en')
@@ -66,28 +80,29 @@ onMounted(() => {
 .header-container {
   padding: 18px 16px 18px 64px;
   height: 63px;
-  border-bottom: 3px solid #006cb6;
+  border-bottom: 3px solid var(--link-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background-color: var(--bg-surface);
 }
 
 .header-title {
   font-size: 16px;
   font-weight: bold;
-  color: #000;
+  color: var(--text-header);
   text-decoration: none;
 }
 
 .account-info-container {
   display: flex;
   margin-right: 16px;
-  margin-top: 8px;
 }
 
 .header-user {
   display: flex;
-  color: gray;
+  align-items: center;
+  color: var(--text-header-user);
 }
 
 .account-info-icon {

From 7dcfcda13caa35240f9dbc13cb9947f2e39d9659 Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:21:50 +0530
Subject: [PATCH 4/9] feat(theme): apply dark-mode styles to campaign
 components

---
 .../src/components/Campaign/ActiveCampaign.vue  | 17 +++++++++++++++--
 .../src/components/Campaign/AllCampaign.vue     | 13 +++++++++++--
 .../Campaign/CoordinatorCampaignCard.vue        |  4 ++--
 .../components/Campaign/JurorCampaignCard.vue   |  2 +-
 .../src/components/Campaign/ViewCampaign.vue    |  6 ++++++
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Campaign/ActiveCampaign.vue b/frontend/src/components/Campaign/ActiveCampaign.vue
index 8dd6d8d2..755776f6 100644
--- a/frontend/src/components/Campaign/ActiveCampaign.vue
+++ b/frontend/src/components/Campaign/ActiveCampaign.vue
@@ -169,11 +169,20 @@ onMounted(() => {
 .dashboard-info {
   margin-top: 8px;
   font-size: 14px;
-  color: #666;
+  color: var(--text-muted);
+}
+
+.dashboard-info a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.dashboard-info a:hover {
+  text-decoration: underline;
 }
 
 .dashboard-link {
-  color: #006cb6;
+  color: var(--link-color);
   text-decoration: none;
 }
 
@@ -198,4 +207,8 @@ onMounted(() => {
 .juror-campaigns {
   margin-top: 40px;
 }
+
+.juror-campaigns h2 {
+  margin-bottom: 16px;
+}
 </style>
diff --git a/frontend/src/components/Campaign/AllCampaign.vue b/frontend/src/components/Campaign/AllCampaign.vue
index d40c05af..8061e6ea 100644
--- a/frontend/src/components/Campaign/AllCampaign.vue
+++ b/frontend/src/components/Campaign/AllCampaign.vue
@@ -134,11 +134,20 @@ onMounted(() => {
 .dashboard-info {
   margin-top: 8px;
   font-size: 14px;
-  color: #666;
+  color: var(--text-muted);
+}
+
+.dashboard-info a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.dashboard-info a:hover {
+  text-decoration: underline;
 }
 
 .dashboard-link {
-  color: #006cb6;
+  color: var(--link-color);
   text-decoration: none;
 }
 
diff --git a/frontend/src/components/Campaign/CoordinatorCampaignCard.vue b/frontend/src/components/Campaign/CoordinatorCampaignCard.vue
index 4d17f169..f688c7a8 100644
--- a/frontend/src/components/Campaign/CoordinatorCampaignCard.vue
+++ b/frontend/src/components/Campaign/CoordinatorCampaignCard.vue
@@ -77,14 +77,14 @@ if (props.campaign.rounds && props.campaign.rounds.length) {
 }
 
 .coordinator-campaign-dates {
-  color: #666;
+  color: var(--text-muted);
   font-size: 14px;
 }
 
 .coordinator-campaign-card-info-label {
   font-weight: bold;
   margin-bottom: 4px;
-  color: black;
+  color: var(--text-card-label);
 }
 
 .coordinator-campaign-card-latest-round {
diff --git a/frontend/src/components/Campaign/JurorCampaignCard.vue b/frontend/src/components/Campaign/JurorCampaignCard.vue
index c066f744..879623d7 100644
--- a/frontend/src/components/Campaign/JurorCampaignCard.vue
+++ b/frontend/src/components/Campaign/JurorCampaignCard.vue
@@ -113,7 +113,7 @@ const goRoundVoting = (round, type) => {
 }
 
 .juror-campaign-round-icon {
-  background-color: blue;
+  background-color: var(--icon-round-bg);
   height: 56px;
   padding: 10px;
   border-radius: 50%;
diff --git a/frontend/src/components/Campaign/ViewCampaign.vue b/frontend/src/components/Campaign/ViewCampaign.vue
index c30c67c7..29874ab1 100644
--- a/frontend/src/components/Campaign/ViewCampaign.vue
+++ b/frontend/src/components/Campaign/ViewCampaign.vue
@@ -377,6 +377,12 @@ onMounted(() => {
 
 .campaign-title {
   font-size: 36px;
+  color: var(--text-header);
+}
+
+.campaign-dates {
+  color: var(--text-muted);
+  font-size: 14px;
 }
 
 .campaign-button-group {

From e6e988b78b0de7b84ce5bdde1de67a611dc88175 Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:22:00 +0530
Subject: [PATCH 5/9] feat(theme): apply dark-mode styles to round components

---
 frontend/src/components/Round/RoundInfo.vue | 6 +++---
 frontend/src/components/Round/RoundNew.vue  | 5 +----
 frontend/src/components/Round/RoundView.vue | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Round/RoundInfo.vue b/frontend/src/components/Round/RoundInfo.vue
index 7de261a0..0812cdae 100644
--- a/frontend/src/components/Round/RoundInfo.vue
+++ b/frontend/src/components/Round/RoundInfo.vue
@@ -4,7 +4,7 @@
       <div>
         <h3>{{ $t('montage-round-deadline') }}</h3>
         <p>
-          <span style="color: black">{{ round.deadline_date.split('T')[0] }}</span> ·
+          <span class="text-primary">{{ round.deadline_date.split('T')[0] }}</span> ·
           {{ $t('montage-round-vote-ending', [remainingDays]) }}
         </p>
       </div>
@@ -38,7 +38,7 @@
                 %
               </p>
               <p style="font-size: 26px" v-else>N/A</p>
-              <p style="color: black">
+              <p class="text-primary">
                 {{
                   $t('montage-progress-status', [
                     juror.stats.total_tasks - juror.stats.total_open_tasks,
@@ -257,7 +257,7 @@ onMounted(() => {
 }
 
 .juror-campaign-round-icon {
-  background-color: blue;
+  background-color: var(--icon-round-bg);
   height: 56px;
   padding: 10px;
   border-radius: 50%;
diff --git a/frontend/src/components/Round/RoundNew.vue b/frontend/src/components/Round/RoundNew.vue
index 3daddc78..6203d1a1 100644
--- a/frontend/src/components/Round/RoundNew.vue
+++ b/frontend/src/components/Round/RoundNew.vue
@@ -6,21 +6,18 @@
         class="juror-campaign-round-icon"
         :size="36"
         fillColor="white"
-        style="background-color: grey"
       />
       <star-outline
         v-if="formData.vote_method === 'rating'"
         class="juror-campaign-round-icon"
         :size="36"
         fillColor="white"
-        style="background-color: grey"
       />
       <sort
         v-if="formData.vote_method === 'ranking'"
         class="juror-campaign-round-icon"
         :size="36"
         fillColor="white"
-        style="background-color: grey"
       />
       <div class="round-info">
         <h2>{{ formData.name }}</h2>
@@ -470,7 +467,7 @@ onMounted(() => {
 }
 
 .juror-campaign-round-icon {
-  background-color: grey;
+  background-color: var(--icon-round-bg);
   height: 56px;
   padding: 10px;
   border-radius: 50%;
diff --git a/frontend/src/components/Round/RoundView.vue b/frontend/src/components/Round/RoundView.vue
index c8828199..78fa3e2f 100644
--- a/frontend/src/components/Round/RoundView.vue
+++ b/frontend/src/components/Round/RoundView.vue
@@ -87,7 +87,7 @@ const toggleEditing = () => {
 }
 
 .juror-campaign-round-icon {
-  background-color: blue;
+  background-color: var(--icon-round-bg);
   height: 56px;
   padding: 10px;
   border-radius: 50%;

From d41bedbb67b4d1f693c5c897c27dab4a94582b4d Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:22:04 +0530
Subject: [PATCH 6/9] feat(theme): apply dark-mode styles to vote components

---
 .../src/components/Vote/ImageReviewDialog.vue | 13 ++++++------
 frontend/src/components/Vote/VoteEdit.vue     | 20 +++++++++----------
 frontend/src/components/Vote/VoteRanking.vue  | 14 ++++++-------
 frontend/src/components/Vote/VoteRating.vue   |  8 ++++----
 frontend/src/components/Vote/VoteYesNo.vue    |  8 ++++----
 5 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Vote/ImageReviewDialog.vue b/frontend/src/components/Vote/ImageReviewDialog.vue
index 4c4bd27d..719adfb9 100644
--- a/frontend/src/components/Vote/ImageReviewDialog.vue
+++ b/frontend/src/components/Vote/ImageReviewDialog.vue
@@ -110,7 +110,7 @@ defineExpose({ saveImageData })
   max-width: 50%;
   max-height: 100%;
   overflow: hidden;
-  background: #f5f5f5;
+  background: var(--bg-image-dialog);
 }
 
 .vote-image-review-dialog-image {
@@ -132,7 +132,7 @@ defineExpose({ saveImageData })
 
 .vote-image-review-dialog-review p {
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--text-secondary);
   margin-top: 8px;
 }
 
@@ -144,7 +144,7 @@ defineExpose({ saveImageData })
 }
 
 .vote-commons-button {
-  color: rgb(51, 102, 204);
+  color: var(--link-color);
 }
 
 .vote-details {
@@ -176,8 +176,9 @@ defineExpose({ saveImageData })
   overflow: hidden;
 }
 
-.vote-details-list-item-text h3 {
-  color: rgba(0, 0, 0, 0.87);
+.vote-details-list-item-text h3,
+.vote-details-list-item-text h4 {
+  color: var(--text-primary);
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.01em;
@@ -194,7 +195,7 @@ defineExpose({ saveImageData })
   letter-spacing: 0.01em;
   margin: 0 0 0 0;
   line-height: 1.6em;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--text-secondary);
 }
 
 .vote-details-icon {
diff --git a/frontend/src/components/Vote/VoteEdit.vue b/frontend/src/components/Vote/VoteEdit.vue
index 090767a7..955c539d 100644
--- a/frontend/src/components/Vote/VoteEdit.vue
+++ b/frontend/src/components/Vote/VoteEdit.vue
@@ -16,12 +16,12 @@
         <h2
           v-html="$t('montage-vote-edit-for', [`<a href='#/vote/${round.link}'>${round.name}</a>`])"
         ></h2>
-        <p style="color: gray">
+        <p class="greyed">
           {{ $t('montage-vote-round-part-of-campaign', [round.campaign.name]) }}
         </p>
       </div>
       <div class="order-by" v-if="!isVoting('ranking')">
-        <p style="font-size: 16px; color: gray">{{ $t('montage-vote-order-by') }}</p>
+        <p style="font-size: 16px" class="greyed">{{ $t('montage-vote-order-by') }}</p>
         <cdx-select
           v-model:selected="sort.order_by"
           :menu-items="menuItemsOrder"
@@ -35,7 +35,7 @@
         />
       </div>
       <div class="grid-size-controls" style="margin-left: 60px">
-        <p style="font-size: 16px; color: gray; margin-left: 11px">
+        <p style="font-size: 16px; margin-left: 11px" class="greyed">
           {{ $t('montage-vote-gallery-size') }}
         </p>
         <cdx-button
@@ -103,7 +103,7 @@
         <div class="gallery-image-container">
           <CommonsImage :image="image" :width="640" />
         </div>
-        <div style="font-size: 14px; color: gray">
+        <div style="font-size: 14px" class="greyed">
           <p>{{ $t('montage-voted-time', [dayjs.utc(image.date).fromNow()]) }}</p>
           <p>{{ dayjs.utc(image.date).format('D MMM YYYY [at] H:mm [UTC]') }}</p>
         </div>
@@ -158,7 +158,7 @@
               </div>
             </h3>
           </div>
-          <div style="font-size: 14px; color: gray; margin-top: 8px">
+          <div style="font-size: 14px; margin-top: 8px" class="greyed">
             <p>{{ $t('montage-voted-time', [dayjs.utc(image.date).fromNow()]) }}</p>
             <p>{{ dayjs.utc(image.date).format('D MMM YYYY [at] H:mm [UTC]') }}</p>
           </div>
@@ -505,7 +505,7 @@ onUnmounted(() => {
 .gallery-image {
   display: inline-block;
   position: relative;
-  background: #ccc;
+  background: var(--bg-gallery-image);
   width: calc((100% - 100px) / 5);
   height: 15vw;
   margin: 10px 10px 100px;
@@ -515,7 +515,7 @@ onUnmounted(() => {
 .gallery-image-fav {
   position: absolute;
   right: 0;
-  color: red;
+  color: var(--color-fave);
 }
 
 .gallery-image-ranking {
@@ -525,7 +525,7 @@ onUnmounted(() => {
 .vote-gallery-expand-icon {
   cursor: pointer;
   position: absolute;
-  background: rgba(0, 0, 0, 0.18);
+  background: var(--bg-overlay);
   top: 6px;
   left: 6px;
   padding: 4px;
@@ -583,7 +583,7 @@ onUnmounted(() => {
   width: 100%;
   height: 26px;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.18);
+  background: var(--bg-overlay);
   color: white;
   text-align: center;
   padding-top: 5px;
@@ -599,7 +599,7 @@ onUnmounted(() => {
 
 .gallery-footer:hover {
   height: 50%;
-  background: #e0e0e0;
+  background: var(--bg-gallery-hover);
 }
 
 .gallery-footer-name:hover {
diff --git a/frontend/src/components/Vote/VoteRanking.vue b/frontend/src/components/Vote/VoteRanking.vue
index ffe152c2..39afb42e 100644
--- a/frontend/src/components/Vote/VoteRanking.vue
+++ b/frontend/src/components/Vote/VoteRanking.vue
@@ -226,7 +226,7 @@ watch(
 }
 
 .vote-campaign-part {
-  color: gray;
+  color: var(--text-muted);
 }
 
 .vote-grid-size-controls {
@@ -242,7 +242,7 @@ watch(
   position: absolute;
   top: 6px;
   right: 6px;
-  background: rgba(0, 0, 0, 0.18);
+  background: var(--bg-overlay);
   border-radius: 50%;
   width: 32px;
   height: 32px;
@@ -258,7 +258,7 @@ watch(
 }
 
 .vote-gallery-fav-icon .is-fave {
-  color: #e53935;
+  color: var(--color-fave);
 }
 
 .vote-gallery {
@@ -269,7 +269,7 @@ watch(
 .vote-gallery-image {
   display: inline-block;
   position: relative;
-  background: #ccc;
+  background: var(--bg-gallery-image);
   width: calc((100% - 100px) / 5);
   height: 15vw;
   margin: 10px 10px 60px;
@@ -305,7 +305,7 @@ watch(
 .vote-gallery-expand-icon {
   cursor: pointer;
   position: absolute;
-  background: rgba(0, 0, 0, 0.18);
+  background: var(--bg-overlay);
   top: 6px;
   left: 6px;
   padding: 4px;
@@ -323,7 +323,7 @@ watch(
   width: 100%;
   height: 26px;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.18);
+  background: var(--bg-overlay);
   color: white;
   text-align: center;
   padding-top: 5px;
@@ -339,7 +339,7 @@ watch(
 
 .vote-gallery-footer:hover {
   height: 50%;
-  background: #e0e0e0;
+  background: var(--bg-gallery-hover);
 }
 
 .vote-gallery-footer-name:hover {
diff --git a/frontend/src/components/Vote/VoteRating.vue b/frontend/src/components/Vote/VoteRating.vue
index 80c26ceb..be030d4e 100644
--- a/frontend/src/components/Vote/VoteRating.vue
+++ b/frontend/src/components/Vote/VoteRating.vue
@@ -436,7 +436,7 @@ watch(voteContainer, () => {
   justify-content: center;
   align-items: center;
   position: relative;
-  background: #e6e6e6;
+  background: var(--bg-image-panel);
 }
 
 .vote-image-progress-bar {
@@ -497,7 +497,7 @@ watch(voteContainer, () => {
 }
 
 .vote-commons-button {
-  color: rgb(51, 102, 204);
+  color: var(--link-color);
 }
 
 .vote-section-title {
@@ -561,7 +561,7 @@ watch(voteContainer, () => {
 }
 
 .vote-details-list-item-text h3 {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--text-primary);
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.01em;
@@ -578,7 +578,7 @@ watch(voteContainer, () => {
   letter-spacing: 0.01em;
   margin: 0 0 0 0;
   line-height: 1.6em;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--text-secondary);
 }
 
 .vote-details-icon {
diff --git a/frontend/src/components/Vote/VoteYesNo.vue b/frontend/src/components/Vote/VoteYesNo.vue
index 66e15503..dc7c6677 100644
--- a/frontend/src/components/Vote/VoteYesNo.vue
+++ b/frontend/src/components/Vote/VoteYesNo.vue
@@ -443,7 +443,7 @@ watch(voteContainer, () => {
   justify-content: center;
   align-items: center;
   position: relative;
-  background: #e6e6e6;
+  background: var(--bg-image-panel);
 }
 
 .vote-image-progress-bar {
@@ -504,7 +504,7 @@ watch(voteContainer, () => {
 }
 
 .vote-commons-button {
-  color: rgb(51, 102, 204);
+  color: var(--link-color);
 }
 
 .vote-section-title {
@@ -568,7 +568,7 @@ watch(voteContainer, () => {
 }
 
 .vote-details-list-item-text h3 {
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--text-primary);
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.01em;
@@ -585,7 +585,7 @@ watch(voteContainer, () => {
   letter-spacing: 0.01em;
   margin: 0 0 0 0;
   line-height: 1.6em;
-  color: rgba(0, 0, 0, 0.54);
+  color: var(--text-secondary);
 }
 
 .vote-details-icon {

From eedff27354ebc7b9fc96c72cfcc2be1cce8bab0b Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:22:08 +0530
Subject: [PATCH 7/9] feat(theme): apply dark-mode styles to login, avatar and
 permission views

---
 frontend/src/components/LoginBox.vue           | 6 ++++--
 frontend/src/components/UserAvatarWithName.vue | 3 ++-
 frontend/src/views/PermissionDenied.vue        | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/LoginBox.vue b/frontend/src/components/LoginBox.vue
index 5b284ff3..63a4eb70 100644
--- a/frontend/src/components/LoginBox.vue
+++ b/frontend/src/components/LoginBox.vue
@@ -47,7 +47,8 @@ const redirectToLogin = () => {
   max-width: 400px;
   margin: 0 auto;
   padding: 20px;
-  background-color: #fff;
+  background-color: var(--bg-surface);
+  color: var(--text-primary);
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
@@ -57,12 +58,13 @@ const redirectToLogin = () => {
   font-weight: bold;
   margin-bottom: 36px;
   text-align: center;
+  color: var(--text-header);
 }
 
 .login-description,
 .account-instructions {
   font-size: 14px;
-  color: #666;
+  color: var(--text-muted);
   margin-bottom: 24px;
 }
 
diff --git a/frontend/src/components/UserAvatarWithName.vue b/frontend/src/components/UserAvatarWithName.vue
index 6ed2a4aa..38609d99 100644
--- a/frontend/src/components/UserAvatarWithName.vue
+++ b/frontend/src/components/UserAvatarWithName.vue
@@ -37,7 +37,8 @@ const sortedCoordinators = computed(() => {
 .user-avatar-item {
   display: flex;
   align-items: center;
-  background-color: #e0e0e0;
+  background-color: var(--bg-surface-alt);
+  color: var(--text-primary);
   padding: 0;
   padding-right: 12px;
   border-radius: 24px;
diff --git a/frontend/src/views/PermissionDenied.vue b/frontend/src/views/PermissionDenied.vue
index 6ebc5159..7471ebe5 100644
--- a/frontend/src/views/PermissionDenied.vue
+++ b/frontend/src/views/PermissionDenied.vue
@@ -23,7 +23,7 @@ import { CdxButton } from '@wikimedia/codex'
   align-items: center;
   text-align: center;
   min-height: calc(100vh - 116.5px);
-  background-color: #f8f9fa;
+  background-color: var(--bg-page);
   padding: 20px;
 }
 
@@ -36,6 +36,6 @@ import { CdxButton } from '@wikimedia/codex'
 .permission-denied p {
   font-size: 1.25rem;
   margin-bottom: 40px;
-  color: #6c757d;
+  color: var(--text-muted);
 }
 </style>

From dbd68e0d57b9ac8bd47c74ec37bfc4831f2b837a Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sat, 27 Jun 2026 14:34:15 +0530
Subject: [PATCH 8/9] style(theme): format main.css with prettier and tidy
 comments

---
 frontend/src/assets/main.css | 51 ++++++++++++++----------------------
 1 file changed, 19 insertions(+), 32 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 9ddd5a8c..ccdacec8 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,6 +1,4 @@
-/* ============================================================
-   CSS Custom Properties — Light mode (default)
-   ============================================================ */
+/* CSS Custom Properties: Light mode */
 :root {
   --bg-page: #fafafa;
   --bg-surface: #ffffff;
@@ -27,9 +25,7 @@
   --icon-color: #202122;
 }
 
-/* ============================================================
-   CSS Custom Properties — Dark mode overrides
-   ============================================================ */
+/* CSS Custom Properties: Dark mode overrides */
 [data-theme='dark'] {
   --bg-page: #1c1c1c;
   --bg-surface: #272727;
@@ -64,9 +60,7 @@
   --mix-blend-mode-blend: normal;
 }
 
-/* ============================================================
-   Global base reset
-   ============================================================ */
+/* Global base reset  */
 * {
   margin: 0;
   padding: 0;
@@ -164,14 +158,10 @@ div {
   min-width: 120px;
 }
 
-/* Highlight key info in cards */
 .information-card strong {
   color: var(--link-color);
 }
 
-/* ============================================================
-   Custom Toggle Switch
-   ============================================================ */
 .theme-switch-wrapper {
   display: flex;
   align-items: center;
@@ -223,11 +213,7 @@ input:checked + .slider::before {
   transform: translateX(22px);
 }
 
-/* ============================================================
-   Codex Component Overrides for Dark Mode
-   ============================================================ */
-
-/* --- Cards & Accordions --- */
+/* Cards & Accordions  */
 [data-theme='dark'] .cdx-card {
   background-color: var(--bg-surface) !important;
   color: var(--text-primary) !important;
@@ -276,7 +262,7 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* --- Text Inputs, Text Areas --- */
+/* Text Inputs, Text Areas  */
 [data-theme='dark'] .cdx-text-input__input,
 [data-theme='dark'] .cdx-text-area__textarea {
   background-color: var(--bg-surface-alt) !important;
@@ -289,7 +275,7 @@ input:checked + .slider::before {
   color: var(--text-muted) !important;
 }
 
-/* --- Labels & Fields --- */
+/* Labels & Fields */
 [data-theme='dark'] .cdx-label {
   color: var(--text-secondary) !important;
 }
@@ -302,7 +288,7 @@ input:checked + .slider::before {
   color: var(--text-muted) !important;
 }
 
-/* --- Select / Dropdowns --- */
+/* Select / Dropdowns */
 [data-theme='dark'] .cdx-select-vue__handle {
   background-color: var(--btn-normal-bg) !important;
   color: var(--text-primary) !important;
@@ -352,7 +338,7 @@ input:checked + .slider::before {
   color: inherit !important;
 }
 
-/* --- Buttons --- */
+/* Buttons */
 
 /* Quiet buttons — neutral by default.
    Only the action-specific rules below (progressive / destructive) add an accent
@@ -457,7 +443,7 @@ input:checked + .slider::before {
   color: #fff !important;
 }
 
-/* --- All SVGs/Icons inside Codex components --- */
+/* All SVGs/Icons inside Codex components */
 [data-theme='dark'] .cdx-button svg {
   fill: currentColor !important;
 }
@@ -471,7 +457,7 @@ input:checked + .slider::before {
   fill: currentColor !important;
 }
 
-/* --- Radio buttons & Checkboxes --- */
+/* Radio buttons & Checkboxes */
 [data-theme='dark'] .cdx-radio__label,
 [data-theme='dark'] .cdx-checkbox__label {
   color: var(--text-primary) !important;
@@ -486,7 +472,7 @@ input:checked + .slider::before {
   border-color: var(--link-color) !important;
 }
 
-/* --- CdxMultiselectLookup (Coordinator/Juror selection) --- */
+/* CdxMultiselectLookup (Coordinator/Juror selection) */
 [data-theme='dark'] .cdx-chip-input,
 [data-theme='dark'] .cdx-chip-input__chips,
 [data-theme='dark'] .cdx-multiselect-lookup {
@@ -522,7 +508,7 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* --- Dialog / Modal --- */
+/* Dialog / Modal */
 [data-theme='dark'] .cdx-dialog,
 [data-theme='dark'] .cdx-dialog__body {
   background-color: var(--bg-surface) !important;
@@ -543,13 +529,13 @@ input:checked + .slider::before {
   border-top-color: var(--border-footer) !important;
 }
 
-/* --- Tooltip --- */
+/*  Tooltip  */
 [data-theme='dark'] .cdx-tooltip {
   background-color: #555 !important;
   color: #fff !important;
 }
 
-/* --- Date Picker (vue-datepicker-next) --- */
+/* Date Picker (vue-datepicker-next) */
 
 /* The calendar/time icon inside the input */
 [data-theme='dark'] .mx-icon-calendar,
@@ -702,13 +688,13 @@ input:checked + .slider::before {
   border-color: var(--border-footer) !important;
 }
 
-/* --- CdxField description text --- */
+/* CdxField description text */
 [data-theme='dark'] .cdx-field .cdx-field__control,
 [data-theme='dark'] .cdx-field__help-text {
   color: var(--text-muted) !important;
 }
 
-/* --- Toast notifications --- */
+/* Toast notifications */
 /* Intentionally NOT themed. Each toast is an opaque coloured card from
    vue-toastification (success = green #4caf50, error = red #ff5252, info and
    warning too) with white text, legible on the dark page. Overriding the shared
@@ -716,7 +702,7 @@ input:checked + .slider::before {
    carry no !important) and flatten every toast to one grey, losing the
    success/error distinction. */
 
-/* --- Progress bar --- */
+/* Progress bar */
 [data-theme='dark'] .cdx-progress-bar {
   background-color: var(--bg-surface-alt) !important;
 }
@@ -725,7 +711,7 @@ input:checked + .slider::before {
   background-color: var(--link-color) !important;
 }
 
-/* --- Lookup Loading State Fix --- */
+/* Lookup Loading State Fix */
 [data-theme='dark']
   .cdx-multiselect-lookup--pending
   .cdx-chip-input:not(.cdx-chip-input--has-separate-input)
@@ -748,6 +734,7 @@ input:checked + .slider::before {
   ) !important;
   background-size: 40px 40px !important;
 }
+
 /* Absolute fallback for all quiet buttons (handles empty string actions) */
 [data-theme='dark'] .cdx-button--weight-quiet:hover,
 [data-theme='dark'] .cdx-button--weight-quiet:enabled:hover {

From 8741037b967ee35e1f41ea49826defceb210b230 Mon Sep 17 00:00:00 2001
From: Sanjai Siddharthan <sanjaisiddharth2002@gmail.com>
Date: Sun, 28 Jun 2026 10:16:29 +0530
Subject: [PATCH 9/9] removed comments in main.css

---
 frontend/src/assets/main.css | 63 ------------------------------------
 1 file changed, 63 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index ccdacec8..e9dd29cd 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,4 +1,3 @@
-/* CSS Custom Properties: Light mode */
 :root {
   --bg-page: #fafafa;
   --bg-surface: #ffffff;
@@ -25,7 +24,6 @@
   --icon-color: #202122;
 }
 
-/* CSS Custom Properties: Dark mode overrides */
 [data-theme='dark'] {
   --bg-page: #1c1c1c;
   --bg-surface: #272727;
@@ -50,17 +48,9 @@
   --btn-normal-text: #e0e0e0;
   --btn-normal-border: #555;
   --icon-color: #ccc;
-
-  /* Codex internal token. Codex applies `mix-blend-mode: multiply` to quiet
-     buttons (Logout, Accept, Decline, Save, …) and framed tabs on hover via
-     `var(--mix-blend-mode-blend, multiply)`. Multiply is tuned for light
-     backgrounds; over the dark page it blends a hovered button — background,
-     text and icon — toward black until it disappears. Neutralising the blend
-     here restores the hover state for every Codex component at once. */
   --mix-blend-mode-blend: normal;
 }
 
-/* Global base reset  */
 * {
   margin: 0;
   padding: 0;
@@ -213,7 +203,6 @@ input:checked + .slider::before {
   transform: translateX(22px);
 }
 
-/* Cards & Accordions  */
 [data-theme='dark'] .cdx-card {
   background-color: var(--bg-surface) !important;
   color: var(--text-primary) !important;
@@ -262,7 +251,6 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* Text Inputs, Text Areas  */
 [data-theme='dark'] .cdx-text-input__input,
 [data-theme='dark'] .cdx-text-area__textarea {
   background-color: var(--bg-surface-alt) !important;
@@ -275,7 +263,6 @@ input:checked + .slider::before {
   color: var(--text-muted) !important;
 }
 
-/* Labels & Fields */
 [data-theme='dark'] .cdx-label {
   color: var(--text-secondary) !important;
 }
@@ -288,7 +275,6 @@ input:checked + .slider::before {
   color: var(--text-muted) !important;
 }
 
-/* Select / Dropdowns */
 [data-theme='dark'] .cdx-select-vue__handle {
   background-color: var(--btn-normal-bg) !important;
   color: var(--text-primary) !important;
@@ -300,7 +286,6 @@ input:checked + .slider::before {
   border-color: var(--link-color) !important;
 }
 
-/* Fix the dropdown arrow icon and menu indicators */
 [data-theme='dark'] .cdx-select-vue__handle .cdx-icon svg,
 [data-theme='dark'] .cdx-select-vue__indicator svg,
 [data-theme='dark'] .cdx-select-vue__handle svg,
@@ -309,7 +294,6 @@ input:checked + .slider::before {
   color: var(--icon-color) !important;
 }
 
-/* Menu / Dropdown popup */
 [data-theme='dark'] .cdx-menu {
   background-color: var(--bg-surface) !important;
   border-color: var(--border-color) !important;
@@ -338,15 +322,6 @@ input:checked + .slider::before {
   color: inherit !important;
 }
 
-/* Buttons */
-
-/* Quiet buttons — neutral by default.
-   Only the action-specific rules below (progressive / destructive) add an accent
-   colour. Painting every quiet button with --link-color here would also highlight
-   empty-action toggles (e.g. an unselected Accept/Decline or gallery-size button,
-   whose `:action` resolves to ''), making both options look selected. Codex does
-   the same in light mode: a quiet button stays neutral until it gets a
-   progressive/destructive action. */
 [data-theme='dark'] .cdx-button--weight-quiet {
   color: var(--text-primary) !important;
 }
@@ -356,7 +331,6 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* Normal weight buttons — the main issue */
 [data-theme='dark'] .cdx-button--weight-normal {
   background-color: var(--btn-normal-bg) !important;
   color: var(--btn-normal-text) !important;
@@ -368,7 +342,6 @@ input:checked + .slider::before {
   color: #fff !important;
 }
 
-/* Progressive primary buttons */
 [data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-primary {
   background-color: #3366cc !important;
   color: #fff !important;
@@ -380,7 +353,6 @@ input:checked + .slider::before {
   border-color: #447ff5 !important;
 }
 
-/* Destructive primary buttons */
 [data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-primary {
   background-color: #d33 !important;
   color: #fff !important;
@@ -393,7 +365,6 @@ input:checked + .slider::before {
   border-color: #ff4d4d !important;
 }
 
-/* Progressive normal buttons */
 [data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-normal {
   background-color: rgba(51, 102, 204, 0.15) !important;
   color: var(--link-color) !important;
@@ -406,7 +377,6 @@ input:checked + .slider::before {
   color: #fff !important;
 }
 
-/* Destructive quiet buttons (e.g. Logout) */
 [data-theme='dark'] .cdx-button--action-destructive.cdx-button--weight-quiet {
   color: #ff6b6b !important;
 }
@@ -417,7 +387,6 @@ input:checked + .slider::before {
   color: #ff8a8a !important;
 }
 
-/* Default action quiet buttons (and buttons lacking an action class) */
 [data-theme='dark'] .cdx-button--action-default.cdx-button--weight-quiet,
 [data-theme='dark'] .cdx-button--weight-quiet:not([class*='--action-']) {
   color: var(--text-primary) !important;
@@ -431,7 +400,6 @@ input:checked + .slider::before {
   color: #ffffff !important;
 }
 
-/* Progressive quiet buttons (e.g. Accept selected) */
 [data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet {
   background-color: transparent !important;
   color: var(--link-color) !important;
@@ -443,7 +411,6 @@ input:checked + .slider::before {
   color: #fff !important;
 }
 
-/* All SVGs/Icons inside Codex components */
 [data-theme='dark'] .cdx-button svg {
   fill: currentColor !important;
 }
@@ -452,12 +419,10 @@ input:checked + .slider::before {
   fill: var(--icon-color) !important;
 }
 
-/* Material design icons inside dark mode */
 [data-theme='dark'] .material-design-icon svg {
   fill: currentColor !important;
 }
 
-/* Radio buttons & Checkboxes */
 [data-theme='dark'] .cdx-radio__label,
 [data-theme='dark'] .cdx-checkbox__label {
   color: var(--text-primary) !important;
@@ -472,7 +437,6 @@ input:checked + .slider::before {
   border-color: var(--link-color) !important;
 }
 
-/* CdxMultiselectLookup (Coordinator/Juror selection) */
 [data-theme='dark'] .cdx-chip-input,
 [data-theme='dark'] .cdx-chip-input__chips,
 [data-theme='dark'] .cdx-multiselect-lookup {
@@ -508,7 +472,6 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* Dialog / Modal */
 [data-theme='dark'] .cdx-dialog,
 [data-theme='dark'] .cdx-dialog__body {
   background-color: var(--bg-surface) !important;
@@ -529,15 +492,11 @@ input:checked + .slider::before {
   border-top-color: var(--border-footer) !important;
 }
 
-/*  Tooltip  */
 [data-theme='dark'] .cdx-tooltip {
   background-color: #555 !important;
   color: #fff !important;
 }
 
-/* Date Picker (vue-datepicker-next) */
-
-/* The calendar/time icon inside the input */
 [data-theme='dark'] .mx-icon-calendar,
 [data-theme='dark'] .mx-icon-clear {
   color: var(--text-muted) !important;
@@ -547,7 +506,6 @@ input:checked + .slider::before {
   color: var(--text-header) !important;
 }
 
-/* Date picker input field */
 [data-theme='dark'] .mx-input {
   background-color: var(--bg-surface-alt) !important;
   color: var(--text-primary) !important;
@@ -560,7 +518,6 @@ input:checked + .slider::before {
   border-color: var(--link-color) !important;
 }
 
-/* Date picker popup/calendar */
 [data-theme='dark'] .mx-datepicker-main {
   background-color: var(--bg-surface) !important;
   color: var(--text-primary) !important;
@@ -576,7 +533,6 @@ input:checked + .slider::before {
   border-color: var(--border-footer) !important;
 }
 
-/* Calendar navigation buttons */
 [data-theme='dark'] .mx-btn {
   color: var(--text-secondary) !important;
   border-color: var(--border-color) !important;
@@ -591,7 +547,6 @@ input:checked + .slider::before {
   color: var(--text-primary) !important;
 }
 
-/* Calendar header arrows (border-based icons) */
 [data-theme='dark'] .mx-icon-left::before,
 [data-theme='dark'] .mx-icon-right::before,
 [data-theme='dark'] .mx-icon-double-left::before,
@@ -601,17 +556,14 @@ input:checked + .slider::before {
   border-color: var(--text-secondary) !important;
 }
 
-/* Calendar header labels */
 [data-theme='dark'] .mx-calendar-header-label {
   color: var(--text-primary) !important;
 }
 
-/* Table header (day names) */
 [data-theme='dark'] .mx-table th {
   color: var(--text-muted) !important;
 }
 
-/* Calendar day cells */
 [data-theme='dark'] .mx-calendar-content .cell {
   color: var(--text-primary) !important;
 }
@@ -640,7 +592,6 @@ input:checked + .slider::before {
   color: var(--link-color) !important;
 }
 
-/* Time picker */
 [data-theme='dark'] .mx-time {
   background-color: var(--bg-surface) !important;
 }
@@ -683,26 +634,15 @@ input:checked + .slider::before {
   color: var(--link-color) !important;
 }
 
-/* Calendar adjacent borders */
 [data-theme='dark'] .mx-calendar + .mx-calendar {
   border-color: var(--border-footer) !important;
 }
 
-/* CdxField description text */
 [data-theme='dark'] .cdx-field .cdx-field__control,
 [data-theme='dark'] .cdx-field__help-text {
   color: var(--text-muted) !important;
 }
 
-/* Toast notifications */
-/* Intentionally NOT themed. Each toast is an opaque coloured card from
-   vue-toastification (success = green #4caf50, error = red #ff5252, info and
-   warning too) with white text, legible on the dark page. Overriding the shared
-   `.Vue-Toastification__toast` background would beat the per-type colours (they
-   carry no !important) and flatten every toast to one grey, losing the
-   success/error distinction. */
-
-/* Progress bar */
 [data-theme='dark'] .cdx-progress-bar {
   background-color: var(--bg-surface-alt) !important;
 }
@@ -711,7 +651,6 @@ input:checked + .slider::before {
   background-color: var(--link-color) !important;
 }
 
-/* Lookup Loading State Fix */
 [data-theme='dark']
   .cdx-multiselect-lookup--pending
   .cdx-chip-input:not(.cdx-chip-input--has-separate-input)
@@ -735,14 +674,12 @@ input:checked + .slider::before {
   background-size: 40px 40px !important;
 }
 
-/* Absolute fallback for all quiet buttons (handles empty string actions) */
 [data-theme='dark'] .cdx-button--weight-quiet:hover,
 [data-theme='dark'] .cdx-button--weight-quiet:enabled:hover {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: #ffffff !important;
 }
 
-/* Redefine specific quiet button hovers after the fallback so they win */
 [data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:hover,
 [data-theme='dark'] .cdx-button--action-progressive.cdx-button--weight-quiet:enabled:hover {
   background-color: rgba(51, 102, 204, 0.2) !important;