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/assets/main.css b/frontend/src/assets/main.css
index b8b9e11c..e9dd29cd 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,3 +1,56 @@
+: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;
+}
+
+[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;
+  --mix-blend-mode-blend: normal;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -5,8 +58,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 +113,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 +141,553 @@
 
 .date-time-inputs .cdx-label {
   font-size: 14px !important;
-  color: gray !important;
+  color: var(--text-muted) !important;
 }
 
 .cdx-select-vue__handle {
   min-width: 120px;
 }
+
+.information-card strong {
+  color: var(--link-color);
+}
+
+.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);
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-theme='dark'] .cdx-button svg {
+  fill: currentColor !important;
+}
+
+[data-theme='dark'] .cdx-icon svg {
+  fill: var(--icon-color) !important;
+}
+
+[data-theme='dark'] .material-design-icon svg {
+  fill: currentColor !important;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-theme='dark'] .cdx-tooltip {
+  background-color: #555 !important;
+  color: #fff !important;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-theme='dark'] .mx-calendar-header-label {
+  color: var(--text-primary) !important;
+}
+
+[data-theme='dark'] .mx-table th {
+  color: var(--text-muted) !important;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-theme='dark'] .mx-calendar + .mx-calendar {
+  border-color: var(--border-footer) !important;
+}
+
+[data-theme='dark'] .cdx-field .cdx-field__control,
+[data-theme='dark'] .cdx-field__help-text {
+  color: var(--text-muted) !important;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
+
+[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;
+}
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 {
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 {
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/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%;
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/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 {
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 }
+})
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>