From bb5446ad7087be652837ca403cb616d2917b8f65 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 14:02:43 +0200
Subject: [PATCH 01/30] refactor: migrate basic components to bootstrap theme
 variables

---
 frontend/src/basic/Sidebar.vue                | 34 +++++++++----------
 frontend/src/basic/Table.vue                  |  2 +-
 frontend/src/basic/editor/CommandEditor.vue   |  2 +-
 frontend/src/basic/editor/JsonEditor.vue      |  2 +-
 frontend/src/basic/form/Choice.vue            |  4 +--
 .../basic/graph/WorkflowStepInspectModal.vue  |  6 ++--
 .../basic/modal/ApplySkillSetupStepper.vue    |  2 +-
 .../src/basic/modal/ConfigurationModal.vue    |  6 ++--
 .../src/basic/modal/GeneralSettingStep.vue    | 16 ++++-----
 frontend/src/basic/modal/InformationModal.vue | 12 +++----
 frontend/src/basic/modal/PlaceholdersStep.vue | 20 +++++------
 frontend/src/basic/modal/ServicesStep.vue     | 18 +++++-----
 frontend/src/basic/modal/StepTemplate.vue     |  2 +-
 frontend/src/basic/modal/StepperModal.vue     |  4 +--
 .../src/basic/modal/skills/InputConfirm.vue   |  6 ++--
 .../src/basic/modal/skills/InputFiles.vue     |  4 +--
 .../src/basic/modal/skills/InputGroup.vue     |  2 +-
 frontend/src/basic/modal/skills/InputMap.vue  |  2 +-
 frontend/src/basic/navigation/Topbar.vue      | 10 +++---
 19 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/frontend/src/basic/Sidebar.vue b/frontend/src/basic/Sidebar.vue
index d6a537faf..f2c7eeffd 100644
--- a/frontend/src/basic/Sidebar.vue
+++ b/frontend/src/basic/Sidebar.vue
@@ -521,8 +521,8 @@ export default {
 /* ===== MAIN CONTAINER STYLES ===== */
 .sidebar-wrapper {
   position: relative;
-  background-color: #f8f9fa;
-  border-left: 1px solid #ddd;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
+  border-left: 1px solid var(--bs-border-color, #ddd);
   flex-shrink: 0;
 }
 
@@ -560,7 +560,7 @@ export default {
 }
 
 #sidepane {
-  background-color: #e6e6e6;
+  background-color: var(--bs-secondary-bg, #e6e6e6);
   width: 100%;
   height: 100%;
   display: flex;
@@ -576,8 +576,8 @@ export default {
   display: flex;
   align-items: stretch;
   padding: 10px;
-  border-bottom: 1px solid #ddd;
-  background-color: #ffff;
+  border-bottom: 1px solid var(--bs-border-color, #ddd);
+  background-color: var(--bs-body-bg, #ffffff);
   flex-shrink: 0;
 }
 
@@ -590,23 +590,23 @@ export default {
   border: 1px solid transparent;
   border-radius: 0.375rem 0.375rem 0 0;
   padding: 8px 8px;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   transition: all 0.2s ease-in-out;
 }
 
 .sidebar-header .nav-tabs .nav-link:hover {
-  border-color: #e9ecef #e9ecef #dee2e6;
-  background-color: #f8f9fa;
+  border-color: var(--bs-border-color, #dee2e6);
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
 }
 
 .sidebar-header .nav-tabs .nav-link.active {
-  color: #0d6efd;
-  background-color: #fff;
-  border-color: #dee2e6 #dee2e6 #fff;
+  color: var(--bs-primary, #0d6efd);
+  background-color: var(--bs-body-bg, #fff);
+  border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #fff);
 }
 
 .sidebar-header .nav-tabs .nav-link.disabled {
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
   background-color: transparent;
   border-color: transparent;
   cursor: not-allowed;
@@ -632,8 +632,8 @@ export default {
 .sidebar-action-button:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
-  background-color: #f8f9fa !important;
-  border-color: #dee2e6 !important;
+  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
+  border-color: var(--bs-border-color, #dee2e6) !important;
 }
 
 .sidebar-action-button:active {
@@ -658,13 +658,13 @@ export default {
 /* ===== DROPDOWN STYLES ===== */
 .dropdown-menu {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--bs-border-color, #dee2e6);
   border-radius: 8px;
   padding: 4px
 }
 
 .dropdown-item:hover {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   transform: translateY(-1px);
   transition: all 0.2s ease;
 }
@@ -680,7 +680,7 @@ export default {
 
 #addPageNote .btn {
   border: none;
-  color: #575757;
+  color: var(--bs-secondary-color, #575757);
 }
 
 .nav-text {
diff --git a/frontend/src/basic/Table.vue b/frontend/src/basic/Table.vue
index db408c68f..16d9dc103 100644
--- a/frontend/src/basic/Table.vue
+++ b/frontend/src/basic/Table.vue
@@ -1145,7 +1145,7 @@ export default {
   cursor: not-allowed;
   pointer-events: initial;
   opacity: 0.5;
-  background-color: #d8d8d8;
+  background-color: var(--bs-secondary-bg, #d8d8d8);
   border: 1px solid gray;
 }
 
diff --git a/frontend/src/basic/editor/CommandEditor.vue b/frontend/src/basic/editor/CommandEditor.vue
index 4621bec40..e59140026 100644
--- a/frontend/src/basic/editor/CommandEditor.vue
+++ b/frontend/src/basic/editor/CommandEditor.vue
@@ -130,7 +130,7 @@
       </div>
       <div
         v-if="history.length > 0 && history.length > configEditor.defaultShowCount"
-        class="w-100 text-center bg-light"
+        class="w-100 text-center bg-body-tertiary"
         :title="`${showHistory ? 'Hide' : 'Show'} more`"
         @click="showHistory=!showHistory"
       >
diff --git a/frontend/src/basic/editor/JsonEditor.vue b/frontend/src/basic/editor/JsonEditor.vue
index f1f70b667..a93a49fd4 100644
--- a/frontend/src/basic/editor/JsonEditor.vue
+++ b/frontend/src/basic/editor/JsonEditor.vue
@@ -8,7 +8,7 @@
   >
     <div
         ref="content"
-        class="bg-light border-start"
+        class="bg-body-tertiary border-start"
         @dblclick="toEditMode(true)"
     >
       <div v-show="showControls" class="button-group position-absolute top-0 end-0 opacity-50 pe-1">
diff --git a/frontend/src/basic/form/Choice.vue b/frontend/src/basic/form/Choice.vue
index fc1ed4937..2af598942 100644
--- a/frontend/src/basic/form/Choice.vue
+++ b/frontend/src/basic/form/Choice.vue
@@ -390,10 +390,10 @@ export default {
 
 <style scoped>
 .bi-gear {
-  color: #6c757d; /* Bootstrap muted color */
+  color: var(--bs-secondary-color, #6c757d); /* Bootstrap muted color */
   cursor: pointer;
 }
 .bi-gear:hover {
-  color: #0d6efd; /* Bootstrap primary color */
+  color: var(--bs-primary, #0d6efd); /* Bootstrap primary color */
 }
 </style>
diff --git a/frontend/src/basic/graph/WorkflowStepInspectModal.vue b/frontend/src/basic/graph/WorkflowStepInspectModal.vue
index eaf60d09d..9c7d7aa36 100644
--- a/frontend/src/basic/graph/WorkflowStepInspectModal.vue
+++ b/frontend/src/basic/graph/WorkflowStepInspectModal.vue
@@ -166,7 +166,7 @@ export default {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
   border-bottom: 1px solid #dee2e6;
   padding-bottom: 0.25rem;
   margin-bottom: 0.5rem;
@@ -182,7 +182,7 @@ export default {
 
 .info-grid dt {
   font-weight: 500;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-size: 0.875rem;
   align-self: start;
   padding-top: 0.1rem;
@@ -195,7 +195,7 @@ export default {
 }
 
 .config-block {
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border: 1px solid #dee2e6;
   border-radius: 0.375rem;
   padding: 0.75rem 1rem;
diff --git a/frontend/src/basic/modal/ApplySkillSetupStepper.vue b/frontend/src/basic/modal/ApplySkillSetupStepper.vue
index 38835a309..74ff8c4e1 100644
--- a/frontend/src/basic/modal/ApplySkillSetupStepper.vue
+++ b/frontend/src/basic/modal/ApplySkillSetupStepper.vue
@@ -339,6 +339,6 @@ export default {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 </style>
diff --git a/frontend/src/basic/modal/ConfigurationModal.vue b/frontend/src/basic/modal/ConfigurationModal.vue
index 90f495bd8..76f39d54e 100644
--- a/frontend/src/basic/modal/ConfigurationModal.vue
+++ b/frontend/src/basic/modal/ConfigurationModal.vue
@@ -247,15 +247,15 @@ export default {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 
 .text-secondary {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 
 .short-preview {
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border: 1px solid #ddd;
   border-radius: 0.5rem;
   font-size: 14px;
diff --git a/frontend/src/basic/modal/GeneralSettingStep.vue b/frontend/src/basic/modal/GeneralSettingStep.vue
index 14bc8544a..86908f6ed 100644
--- a/frontend/src/basic/modal/GeneralSettingStep.vue
+++ b/frontend/src/basic/modal/GeneralSettingStep.vue
@@ -102,7 +102,7 @@ export default {
 }
 
 .section-title {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
@@ -110,14 +110,14 @@ export default {
 }
 
 .config-fields {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
 }
 
 .general-settings {
-  background-color: #ffffff;
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
@@ -125,14 +125,14 @@ export default {
 
 .setting-item {
   padding: 0.75rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
 }
 
 .form-label {
   font-weight: 500;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   margin-bottom: 0.5rem;
 }
 
@@ -141,7 +141,7 @@ export default {
 }
 
 .form-control:focus {
-  border-color: #0d6efd;
+  border-color: var(--bs-primary, #0d6efd);
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
@@ -150,8 +150,8 @@ export default {
 }
 
 .form-check-input:checked {
-  background-color: #0d6efd;
-  border-color: #0d6efd;
+  background-color: var(--bs-primary, #0d6efd);
+  border-color: var(--bs-primary, #0d6efd);
 }
 
 .form-text {
diff --git a/frontend/src/basic/modal/InformationModal.vue b/frontend/src/basic/modal/InformationModal.vue
index c68d2b1d7..81ad1564a 100644
--- a/frontend/src/basic/modal/InformationModal.vue
+++ b/frontend/src/basic/modal/InformationModal.vue
@@ -93,7 +93,7 @@ export default {
 .information-container {
   max-height: 400px;
   overflow-y: auto;
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.5rem;
 }
 
@@ -107,15 +107,15 @@ export default {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 
 .text-secondary {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 
 .text-muted {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 
 .fw-bold {
@@ -131,8 +131,8 @@ export default {
 }
 
 .btn-outline-secondary:hover {
-  background-color: #6c757d;
-  color: #fff;
+  background-color: var(--bs-secondary-color, #6c757d);
+  color: var(--bs-body-color, #fff);
 }
 </style>
 
diff --git a/frontend/src/basic/modal/PlaceholdersStep.vue b/frontend/src/basic/modal/PlaceholdersStep.vue
index 1a5b91237..dfbe2963f 100644
--- a/frontend/src/basic/modal/PlaceholdersStep.vue
+++ b/frontend/src/basic/modal/PlaceholdersStep.vue
@@ -494,7 +494,7 @@ export default {
 }
 
 .section-title {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
@@ -502,7 +502,7 @@ export default {
 }
 
 .short-preview {
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border: 1px solid #ddd;
   border-radius: 0.5rem;
   padding: 1rem;
@@ -514,7 +514,7 @@ export default {
 }
 
 .legend {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
@@ -536,14 +536,14 @@ export default {
 }
 
 .placeholders-config {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
 }
 
 .placeholder-item {
-  background-color: #ffffff;
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
@@ -564,7 +564,7 @@ export default {
 }
 
 .placeholder-type {
-  background-color: #6c757d;
+  background-color: var(--bs-secondary-color, #6c757d);
   color: white;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
@@ -575,14 +575,14 @@ export default {
 
 .comparison-inputs,
 .single-input {
-  background-color: #f1f3f4;
+  background-color: var(--bs-secondary-bg, #f1f3f4);
   padding: 0.75rem;
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
 }
 
 .input-group {
-  background-color: #ffffff;
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 0.5rem;
   border-radius: 0.25rem;
   border: 1px solid #dee2e6;
@@ -590,7 +590,7 @@ export default {
 
 .form-label {
   font-weight: 500;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   margin-bottom: 0.5rem;
 }
 
@@ -599,7 +599,7 @@ export default {
 }
 
 .form-control:focus {
-  border-color: #0d6efd;
+  border-color: var(--bs-primary, #0d6efd);
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
diff --git a/frontend/src/basic/modal/ServicesStep.vue b/frontend/src/basic/modal/ServicesStep.vue
index 1a29187b1..52c12102b 100644
--- a/frontend/src/basic/modal/ServicesStep.vue
+++ b/frontend/src/basic/modal/ServicesStep.vue
@@ -269,7 +269,7 @@ export default {
 }
 
 .section-title {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
@@ -277,42 +277,42 @@ export default {
 }
 
 .services-config {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
 }
 
 .skill-item {
-  background-color: #ffffff;
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #e9ecef;
 }
 
 .skill-selection {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 0.75rem;
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
 }
 
 .input-mappings {
-  background-color: #f1f3f4;
+  background-color: var(--bs-secondary-bg, #f1f3f4);
   padding: 0.75rem;
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
 }
 
 .input-title {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   margin-bottom: 0.75rem;
   font-size: 0.9rem;
 }
 
 .input-mapping {
-  background-color: #ffffff;
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 0.5rem;
   border-radius: 0.25rem;
   border: 1px solid #dee2e6;
@@ -320,7 +320,7 @@ export default {
 
 .form-label {
   font-weight: 500;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   margin-bottom: 0.5rem;
 }
 
@@ -329,7 +329,7 @@ export default {
 }
 
 .form-control:focus {
-  border-color: #0d6efd;
+  border-color: var(--bs-primary, #0d6efd);
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
diff --git a/frontend/src/basic/modal/StepTemplate.vue b/frontend/src/basic/modal/StepTemplate.vue
index aeabfd0e9..d5911068c 100644
--- a/frontend/src/basic/modal/StepTemplate.vue
+++ b/frontend/src/basic/modal/StepTemplate.vue
@@ -32,7 +32,7 @@ export default {
 }
 
 .step-template h5 {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
diff --git a/frontend/src/basic/modal/StepperModal.vue b/frontend/src/basic/modal/StepperModal.vue
index 877b79126..7ac0fc670 100644
--- a/frontend/src/basic/modal/StepperModal.vue
+++ b/frontend/src/basic/modal/StepperModal.vue
@@ -203,7 +203,7 @@ export default {
     left: 0;
     right: 0;
     height: 2px;
-    background-color: #ccc;
+    background-color: var(--bs-secondary-bg, #ccc);
   }
 }
 
@@ -235,7 +235,7 @@ export default {
 }
 
 .stepper div.active {
-  --btn-color: #0d6efd;
+  --btn-color: var(--bs-primary, #0d6efd);
   border-color: var(--btn-color);
 
   &:before {
diff --git a/frontend/src/basic/modal/skills/InputConfirm.vue b/frontend/src/basic/modal/skills/InputConfirm.vue
index a1f4a5667..0807d9b4e 100644
--- a/frontend/src/basic/modal/skills/InputConfirm.vue
+++ b/frontend/src/basic/modal/skills/InputConfirm.vue
@@ -103,7 +103,7 @@ export default {
 
 <style scoped>
 .confirmation-step {
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   padding: 20px;
   border-radius: 8px;
 }
@@ -125,7 +125,7 @@ export default {
 .confirmation-section p,
 .confirmation-section ul {
   margin-bottom: 0;
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
 }
 
 .confirmation-section .list-unstyled li {
@@ -133,6 +133,6 @@ export default {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/basic/modal/skills/InputFiles.vue b/frontend/src/basic/modal/skills/InputFiles.vue
index 147524326..126a47e79 100644
--- a/frontend/src/basic/modal/skills/InputFiles.vue
+++ b/frontend/src/basic/modal/skills/InputFiles.vue
@@ -305,11 +305,11 @@ export default {
 
 <style scoped>
 .selection-summary-custom {
-  background-color: #e7f3ff;
+  background-color: var(--bs-primary-bg-subtle, #e7f3ff);
   border: 1px solid #007bff;
   border-radius: 0.375rem;
   padding: 0.75rem 1rem;
-  color: #007bff;
+  color: var(--bs-primary, #007bff);
   font-weight: normal;
   line-height: 1.5;
 }
diff --git a/frontend/src/basic/modal/skills/InputGroup.vue b/frontend/src/basic/modal/skills/InputGroup.vue
index 3ce26627f..f48d67811 100644
--- a/frontend/src/basic/modal/skills/InputGroup.vue
+++ b/frontend/src/basic/modal/skills/InputGroup.vue
@@ -183,7 +183,7 @@ export default {
 
 <style scoped>
 .validation-group {
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
 }
 
 .form-label {
diff --git a/frontend/src/basic/modal/skills/InputMap.vue b/frontend/src/basic/modal/skills/InputMap.vue
index b594452d7..530507d58 100644
--- a/frontend/src/basic/modal/skills/InputMap.vue
+++ b/frontend/src/basic/modal/skills/InputMap.vue
@@ -545,6 +545,6 @@ export default {
 }
 
 .text-secondary {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 </style>
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index c4889116e..1fb71cb18 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -4,7 +4,7 @@
     ref="topbar"
     class="nav-container"
   >
-    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border-bottom">
+    <nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary border-bottom">
       <div class="container-fluid">
         <button
           id="backButton"
@@ -290,9 +290,9 @@ body.sidebar-exists #backButton {
   display: flex;
   align-items: center;
   padding: 2px 10px;
-  background: #f5f5f5;
-  border: 1px solid darkblue;
-  color: darkblue;
+  background: var(--bs-tertiary-bg, #f5f5f5);
+  border: 1px solid var(--bs-primary, darkblue);
+  color: var(--bs-primary, darkblue);
   border-radius: 4px;
   vertical-align: middle;
   max-width: 180px;
@@ -308,7 +308,7 @@ body.sidebar-exists #backButton {
 }
 
 .project-box:hover {
-  background-color: darkblue;
+  background-color: var(--bs-primary, darkblue);
   color: white;
 }
 

From d882a6335d3100bfcb77888955cd128fb030f676 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 14:02:44 +0200
Subject: [PATCH 02/30] refactor: migrate feature components to bootstrap theme
 variables

---
 frontend/src/components/Document.vue          |  4 +--
 frontend/src/components/Study.vue             |  4 +--
 .../annotator/pdfViewer/PDFToolbar.vue        |  6 ++--
 .../components/annotator/sidebar/Sidebar.vue  |  6 ++--
 .../annotator/sidebar/card/AnnoCard.vue       |  6 ++--
 .../annotator/sidebar/card/Card.vue           |  4 +--
 .../annotator/sidebar/card/Comment.vue        |  2 +-
 .../components/common/FloatingInfoPanel.vue   |  8 ++---
 .../components/common/ReadOnlyIndicator.vue   |  2 +-
 .../components/dashboard/Configurations.vue   |  8 ++---
 .../components/dashboard/SessionOverview.vue  |  2 +-
 .../src/components/dashboard/Workflows.vue    |  2 +-
 .../dashboard/navigation/Sidebar.vue          | 34 +++++++++----------
 .../projects/export/StepConfirmDownload.vue   |  2 +-
 .../dashboard/projects/export/StepOptions.vue |  2 +-
 .../dashboard/study/ManageStudiesModal.vue    | 12 +++----
 .../dashboard/submission/AssignModal.vue      |  2 +-
 .../dashboard/submission/ImportModal.vue      |  2 +-
 .../submission/ValidatorSelector.vue          |  2 +-
 .../dashboard/users/ImportModal.vue           |  8 ++---
 .../src/components/editor/editor/Editor.vue   |  4 +--
 .../editor/sidebar/Configurator.vue           |  4 +--
 .../editor/sidebar/TemplateConfigurator.vue   |  4 +--
 .../editor/template/TemplateEditor.vue        |  2 +-
 .../src/components/stepmodal/StepModal.vue    |  2 +-
 .../stepmodal/placeholders/Text.vue           |  4 +--
 frontend/src/components/study/Assessment.vue  |  4 +--
 .../study/assessment/AssessmentCriteria.vue   |  6 ++--
 28 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/frontend/src/components/Document.vue b/frontend/src/components/Document.vue
index a1bd5140e..b1a6932bd 100644
--- a/frontend/src/components/Document.vue
+++ b/frontend/src/components/Document.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Error state when document not found or deleted -->
   <div v-if="documentError" class="document-error-page d-flex flex-column align-items-center justify-content-center min-vh-100">
-    <div class="error-card text-center p-5 bg-white rounded shadow">
+    <div class="error-card text-center p-5 bg-body rounded shadow">
       <i class="bi bi-file-earmark-x text-danger" style="font-size: 5rem;"></i>
       <h2 class="mt-4 text-danger">{{ documentError.title }}</h2>
       <p class="text-muted mb-4">{{ documentError.message }}</p>
@@ -113,7 +113,7 @@ export default {
 }
 
 .document-error-page {
-  background-color: #f5f5f5;
+  background-color: var(--bs-tertiary-bg, #f5f5f5);
   min-height: 100vh;
 }
 
diff --git a/frontend/src/components/Study.vue b/frontend/src/components/Study.vue
index 0950fb80d..845a07106 100644
--- a/frontend/src/components/Study.vue
+++ b/frontend/src/components/Study.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- Error state -->
   <div v-if="studyError" class="study-error-page d-flex flex-column align-items-center justify-content-center min-vh-100">
-    <div class="error-card text-center p-5 bg-white rounded shadow">
+    <div class="error-card text-center p-5 bg-body rounded shadow">
       <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 5rem;"></i>
       <h2 class="mt-4 text-danger">{{ studyError.title }}</h2>
       <p class="text-muted mb-4">{{ studyError.message }}</p>
@@ -675,7 +675,7 @@ export default {
 }
 
 .study-error-page {
-  background-color: #f5f5f5;
+  background-color: var(--bs-tertiary-bg, #f5f5f5);
   min-height: 100vh;
 }
 .error-card {
diff --git a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
index 8bb797c33..a95763675 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
@@ -136,7 +136,7 @@ export default {
   position: sticky;
   top: 0;
   z-index: 200;
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border-bottom: 1px solid #ddd;
   display: flex;
   align-items: center;
@@ -160,7 +160,7 @@ export default {
 }
 
 .pdf-toolbar :deep(.btn:hover) {
-  background-color: #e9ecef;
+  background-color: var(--bs-secondary-bg, #e9ecef);
   transform: translateY(-2px);
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
@@ -182,7 +182,7 @@ export default {
 }
 
 .toolbar-toggle-btn:hover {
-  background: #e9ecef;
+  background: var(--bs-secondary-bg, #e9ecef);
   transform: scale(1.1);
 }
 
diff --git a/frontend/src/components/annotator/sidebar/Sidebar.vue b/frontend/src/components/annotator/sidebar/Sidebar.vue
index 718cfe386..ec9eac41c 100644
--- a/frontend/src/components/annotator/sidebar/Sidebar.vue
+++ b/frontend/src/components/annotator/sidebar/Sidebar.vue
@@ -388,7 +388,7 @@ export default {
 
 #addPageNote .btn {
   border: none;
-  color: #575757;
+  color: var(--bs-secondary-color, #575757);
 }
 
 .readonly-notice {
@@ -397,7 +397,7 @@ export default {
 }
 
 .readonly-notice .card {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
@@ -407,7 +407,7 @@ export default {
 }
 
 .readonly-notice .card-title {
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   font-size: 0.875rem;
 }
diff --git a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
index 7c8cc25c2..fd92c9fc5 100644
--- a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
+++ b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
@@ -689,7 +689,7 @@ export default {
 
 .replies {
   font-size: smaller;
-  color: #929292;
+  color: var(--bs-secondary-color, #929292);
 }
 
 @keyframes flickerAnimation {
@@ -760,13 +760,13 @@ export default {
 }
 
 .header-hoverable:hover {
-  background-color: #e9ecef !important;
+  background-color: var(--bs-secondary-bg, #e9ecef) !important;
   border-radius: 4px;
 }
 
 .card-header {
   font-size: smaller;
-  color: #929292;
+  color: var(--bs-secondary-color, #929292);
   transition: background-color 0.2s ease;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/annotator/sidebar/card/Card.vue b/frontend/src/components/annotator/sidebar/card/Card.vue
index 54294ba56..6db668024 100644
--- a/frontend/src/components/annotator/sidebar/card/Card.vue
+++ b/frontend/src/components/annotator/sidebar/card/Card.vue
@@ -174,12 +174,12 @@ export default {
 
 .card-body {
   font-size: smaller;
-  color: #929292;
+  color: var(--bs-secondary-color, #929292);
 }
 
 .card-header {
   font-size: smaller;
-  color: #929292;
+  color: var(--bs-secondary-color, #929292);
 }
 
 .card-footer {
diff --git a/frontend/src/components/annotator/sidebar/card/Comment.vue b/frontend/src/components/annotator/sidebar/card/Comment.vue
index f057d3acd..2bd33d674 100644
--- a/frontend/src/components/annotator/sidebar/card/Comment.vue
+++ b/frontend/src/components/annotator/sidebar/card/Comment.vue
@@ -513,7 +513,7 @@ export default {
 
 <style scoped>
 .comment {
-  color: #666666;
+  color: var(--bs-secondary-color, #666)666;
   font-style: normal;
   box-shadow: 2px, 3px lightgrey;
 }
diff --git a/frontend/src/components/common/FloatingInfoPanel.vue b/frontend/src/components/common/FloatingInfoPanel.vue
index 2c31239b5..a29da30dc 100644
--- a/frontend/src/components/common/FloatingInfoPanel.vue
+++ b/frontend/src/components/common/FloatingInfoPanel.vue
@@ -330,7 +330,7 @@ export default {
 }
 
 .info-panel-header {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 12px 16px;
   border-bottom: 1px solid #dee2e6;
   border-radius: 8px 8px 0 0;
@@ -339,7 +339,7 @@ export default {
 
 .info-panel-header h6 {
   margin: 0;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
   font-weight: 600;
   padding-right: 30px; /* Make room for pin button */
 }
@@ -380,12 +380,12 @@ export default {
 }
 
 .scoring-item {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   transition: background-color 0.2s;
 }
 
 .scoring-item:hover {
-  background-color: #e9ecef;
+  background-color: var(--bs-secondary-bg, #e9ecef);
 }
 
 .badge {
diff --git a/frontend/src/components/common/ReadOnlyIndicator.vue b/frontend/src/components/common/ReadOnlyIndicator.vue
index 248608666..6fcbc45d0 100644
--- a/frontend/src/components/common/ReadOnlyIndicator.vue
+++ b/frontend/src/components/common/ReadOnlyIndicator.vue
@@ -39,7 +39,7 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
-  color: #c0c0c0;
+  color: var(--bs-secondary-color, #c0c0c0);
   opacity: 0.25;
   pointer-events: none;
   user-select: none;
diff --git a/frontend/src/components/dashboard/Configurations.vue b/frontend/src/components/dashboard/Configurations.vue
index 5424f8e86..2734ebb60 100644
--- a/frontend/src/components/dashboard/Configurations.vue
+++ b/frontend/src/components/dashboard/Configurations.vue
@@ -380,7 +380,7 @@ export default {
 }
 
 .json-content {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border: 1px solid #dee2e6;
   border-radius: 0.375rem;
   padding: 1rem;
@@ -390,7 +390,7 @@ export default {
   line-height: 1.5;
   white-space: pre-wrap;
   word-wrap: break-word;
-  color: #212529;
+  color: var(--bs-body-color, #212529);
 }
 
 .json-editor-container {
@@ -406,11 +406,11 @@ export default {
   font-family: 'Courier New', monospace !important;
   font-size: 0.875rem !important;
   line-height: 1.5 !important;
-  background-color: #f8f9fa !important;
+  background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
   border: 1px solid #dee2e6 !important;
   border-radius: 0.375rem !important;
   padding: 1rem !important;
-  color: #212529 !important;
+  color: var(--bs-body-color, #212529) !important;
   min-height: 400px !important;
 }
 
diff --git a/frontend/src/components/dashboard/SessionOverview.vue b/frontend/src/components/dashboard/SessionOverview.vue
index b645de9b8..867a5020e 100644
--- a/frontend/src/components/dashboard/SessionOverview.vue
+++ b/frontend/src/components/dashboard/SessionOverview.vue
@@ -186,7 +186,7 @@ export default {
 <style scoped>
 .filters-container {
   padding: 1rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.25rem;
 }
 </style>
diff --git a/frontend/src/components/dashboard/Workflows.vue b/frontend/src/components/dashboard/Workflows.vue
index 4a61fa715..fb180cfaf 100644
--- a/frontend/src/components/dashboard/Workflows.vue
+++ b/frontend/src/components/dashboard/Workflows.vue
@@ -357,7 +357,7 @@ export default {
   height: 500px;
   border: 1px solid #dee2e6;
   border-radius: 0.375rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
 }
 
 .workflow-network-graph {
diff --git a/frontend/src/components/dashboard/navigation/Sidebar.vue b/frontend/src/components/dashboard/navigation/Sidebar.vue
index ea6e6527f..24310f588 100644
--- a/frontend/src/components/dashboard/navigation/Sidebar.vue
+++ b/frontend/src/components/dashboard/navigation/Sidebar.vue
@@ -503,7 +503,7 @@ export default {
 
 #wrapper {
   height: 100%;
-  background-color: #f2f2f2;
+  background-color: var(--bs-tertiary-bg, #f2f2f2);
 }
 
 #sidebar-wrapper {
@@ -608,11 +608,11 @@ export default {
   text-overflow: ellipsis;
   overflow: hidden;
   border: none;
-  background-color: #f2f2f2;
+  background-color: var(--bs-tertiary-bg, #f2f2f2);
 }
 
 .list-group-item:hover {
-  background-color: white !important;
+  background-color: var(--bs-body-bg, #fff) !important;
 }
 
 .sidebar-icon {
@@ -646,13 +646,13 @@ export default {
   cursor: pointer;
   font-weight: 400;
   border: none;
-  background-color: #f2f2f2;
+  background-color: var(--bs-tertiary-bg, #f2f2f2);
   border-radius: 0;
   padding-right: 2.75rem !important;
 }
 
 .sidebar-subgroup-heading:hover {
-  background-color: white !important;
+  background-color: var(--bs-body-bg, #fff) !important;
 }
 
 .subgroup-title {
@@ -681,8 +681,8 @@ export default {
 
 .default-subitem.router-link-active,
 .default-subitem.router-link-exact-active {
-  background-color: #e0e0e0 !important;
-  box-shadow: inset 2px 0 0 #222;
+  background-color: var(--bs-secondary-bg, #e0e0e0) !important;
+  box-shadow: inset 2px 0 0 var(--bs-emphasis-color, #222);
 }
 
 .submenu-enter-active,
@@ -707,7 +707,7 @@ export default {
 
 .submenu-preview-inner {
   min-width: 220px;
-  background: #ebebeb;
+  background: var(--bs-tertiary-bg, #ebebeb);
   color: inherit;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.08);
@@ -722,7 +722,7 @@ export default {
   padding: 0.95rem 1rem 0.75rem;
   font-size: 1rem;
   font-weight: 600;
-  background: #f2f2f2;
+  background: var(--bs-tertiary-bg, #f2f2f2);
   color: inherit;
 }
 
@@ -745,18 +745,18 @@ export default {
 }
 
 .submenu-preview .list-group-item-custom {
-  background-color: #f2f2f2 !important;
+  background-color: var(--bs-tertiary-bg, #f2f2f2) !important;
   color: inherit;
 }
 
 .submenu-preview .list-group-item-custom:hover {
-  background-color: white !important;
+  background-color: var(--bs-body-bg, #fff) !important;
 }
 
 .submenu-preview .preview-subitem.router-link-active,
 .submenu-preview .preview-subitem.router-link-exact-active {
-  background-color: #e0e0e0 !important;
-  box-shadow: inset 2px 0 0 #222;
+  background-color: var(--bs-secondary-bg, #e0e0e0) !important;
+  box-shadow: inset 2px 0 0 var(--bs-emphasis-color, #222);
 }
 
 /* ========================================
@@ -811,7 +811,7 @@ export default {
 
 #sidebar-wrapper.collapsed .collapsed-group-icon-active {
   position: relative;
-  background-color: #e0e0e0 !important;
+  background-color: var(--bs-secondary-bg, #e0e0e0) !important;
 }
 
 #sidebar-wrapper.collapsed .collapsed-group-icon-active::before {
@@ -827,7 +827,7 @@ export default {
 
 #sidebar-wrapper:not(.collapsed) .expanded-group-active {
   position: relative;
-  background-color: #e0e0e0 !important;
+  background-color: var(--bs-secondary-bg, #e0e0e0) !important;
 }
 
 #sidebar-wrapper:not(.collapsed) .expanded-group-active::before {
@@ -842,12 +842,12 @@ export default {
 }
 
 .sidebar-subgroup-heading.preview-group-active {
-  background-color: white !important;
+  background-color: var(--bs-body-bg, #fff) !important;
 }
 
 #sidebar-wrapper:not(.collapsed) .expanded-group-active.preview-group-active,
 #sidebar-wrapper.collapsed .collapsed-group-icon-active.preview-group-active {
-  background-color: white !important;
+  background-color: var(--bs-body-bg, #fff) !important;
 }
 
 .arrow-toggle {
diff --git a/frontend/src/components/dashboard/projects/export/StepConfirmDownload.vue b/frontend/src/components/dashboard/projects/export/StepConfirmDownload.vue
index 8afd4df92..fd46350c8 100644
--- a/frontend/src/components/dashboard/projects/export/StepConfirmDownload.vue
+++ b/frontend/src/components/dashboard/projects/export/StepConfirmDownload.vue
@@ -25,7 +25,7 @@
         <strong>{{ submissionSelection.length }}</strong> student(s).
       </div>
 
-      <div class="card card-body bg-light" style="max-height: 150px; overflow-y: auto;">
+      <div class="card card-body bg-body-tertiary" style="max-height: 150px; overflow-y: auto;">
         <ul class="mb-0 pl-3">
           <li v-for="row in submissionSelection" :key="row.userId">
             {{ row.studentName || row.userName }} ({{ row.fileCount }} files)
diff --git a/frontend/src/components/dashboard/projects/export/StepOptions.vue b/frontend/src/components/dashboard/projects/export/StepOptions.vue
index 9294be51c..6d7cc65d7 100644
--- a/frontend/src/components/dashboard/projects/export/StepOptions.vue
+++ b/frontend/src/components/dashboard/projects/export/StepOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2 mb-3 p-3 bg-light border rounded">
+  <div class="mt-2 mb-3 p-3 bg-body-tertiary border rounded">
     <h6 class="mb-3 pb-2 border-bottom text-muted">
       Options
     </h6>
diff --git a/frontend/src/components/dashboard/study/ManageStudiesModal.vue b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
index 8e6a63264..8a5b1010d 100644
--- a/frontend/src/components/dashboard/study/ManageStudiesModal.vue
+++ b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
@@ -476,7 +476,7 @@ export default {
 
 .confirmation-content .form-check {
   padding: 1rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.375rem;
   border: 1px solid #e9ecef;
 }
@@ -569,7 +569,7 @@ export default {
 
 .filters-container {
   padding: 1rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.25rem;
   border-left: 3px solid #6c757d;
 }
@@ -589,7 +589,7 @@ export default {
 .confirmation-content h6 {
   margin-bottom: 1.25rem;
   font-weight: 700;
-  color: #212529;
+  color: var(--bs-body-color, #212529);
   font-size: 1.1rem;
 }
 
@@ -615,13 +615,13 @@ export default {
 
 .mode-selection-container {
   padding: 1.5rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.25rem;
   border-left: 4px solid #007bff;
 }
 
 .mode-selection-container h5 {
-  color: #333;
+  color: var(--bs-body-color, #333);
   font-weight: 600;
 }
 
@@ -653,7 +653,7 @@ export default {
   font-size: 0.95rem;
   border-left: 3px solid #0d6efd;
   margin-bottom: 0.5rem;
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.25rem;
 }
 
diff --git a/frontend/src/components/dashboard/submission/AssignModal.vue b/frontend/src/components/dashboard/submission/AssignModal.vue
index 2aa126ec1..7f26be683 100644
--- a/frontend/src/components/dashboard/submission/AssignModal.vue
+++ b/frontend/src/components/dashboard/submission/AssignModal.vue
@@ -307,6 +307,6 @@ export default {
 .summary-item strong {
   display: inline-block;
   min-width: 180px;
-  color: #495057;
+  color: var(--bs-body-color, #495057);
 }
 </style>
diff --git a/frontend/src/components/dashboard/submission/ImportModal.vue b/frontend/src/components/dashboard/submission/ImportModal.vue
index d48260a9a..13e9865ba 100644
--- a/frontend/src/components/dashboard/submission/ImportModal.vue
+++ b/frontend/src/components/dashboard/submission/ImportModal.vue
@@ -33,7 +33,7 @@
       <div class="confirm-container">
         <h4 class="mb-3">Confirm Import Settings</h4>
         <div class="card mb-3">
-          <div class="card-body bg-light">
+          <div class="card-body bg-body-tertiary">
             <h5 class="card-title">Import Summary</h5>
             <ul class="list-unstyled mb-0">
               <li>• Submissions to import: {{ selectedSubmissions.length }}</li>
diff --git a/frontend/src/components/dashboard/submission/ValidatorSelector.vue b/frontend/src/components/dashboard/submission/ValidatorSelector.vue
index d2a38d78b..b9008eb28 100644
--- a/frontend/src/components/dashboard/submission/ValidatorSelector.vue
+++ b/frontend/src/components/dashboard/submission/ValidatorSelector.vue
@@ -42,7 +42,7 @@
     </div>
     <div
       v-if="showPreview"
-      class="card bg-light"
+      class="card bg-body-tertiary"
     >
       <div class="card-body">
         <h5 class="card-title">{{ previewTitle }}</h5>
diff --git a/frontend/src/components/dashboard/users/ImportModal.vue b/frontend/src/components/dashboard/users/ImportModal.vue
index 4d03cc82e..eb5ca3627 100644
--- a/frontend/src/components/dashboard/users/ImportModal.vue
+++ b/frontend/src/components/dashboard/users/ImportModal.vue
@@ -513,13 +513,13 @@ export default {
 }
 
 .drag-drop-area:hover {
-  background-color: #f0f0f0;
+  background-color: var(--bs-tertiary-bg, #f0f0f0);
 }
 
 .drag-drop-area p {
   margin: 0;
   font-size: 0.925rem;
-  color: #666;
+  color: var(--bs-secondary-color, #666);
 }
 
 .template-link {
@@ -532,7 +532,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   border: 1px solid #dee2e6;
-  background: #f2f2f2;
+  background: var(--bs-tertiary-bg, #f2f2f2);
   border-radius: 4px;
 }
 
@@ -543,7 +543,7 @@ export default {
 
 .file-info-container strong {
   margin: 0 0.5rem;
-  color: #333;
+  color: var(--bs-body-color, #333);
 }
 
 .file-info-container button {
diff --git a/frontend/src/components/editor/editor/Editor.vue b/frontend/src/components/editor/editor/Editor.vue
index 2101270f6..ee46de7a3 100644
--- a/frontend/src/components/editor/editor/Editor.vue
+++ b/frontend/src/components/editor/editor/Editor.vue
@@ -591,11 +591,11 @@ export default {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  background-color: #f3f3f3;
+  background-color: var(--bs-tertiary-bg, #f3f3f3);
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 0px;
-  color: #666;
+  color: var(--bs-secondary-color, #666);
   font-size: 14px;
 }
 
diff --git a/frontend/src/components/editor/sidebar/Configurator.vue b/frontend/src/components/editor/sidebar/Configurator.vue
index cd59ef58f..ca4b91a9f 100644
--- a/frontend/src/components/editor/sidebar/Configurator.vue
+++ b/frontend/src/components/editor/sidebar/Configurator.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card shadow mb-4 configurator">
-    <div class="card-header bg-white">
+    <div class="card-header bg-body">
       <h3 class="card-title fw-bold mb-0">Placeholders</h3>
     </div>
     <div class="card-body p-0">
@@ -164,7 +164,7 @@ export default {
 }
 
 .list-group-item:hover {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
 }
 
 .badge {
diff --git a/frontend/src/components/editor/sidebar/TemplateConfigurator.vue b/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
index 3cd21fc28..9921e9685 100644
--- a/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
+++ b/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
@@ -10,7 +10,7 @@
       </div>
   
       <div class="card shadow mb-4 configurator">
-        <div class="card-header bg-white">
+        <div class="card-header bg-body">
           <h3 class="card-title fw-bold mb-0">Placeholders</h3>
         </div>
         <div class="card-body p-0">
@@ -294,7 +294,7 @@
   }
   
   .list-group-item:hover {
-    background-color: #f8f9fa;
+    background-color: var(--bs-tertiary-bg, #f8f9fa);
   }
   
   .badge {
diff --git a/frontend/src/components/editor/template/TemplateEditor.vue b/frontend/src/components/editor/template/TemplateEditor.vue
index 75f9f74e2..e86792c6e 100644
--- a/frontend/src/components/editor/template/TemplateEditor.vue
+++ b/frontend/src/components/editor/template/TemplateEditor.vue
@@ -801,7 +801,7 @@
   <style>
   .ql-toolbar .ql-languageSelector {
     min-width: 100px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg, #f5f5f5);
     margin-left: 10px;
   }
   .ql-toolbar .ql-languageSelector .ql-picker-label {
diff --git a/frontend/src/components/stepmodal/StepModal.vue b/frontend/src/components/stepmodal/StepModal.vue
index 636a44e98..e69cef957 100644
--- a/frontend/src/components/stepmodal/StepModal.vue
+++ b/frontend/src/components/stepmodal/StepModal.vue
@@ -279,7 +279,7 @@ export default {
 .feedback-container {
   max-height: 400px;
   overflow-y: auto;
-  background: #f8f9fa;
+  background: var(--bs-tertiary-bg, #f8f9fa);
   border-radius: 0.5rem;
 }
 
diff --git a/frontend/src/components/stepmodal/placeholders/Text.vue b/frontend/src/components/stepmodal/placeholders/Text.vue
index e47829352..ac084264f 100644
--- a/frontend/src/components/stepmodal/placeholders/Text.vue
+++ b/frontend/src/components/stepmodal/placeholders/Text.vue
@@ -49,8 +49,8 @@ export default {
 .text-placeholder {
   font-size: 1rem;
   line-height: 1.5;
-  color: #212529;
-  background-color: #ffffff;
+  color: var(--bs-body-color, #212529);
+  background-color: var(--bs-body-bg, #ffffff);
   padding: 0.75rem 1rem;
   border-radius: 0.375rem;
   border: 1px solid #dee2e6;
diff --git a/frontend/src/components/study/Assessment.vue b/frontend/src/components/study/Assessment.vue
index 13537a736..b048a918d 100644
--- a/frontend/src/components/study/Assessment.vue
+++ b/frontend/src/components/study/Assessment.vue
@@ -654,12 +654,12 @@ export default {
 }
 
 .assessment-text strong {
-  color: #333;
+  color: var(--bs-body-color, #333);
   font-weight: 600;
 }
 
 .assessment-text p {
-  color: #666;
+  color: var(--bs-secondary-color, #666);
   margin-top: 4px;
 }
 
diff --git a/frontend/src/components/study/assessment/AssessmentCriteria.vue b/frontend/src/components/study/assessment/AssessmentCriteria.vue
index 37da080b4..460282caa 100644
--- a/frontend/src/components/study/assessment/AssessmentCriteria.vue
+++ b/frontend/src/components/study/assessment/AssessmentCriteria.vue
@@ -340,7 +340,7 @@ export default {
 
 .criterion-name {
   font-weight: 400;
-  color: #333;
+  color: var(--bs-body-color, #333);
 }
 
 /* Assessment Content */
@@ -359,12 +359,12 @@ export default {
 }
 
 .assessment-text strong {
-  color: #333;
+  color: var(--bs-body-color, #333);
   font-weight: 600;
 }
 
 .assessment-text p {
-  color: #666;
+  color: var(--bs-secondary-color, #666);
   margin-top: 4px;
 }
 

From 5f42429411dc1bec54260897367c18ab3a72c7a4 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 14:23:22 +0200
Subject: [PATCH 03/30] fix: make icons and outline buttons readable in dark
 mode

---
 frontend/src/assets/styles/global.css         | 37 +++++++++++++++++++
 frontend/src/basic/Sidebar.vue                |  2 +-
 frontend/src/basic/modal/StepperModal.vue     |  2 +-
 frontend/src/basic/navigation/Topbar.vue      |  6 +--
 frontend/src/components/Study.vue             |  2 +-
 .../components/annotator/sidebar/Sidebar.vue  |  2 +-
 frontend/src/components/dashboard/Log.vue     |  8 ++--
 frontend/src/components/editor/Editor.vue     |  2 +-
 8 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 341251c4c..cf0664b8e 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -21,3 +21,40 @@
     line-height: 1.4;
   }
 }
+
+/* === CARE dark mode overrides === */
+/* Bootstrap's outline-secondary uses the muted grey for text, which is
+   too dim against a dark background. Retarget the button's own variables. */
+[data-bs-theme="dark"] .btn-outline-secondary {
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-bg: var(--bs-secondary-bg);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+}
+
+/* Project selector reads too dim in dark mode; use the brighter blue. */
+[data-bs-theme="dark"] .project-box {
+  color: var(--bs-blue) !important;
+  border-color: var(--bs-blue) !important;
+}
+
+/* Avatar circle uses a hardcoded darkblue that reads muddy on the dark topbar. */
+[data-bs-theme="dark"] #dropdownMenuButton {
+  background: var(--bs-blue) !important;
+}
+
+/* Project selector hover: match the brighter blue used in dark mode. */
+[data-bs-theme="dark"] .project-box:hover {
+  background-color: var(--bs-blue) !important;
+  color: #fff !important;
+}
+
+/* btn-outline-dark is near-black by design; invert it in dark mode. */
+[data-bs-theme="dark"] .btn-outline-dark {
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-bg: var(--bs-secondary-bg);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+}
diff --git a/frontend/src/basic/Sidebar.vue b/frontend/src/basic/Sidebar.vue
index f2c7eeffd..d8d40b26d 100644
--- a/frontend/src/basic/Sidebar.vue
+++ b/frontend/src/basic/Sidebar.vue
@@ -73,7 +73,7 @@
                   <LoadIcon
                       icon-name="three-dots-vertical"
                       :size="18"
-                      color="#495057"
+                      color="var(--bs-body-color)"
                   />
                 </TopBarButton>
                 <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="sidebarDropdownButton">
diff --git a/frontend/src/basic/modal/StepperModal.vue b/frontend/src/basic/modal/StepperModal.vue
index 7ac0fc670..e09efe266 100644
--- a/frontend/src/basic/modal/StepperModal.vue
+++ b/frontend/src/basic/modal/StepperModal.vue
@@ -209,7 +209,7 @@ export default {
 
 .stepper div {
   z-index: 1;
-  background-color: white;
+  background-color: var(--bs-body-bg, white);
   padding: 0 5px;
 
   &:before {
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 1fb71cb18..b958fcd10 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -291,8 +291,8 @@ body.sidebar-exists #backButton {
   align-items: center;
   padding: 2px 10px;
   background: var(--bs-tertiary-bg, #f5f5f5);
-  border: 1px solid var(--bs-primary, darkblue);
-  color: var(--bs-primary, darkblue);
+  border: 1px solid darkblue;
+  color: darkblue;
   border-radius: 4px;
   vertical-align: middle;
   max-width: 180px;
@@ -308,7 +308,7 @@ body.sidebar-exists #backButton {
 }
 
 .project-box:hover {
-  background-color: var(--bs-primary, darkblue);
+  background-color: darkblue;
   color: white;
 }
 
diff --git a/frontend/src/components/Study.vue b/frontend/src/components/Study.vue
index 845a07106..66d01fd0d 100644
--- a/frontend/src/components/Study.vue
+++ b/frontend/src/components/Study.vue
@@ -42,7 +42,7 @@
       </span>
       <LoadIcon
           :size="22"
-          :color="'#800000'"
+          :color="'var(--bs-danger-text-emphasis)'"
           icon-name="lock-fill"
       />
     </div>
diff --git a/frontend/src/components/annotator/sidebar/Sidebar.vue b/frontend/src/components/annotator/sidebar/Sidebar.vue
index ec9eac41c..94389dadb 100644
--- a/frontend/src/components/annotator/sidebar/Sidebar.vue
+++ b/frontend/src/components/annotator/sidebar/Sidebar.vue
@@ -37,7 +37,7 @@
           <LoadIcon
             icon-name="lock-fill"
             :size="20"
-            color="#6c757d"
+            color="var(--bs-secondary-color)"
             class="mb-1"
           />
           <h6 class="card-title mb-0">Read-Only Mode</h6>
diff --git a/frontend/src/components/dashboard/Log.vue b/frontend/src/components/dashboard/Log.vue
index c43af2c39..dc46a01a6 100644
--- a/frontend/src/components/dashboard/Log.vue
+++ b/frontend/src/components/dashboard/Log.vue
@@ -85,13 +85,13 @@ export default {
     },
     getBugColor(level) {
       if (level === "error") {
-        return "#ff0000";
+        return "var(--bs-danger)";
       } else if (level === "warn") {
-        return "#ff9900";
+        return "var(--bs-warning)";
       } else if (level === "info") {
-        return "#0000ff";
+        return "var(--bs-blue)";
       } else {
-        return "#000000";
+        return "var(--bs-secondary-color)";
       }
     },
   }
diff --git a/frontend/src/components/editor/Editor.vue b/frontend/src/components/editor/Editor.vue
index 7afc0638a..27ffa1b93 100644
--- a/frontend/src/components/editor/Editor.vue
+++ b/frontend/src/components/editor/Editor.vue
@@ -9,7 +9,7 @@
       </span>
       <LoadIcon
         :size="22"
-        :color="'#800000'"
+        :color="'var(--bs-danger-text-emphasis)'"
         icon-name="lock-fill"
       />
     </div>

From b5d9bb72e77675415116aa4ca037017d52fadd32 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 15:09:14 +0200
Subject: [PATCH 04/30] feat: add dark mode toggle to topbar

---
 frontend/src/assets/styles/global.css    | 16 +++++++++----
 frontend/src/basic/navigation/Topbar.vue | 30 ++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index cf0664b8e..9e0d8a6d7 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -35,18 +35,18 @@
 
 /* Project selector reads too dim in dark mode; use the brighter blue. */
 [data-bs-theme="dark"] .project-box {
-  color: var(--bs-blue) !important;
-  border-color: var(--bs-blue) !important;
+  color: var(--bs-primary) !important;
+  border-color: var(--bs-primary) !important;
 }
 
 /* Avatar circle uses a hardcoded darkblue that reads muddy on the dark topbar. */
 [data-bs-theme="dark"] #dropdownMenuButton {
-  background: var(--bs-blue) !important;
+  background: var(--bs-primary) !important;
 }
 
 /* Project selector hover: match the brighter blue used in dark mode. */
 [data-bs-theme="dark"] .project-box:hover {
-  background-color: var(--bs-blue) !important;
+  background-color: var(--bs-primary) !important;
   color: #fff !important;
 }
 
@@ -58,3 +58,11 @@
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
+
+/* Theme toggle matches the project selector: navy on light, bright blue on dark. */
+.theme-toggle {
+  color: darkblue !important;
+}
+[data-bs-theme="dark"] .theme-toggle {
+  color: var(--bs-primary) !important;
+}
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index b958fcd10..48e12a7f5 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -33,6 +33,18 @@
           class="navbar-nav ms-auto mt-2 mt-lg-0"
         />   
         <ul class="navbar-nav">
+          <li class="nav-item me-2 d-flex align-items-center">
+            <button
+              class="btn btn-link nav-link p-1 theme-toggle"
+              :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+              @click="toggleTheme()"
+            >
+              <LoadIcon
+                :size="18"
+                :name="isDarkMode ? 'sun' : 'moon-stars'"
+              />
+            </button>
+          </li>
           <li class="nav-item me-3">
             <div
               v-if="!isProjectButtonHidden && isInDashboard"
@@ -154,6 +166,7 @@ export default {
   data() {
     return {
       showProjectDropdown: false,
+      isDarkMode: false,
     }
   },
   subscribeTable: [{
@@ -190,6 +203,7 @@ export default {
   },
   mounted() {
     this.$refs.topbar.addEventListener('click', this.handleClickOutside);
+    this.initTheme();
   },
   beforeUnmount() {
     this.$refs.topbar.removeEventListener('click', this.handleClickOutside);
@@ -199,6 +213,22 @@ export default {
       this.$socket.emit("appSettingSet", { key: "projects.default", value: projectId });
       this.showProjectDropdown = false;
     },
+    applyTheme(mode) {
+      document.documentElement.setAttribute("data-bs-theme", mode);
+      this.isDarkMode = mode === "dark";
+      localStorage.setItem("care.theme", mode);
+    },
+    toggleTheme() {
+      const next = this.isDarkMode ? "light" : "dark";
+      this.applyTheme(next);
+      this.$socket.emit("appSettingSet", {key: "app.theme.mode", value: next});
+    },
+    initTheme() {
+      const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
+      const cached = localStorage.getItem("care.theme");
+      const osPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      this.applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
+    },
     handleClickOutside(event) {
         if (!this.$el.contains(event.target)) {
           this.showProjectDropdown = false;

From 6715d6293ffd780f9a301a1e9a29806986d184e4 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 15:45:00 +0200
Subject: [PATCH 05/30] style: align theme toggle dimensions with project
 selector

---
 frontend/src/assets/styles/global.css    | 29 ++++++++++++++++++++----
 frontend/src/basic/navigation/Topbar.vue |  2 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 9e0d8a6d7..b78958da4 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -4,7 +4,7 @@
   overflow-y: auto;
   padding: 10px;
   border: 1px solid #ffcdd2;
-  border-radius: 4px;
+  border-radius: 4px !important;
   background-color: #ffebee;
 
   > p {
@@ -35,8 +35,9 @@
 
 /* Project selector reads too dim in dark mode; use the brighter blue. */
 [data-bs-theme="dark"] .project-box {
-  color: var(--bs-primary) !important;
   border-color: var(--bs-primary) !important;
+  background-color: var(--bs-primary) !important;
+  color: #fff !important;
 }
 
 /* Avatar circle uses a hardcoded darkblue that reads muddy on the dark topbar. */
@@ -46,7 +47,7 @@
 
 /* Project selector hover: match the brighter blue used in dark mode. */
 [data-bs-theme="dark"] .project-box:hover {
-  background-color: var(--bs-primary) !important;
+  background-color: #0b5ed7 !important;
   color: #fff !important;
 }
 
@@ -59,10 +60,28 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-/* Theme toggle matches the project selector: navy on light, bright blue on dark. */
+
+/* Theme toggle: square button matching the project selector's height and styling. */
 .theme-toggle {
+  /* 28.5px matches .project-box rendered height (padding + line-height + border) */
+  height: 28.5px !important;
+  width: 29px !important;
+  padding: 0 !important;
+  border-radius: 4px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bs-tertiary-bg, #f5f5f5) !important;
+  border: 1px solid darkblue !important;
   color: darkblue !important;
 }
+
 [data-bs-theme="dark"] .theme-toggle {
-  color: var(--bs-primary) !important;
+  background-color: var(--bs-primary) !important;
+  border-color: var(--bs-primary) !important;
+  color: #fff !important;
+}
+
+[data-bs-theme="dark"] .theme-toggle:hover {
+  background-color: #0b5ed7 !important;
 }
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 48e12a7f5..e44d416f7 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -35,7 +35,7 @@
         <ul class="navbar-nav">
           <li class="nav-item me-2 d-flex align-items-center">
             <button
-              class="btn btn-link nav-link p-1 theme-toggle"
+              class="btn theme-toggle"
               :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
               @click="toggleTheme()"
             >

From b14a658915a2af515287fda521855a94912bad1f Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 15:49:04 +0200
Subject: [PATCH 06/30] style: make theme toggle square

---
 frontend/src/assets/styles/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index b78958da4..40f154232 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -65,7 +65,7 @@
 .theme-toggle {
   /* 28.5px matches .project-box rendered height (padding + line-height + border) */
   height: 28.5px !important;
-  width: 29px !important;
+  width: 28.5px !important;
   padding: 0 !important;
   border-radius: 4px !important;
   display: inline-flex !important;

From 1640173339eb0607199cef800890dd3b13e35bcb Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 16:07:37 +0200
Subject: [PATCH 07/30] fix: theme remaining bootstrap variants and topbar
 spacing

---
 frontend/src/assets/styles/global.css         | 36 +++++++++++++++++++
 frontend/src/auth/TwoFactorSelect.vue         |  4 +--
 frontend/src/auth/TwoFactorSettingsModal.vue  |  2 +-
 frontend/src/basic/navigation/Topbar.vue      |  6 ++--
 .../annotator/pdfViewer/PDFToolbar.vue        |  8 ++---
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 40f154232..c4925a441 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -85,3 +85,39 @@
 [data-bs-theme="dark"] .theme-toggle:hover {
   background-color: #0b5ed7 !important;
 }
+
+/* btn-light is a fixed near-white button; make it theme-aware in dark mode. */
+[data-bs-theme="dark"] .btn-light {
+  --bs-btn-bg: var(--bs-secondary-bg);
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-bg: var(--bs-tertiary-bg);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+}
+
+/* btn-light is a fixed near-white button; make it theme-aware in dark mode. */
+[data-bs-theme="dark"] .btn-light {
+  --bs-btn-bg: var(--bs-secondary-bg);
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-bg: var(--bs-tertiary-bg);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-hover-border-color: var(--bs-border-color);
+}
+
+/* Remaining fixed Bootstrap variants that ignore data-bs-theme. */
+[data-bs-theme="dark"] .btn-dark {
+  --bs-btn-bg: var(--bs-secondary-bg);
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-border-color: var(--bs-border-color);
+}
+[data-bs-theme="dark"] .text-dark {
+  color: var(--bs-body-color) !important;
+}
+
+/* Disabled controls at 65% opacity lose more contrast on dark than on light. */
+[data-bs-theme="dark"] .btn:disabled,
+[data-bs-theme="dark"] .nav-link.disabled {
+  opacity: 0.8;
+}
diff --git a/frontend/src/auth/TwoFactorSelect.vue b/frontend/src/auth/TwoFactorSelect.vue
index 088b133a6..7b4e14d59 100644
--- a/frontend/src/auth/TwoFactorSelect.vue
+++ b/frontend/src/auth/TwoFactorSelect.vue
@@ -232,13 +232,13 @@ form {
 }
 
 .method-card:hover {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   border-color: #0d6efd;
 }
 
 .method-card.selected {
   border-color: #0d6efd;
-  background-color: #e7f1ff;
+  background-color: var(--bs-primary-bg-subtle, #e7f1ff);
 }
 </style>
 
diff --git a/frontend/src/auth/TwoFactorSettingsModal.vue b/frontend/src/auth/TwoFactorSettingsModal.vue
index ccf5c7e37..f3bd9166e 100644
--- a/frontend/src/auth/TwoFactorSettingsModal.vue
+++ b/frontend/src/auth/TwoFactorSettingsModal.vue
@@ -659,7 +659,7 @@ export default {
 }
 
 .totp-setup-section {
-  background-color: #f8f9fa;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
   padding: 16px;
   border-radius: 8px;
   border: 1px solid #dee2e6;
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index e44d416f7..0eb6bb3ab 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -33,7 +33,7 @@
           class="navbar-nav ms-auto mt-2 mt-lg-0"
         />   
         <ul class="navbar-nav">
-          <li class="nav-item me-2 d-flex align-items-center">
+          <li class="nav-item ms-3 me-3 d-flex align-items-center">
             <button
               class="btn theme-toggle"
               :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
@@ -45,9 +45,9 @@
               />
             </button>
           </li>
-          <li class="nav-item me-3">
+          <!-- v-if moved from the inner div to the li: an empty li still rendered its me-3 margin, causing uneven topbar spacing when the project button is hidden -->
+          <li v-if="!isProjectButtonHidden && isInDashboard" class="nav-item me-3">
             <div
-              v-if="!isProjectButtonHidden && isInDashboard"
               style="
                 position: relative;
                 display: flex;
diff --git a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
index a95763675..b182a0a23 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
@@ -175,7 +175,7 @@ export default {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   min-width: 32px;
   min-height: 32px;
@@ -188,11 +188,11 @@ export default {
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn {
   margin-left: 0;
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
 }
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn:hover {
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
 }
 
 .pdf-toolbar.loading::after {
@@ -202,7 +202,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(248, 249, 250, 0.7);
+  background: var(--bs-tertiary-bg, rgba(248, 249, 250, 0.7));
   display: flex;
   align-items: center;
   justify-content: center;

From 4b48c23502efb37a0f80e51cfc98a6e70294d098 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 16:17:10 +0200
Subject: [PATCH 08/30] feat: add dark mode support for quill editor and
 placeholder tiles

---
 frontend/src/assets/styles/global.css         | 35 +++++++++++++++++++
 .../editor/sidebar/Configurator.vue           |  4 +--
 .../editor/sidebar/TemplateConfigurator.vue   |  4 +--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index c4925a441..48acf5a4c 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -121,3 +121,38 @@
 [data-bs-theme="dark"] .nav-link.disabled {
   opacity: 0.8;
 }
+
+/* Quill's snow theme is fixed-light; retheme its surfaces and toolbar for dark mode. */
+[data-bs-theme="dark"] .ql-toolbar.ql-snow,
+[data-bs-theme="dark"] .ql-container.ql-snow {
+  border-color: var(--bs-border-color);
+}
+[data-bs-theme="dark"] .ql-toolbar.ql-snow {
+  background-color: var(--bs-tertiary-bg);
+}
+[data-bs-theme="dark"] .ql-container.ql-snow,
+[data-bs-theme="dark"] .ql-editor {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .ql-editor.ql-blank::before {
+  color: var(--bs-secondary-color);
+}
+[data-bs-theme="dark"] .ql-snow .ql-stroke {
+  stroke: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .ql-snow .ql-fill {
+  fill: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .ql-snow .ql-picker {
+  color: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .ql-snow .ql-picker-options {
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+}
+
+/* Black drop shadows vanish on dark; use a border to define the toolbar edge. */
+[data-bs-theme="dark"] .pdf-toolbar {
+  border: 1px solid var(--bs-border-color);
+}
diff --git a/frontend/src/components/editor/sidebar/Configurator.vue b/frontend/src/components/editor/sidebar/Configurator.vue
index ca4b91a9f..5720ff813 100644
--- a/frontend/src/components/editor/sidebar/Configurator.vue
+++ b/frontend/src/components/editor/sidebar/Configurator.vue
@@ -144,7 +144,7 @@ export default {
 
 <style scoped>
 .configurator {
-  --bg-color: rgb(219, 234, 254);
+  --bg-color: var(--bs-secondary-bg, rgb(219, 234, 254));
   --icon-container-size: 36px;
 }
 
@@ -159,7 +159,7 @@ export default {
   margin-right: 0.625rem;
   align-items: center;
   justify-content: center;
-  color: var(--text-color);
+  color: var(--bs-body-color);
   background-color: var(--bg-color);
 }
 
diff --git a/frontend/src/components/editor/sidebar/TemplateConfigurator.vue b/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
index 9921e9685..31558ca3a 100644
--- a/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
+++ b/frontend/src/components/editor/sidebar/TemplateConfigurator.vue
@@ -274,7 +274,7 @@
   
   <style scoped>
   .configurator {
-    --bg-color: rgb(219, 234, 254);
+    --bg-color: var(--bs-secondary-bg, rgb(219, 234, 254));
     --icon-container-size: 36px;
   }
   
@@ -289,7 +289,7 @@
     margin-right: 0.625rem;
     align-items: center;
     justify-content: center;
-    color: var(--text-color);
+    color: var(--bs-body-color);
     background-color: var(--bg-color);
   }
   

From c9e588d2f16d21c544fe536ed53789803ab62bf0 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 16:24:06 +0200
Subject: [PATCH 09/30] fix: apply theme at app level so logged-out pages
 respect it

---
 frontend/src/App.vue                     | 11 +++++++++++
 frontend/src/basic/navigation/Topbar.vue |  8 +-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d0128dcb8..3cf4d44e2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -232,6 +232,7 @@ export default {
     this.connect();
   },
   async mounted() {
+    this.initTheme();
     if (this.$route.meta.checkLogin) {
       await this.runCheckLoginFlow();
     }
@@ -242,6 +243,16 @@ export default {
     }
   },
   methods: {
+    applyTheme(mode) {
+      document.documentElement.setAttribute("data-bs-theme", mode);
+      localStorage.setItem("care.theme", mode);
+    },
+    initTheme() {
+      const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
+      const cached = localStorage.getItem("care.theme");
+      const osPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      this.applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
+    },
     async runCheckLoginFlow() {
       const response = await axios.get(getServerURL() + "/auth/check", {
         withCredentials: true,
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 0eb6bb3ab..d6132e702 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -203,7 +203,7 @@ export default {
   },
   mounted() {
     this.$refs.topbar.addEventListener('click', this.handleClickOutside);
-    this.initTheme();
+    this.isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
   },
   beforeUnmount() {
     this.$refs.topbar.removeEventListener('click', this.handleClickOutside);
@@ -223,12 +223,6 @@ export default {
       this.applyTheme(next);
       this.$socket.emit("appSettingSet", {key: "app.theme.mode", value: next});
     },
-    initTheme() {
-      const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
-      const cached = localStorage.getItem("care.theme");
-      const osPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      this.applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
-    },
     handleClickOutside(event) {
         if (!this.$el.contains(event.target)) {
           this.showProjectDropdown = false;

From 8274c64312dcd52ffb9d02d0f2ab654e6587b634 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 16:28:00 +0200
Subject: [PATCH 10/30] feat: theme alerts, setup wizard, and remaining modal
 surfaces

---
 frontend/src/assets/styles/global.css         |  6 ++---
 frontend/src/auth/SetupWizard.vue             | 10 +++----
 frontend/src/auth/TwoFactorSelect.vue         |  4 +--
 .../annotator/sidebar/card/AnnoCard.vue       |  4 +--
 .../components/common/FloatingInfoPanel.vue   |  4 +--
 .../dashboard/study/ManageStudiesModal.vue    | 26 +++++++++----------
 .../workflows/WorkflowRenameModal.vue         |  2 +-
 .../src/components/stepmodal/StepModal.vue    |  6 ++---
 8 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 48acf5a4c..aa8ae370f 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -1,11 +1,11 @@
 .scrollable-error-container {
-  color: firebrick;
+  color: var(--bs-danger-text-emphasis);
   max-height: 180px;
   overflow-y: auto;
   padding: 10px;
-  border: 1px solid #ffcdd2;
+  border: 1px solid var(--bs-danger-border-subtle);
   border-radius: 4px !important;
-  background-color: #ffebee;
+  background-color: var(--bs-danger-bg-subtle);
 
   > p {
     margin-bottom: 0.5rem;
diff --git a/frontend/src/auth/SetupWizard.vue b/frontend/src/auth/SetupWizard.vue
index ff853987f..5d0973341 100644
--- a/frontend/src/auth/SetupWizard.vue
+++ b/frontend/src/auth/SetupWizard.vue
@@ -636,12 +636,12 @@ export default {
   left: 0;
   right: 0;
   height: 2px;
-  background-color: #ccc;
+  background-color: var(--bs-secondary-bg, #ccc);
 }
 
 .stepper > div {
   z-index: 1;
-  background-color: white;
+  background-color: var(--bs-body-bg, white);
   padding: 0 5px;
 }
 
@@ -655,13 +655,13 @@ export default {
   border-radius: 50%;
   align-items: center;
   justify-content: center;
-  border: 1px solid #6c6b6b;
+  border: 1px solid var(--bs-border-color, #6c6b6b);
 }
 
 .stepper > div.active::before {
   color: white;
-  background-color: #0d6efd;
-  border-color: #0d6efd;
+  background-color: var(--bs-primary, #0d6efd);
+  border-color: var(--bs-primary, #0d6efd);
 }
 
 .feedback-invalid {
diff --git a/frontend/src/auth/TwoFactorSelect.vue b/frontend/src/auth/TwoFactorSelect.vue
index 7b4e14d59..c1d499876 100644
--- a/frontend/src/auth/TwoFactorSelect.vue
+++ b/frontend/src/auth/TwoFactorSelect.vue
@@ -233,11 +233,11 @@ form {
 
 .method-card:hover {
   background-color: var(--bs-tertiary-bg, #f8f9fa);
-  border-color: #0d6efd;
+  border-color: var(--bs-primary, #0d6efd);
 }
 
 .method-card.selected {
-  border-color: #0d6efd;
+  border-color: var(--bs-primary, #0d6efd);
   background-color: var(--bs-primary-bg-subtle, #e7f1ff);
 }
 </style>
diff --git a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
index fd92c9fc5..c2fc76f86 100644
--- a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
+++ b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
@@ -748,11 +748,11 @@ export default {
 }
 
 .annoBlockquote:hover {
-  color: #000000;
+  color: var(--bs-body-color, #000000);
 }
 
 .check-icon:hover {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 
 .header-hoverable {
diff --git a/frontend/src/components/common/FloatingInfoPanel.vue b/frontend/src/components/common/FloatingInfoPanel.vue
index a29da30dc..1b939a359 100644
--- a/frontend/src/components/common/FloatingInfoPanel.vue
+++ b/frontend/src/components/common/FloatingInfoPanel.vue
@@ -362,7 +362,7 @@ export default {
 
 .btn-close.pinned {
   opacity: 1;
-  color: #0d6efd;
+  color: var(--bs-primary, #0d6efd);
 }
 
 .info-panel-content {
@@ -370,7 +370,7 @@ export default {
 }
 
 .info-panel-content p {
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
   line-height: 1.4;
 }
 
diff --git a/frontend/src/components/dashboard/study/ManageStudiesModal.vue b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
index 8a5b1010d..7fd8e831f 100644
--- a/frontend/src/components/dashboard/study/ManageStudiesModal.vue
+++ b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
@@ -505,21 +505,21 @@ export default {
 }
 
 .confirmation-content .alert-warning {
-  background-color: #fff8e1;
-  border-color: #ffc107;
-  color: #856404;
+  background-color: var(--bs-warning-bg-subtle);
+  border-color: var(--bs-warning-border-subtle);
+  color: var(--bs-warning-text-emphasis);
 }
 
 .confirmation-content .alert-danger {
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-  color: #721c24;
+  background-color: var(--bs-danger-bg-subtle);
+  border-color: var(--bs-danger-border-subtle);
+  color: var(--bs-danger-text-emphasis);
 }
 
 .confirmation-content .alert-info {
-  background-color: #d1ecf1;
-  border-color: #bee5eb;
-  color: #0c5460;
+  background-color: var(--bs-info-bg-subtle);
+  border-color: var(--bs-info-border-subtle);
+  color: var(--bs-info-text-emphasis);
 }
 
 .confirmation-content .alert strong {
@@ -532,7 +532,7 @@ export default {
 }
 
 .danger-banner {
-  background-color: #f8d7da !important;
+  background-color: var(--bs-danger-bg-subtle) !important;
   border: 2px solid #dc3545 !important;
   border-radius: 0.5rem;
   padding: 1.25rem !important;
@@ -544,7 +544,7 @@ export default {
 
 .confirm-checkbox-container {
   padding: 1.25rem;
-  background-color: #fff3cd;
+  background-color: var(--bs-warning-bg-subtle);
   border-radius: 0.375rem;
   border: 1px solid #ffc107;
 }
@@ -601,10 +601,10 @@ export default {
 
 .confirmation-content .text-muted strong {
   font-weight: 700;
-  background-color: #e7f3ff;
+  background-color: var(--bs-primary-bg-subtle, #e7f3ff);
   padding: 0.125rem 0.5rem;
   border-radius: 0.25rem;
-  color: #0056b3;
+  color: var(--bs-primary-text-emphasis, #0056b3);
 }
 
 .confirmation-content .alert {
diff --git a/frontend/src/components/dashboard/workflows/WorkflowRenameModal.vue b/frontend/src/components/dashboard/workflows/WorkflowRenameModal.vue
index f0962a006..b16b2fd5f 100644
--- a/frontend/src/components/dashboard/workflows/WorkflowRenameModal.vue
+++ b/frontend/src/components/dashboard/workflows/WorkflowRenameModal.vue
@@ -209,7 +209,7 @@ export default {
 
 .form-text {
   font-size: 0.875rem;
-  color: #6c757d;
+  color: var(--bs-secondary-color, #6c757d);
 }
 
 .spinner-border-sm {
diff --git a/frontend/src/components/stepmodal/StepModal.vue b/frontend/src/components/stepmodal/StepModal.vue
index e69cef957..865aaa9e6 100644
--- a/frontend/src/components/stepmodal/StepModal.vue
+++ b/frontend/src/components/stepmodal/StepModal.vue
@@ -293,15 +293,15 @@ export default {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: var(--bs-primary, #007bff) !important;
 }
 
 .text-secondary {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 
 .text-muted {
-  color: #6c757d !important;
+  color: var(--bs-secondary-color, #6c757d) !important;
 }
 
 .fw-bold {

From ea82ff9103d6801c680f9d2e451d21f09dea8647 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Mon, 3 Aug 2026 16:31:36 +0200
Subject: [PATCH 11/30] style: theme custom scrollbars for dark mode

---
 frontend/src/components/common/FloatingInfoPanel.vue        | 6 +++---
 .../src/components/dashboard/study/ManageStudiesModal.vue   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/common/FloatingInfoPanel.vue b/frontend/src/components/common/FloatingInfoPanel.vue
index 1b939a359..96eaa2248 100644
--- a/frontend/src/components/common/FloatingInfoPanel.vue
+++ b/frontend/src/components/common/FloatingInfoPanel.vue
@@ -402,18 +402,18 @@ export default {
 
 .floating-info-panel::-webkit-scrollbar-track,
 .scoring-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--bs-tertiary-bg, #f1f1f1);
   border-radius: 3px;
 }
 
 .floating-info-panel::-webkit-scrollbar-thumb,
 .scoring-list::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
+  background: var(--bs-secondary-color, #c1c1c1);
   border-radius: 3px;
 }
 
 .floating-info-panel::-webkit-scrollbar-thumb:hover,
 .scoring-list::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
+  background: var(--bs-body-color, #a8a8a8);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/study/ManageStudiesModal.vue b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
index 7fd8e831f..6c39feece 100644
--- a/frontend/src/components/dashboard/study/ManageStudiesModal.vue
+++ b/frontend/src/components/dashboard/study/ManageStudiesModal.vue
@@ -668,16 +668,16 @@ export default {
 }
 
 .selected-items-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: var(--bs-tertiary-bg, #f1f1f1);
 }
 
 .selected-items-list::-webkit-scrollbar-thumb {
-  background: #888;
+  background: var(--bs-secondary-color, #888);
   border-radius: 3px;
 }
 
 .selected-items-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: var(--bs-body-color, #555);
 }
 
 .alert-sm {

From 5dffc1be548fd0d65d47b982dcab3e7b426188af Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 12:30:19 +0200
Subject: [PATCH 12/30] refactor: move theme toggle into avatar dropdown

---
 frontend/src/assets/styles/global.css    | 26 ------------------------
 frontend/src/basic/navigation/Topbar.vue | 17 +++++-----------
 2 files changed, 5 insertions(+), 38 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index aa8ae370f..4feebdbfb 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -60,32 +60,6 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-
-/* Theme toggle: square button matching the project selector's height and styling. */
-.theme-toggle {
-  /* 28.5px matches .project-box rendered height (padding + line-height + border) */
-  height: 28.5px !important;
-  width: 28.5px !important;
-  padding: 0 !important;
-  border-radius: 4px !important;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bs-tertiary-bg, #f5f5f5) !important;
-  border: 1px solid darkblue !important;
-  color: darkblue !important;
-}
-
-[data-bs-theme="dark"] .theme-toggle {
-  background-color: var(--bs-primary) !important;
-  border-color: var(--bs-primary) !important;
-  color: #fff !important;
-}
-
-[data-bs-theme="dark"] .theme-toggle:hover {
-  background-color: #0b5ed7 !important;
-}
-
 /* btn-light is a fixed near-white button; make it theme-aware in dark mode. */
 [data-bs-theme="dark"] .btn-light {
   --bs-btn-bg: var(--bs-secondary-bg);
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index d6132e702..9a7975aad 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -33,18 +33,6 @@
           class="navbar-nav ms-auto mt-2 mt-lg-0"
         />   
         <ul class="navbar-nav">
-          <li class="nav-item ms-3 me-3 d-flex align-items-center">
-            <button
-              class="btn theme-toggle"
-              :title="isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'"
-              @click="toggleTheme()"
-            >
-              <LoadIcon
-                :size="18"
-                :name="isDarkMode ? 'sun' : 'moon-stars'"
-              />
-            </button>
-          </li>
           <!-- v-if moved from the inner div to the li: an empty li still rendered its me-3 margin, causing uneven topbar spacing when the project button is hidden -->
           <li v-if="!isProjectButtonHidden && isInDashboard" class="nav-item me-3">
             <div
@@ -124,6 +112,11 @@
                 >
                   Change password
                 </a>
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  @click.prevent="toggleTheme()"
+                >{{ isDarkMode ? 'Light mode' : 'Dark mode' }}</a>
                 <a
                   class="dropdown-item"
                   href="#"

From 5c9ce43c1132cb2f50e7c65a92fb3828d9577c51 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 13:11:46 +0200
Subject: [PATCH 13/30] feat: invert pdf page canvas in dark mode

---
 frontend/src/assets/styles/global.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 4feebdbfb..882406533 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -130,3 +130,10 @@
 [data-bs-theme="dark"] .pdf-toolbar {
   border: 1px solid var(--bs-border-color);
 }
+
+/* Dark mode PDF pages: invert the rendered canvas, then rotate hues back so
+   coloured figures keep their original hue instead of shifting to the opposite. */
+[data-bs-theme="dark"] canvas.pdf-page {
+  filter: invert(1) hue-rotate(180deg);
+}
+

From 400ee081c5992c910228b1662e0534b091922990 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 13:30:53 +0200
Subject: [PATCH 14/30] refactor: extract applyTheme to shared util

---
 frontend/src/App.vue                     |  7 ++-----
 frontend/src/assets/utils.js             | 15 ++++++++++++++-
 frontend/src/basic/navigation/Topbar.vue |  9 +++------
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3cf4d44e2..55af7c936 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -41,6 +41,7 @@
 <script>
 import Toast from "@/basic/Toast.vue";
 import TopBar from "@/basic/navigation/Topbar.vue";
+import { applyTheme } from "@/assets/utils";
 import Loader from "@/basic/Loading.vue";
 import {createTable} from "@/store/utils";
 import axios from "axios";
@@ -243,15 +244,11 @@ export default {
     }
   },
   methods: {
-    applyTheme(mode) {
-      document.documentElement.setAttribute("data-bs-theme", mode);
-      localStorage.setItem("care.theme", mode);
-    },
     initTheme() {
       const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
       const cached = localStorage.getItem("care.theme");
       const osPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      this.applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
+      applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
     },
     async runCheckLoginFlow() {
       const response = await axios.get(getServerURL() + "/auth/check", {
diff --git a/frontend/src/assets/utils.js b/frontend/src/assets/utils.js
index c71229671..9c75bab48 100644
--- a/frontend/src/assets/utils.js
+++ b/frontend/src/assets/utils.js
@@ -369,4 +369,17 @@ export async function extractTextFromPDF(pdfDocument) {
     }
     
     return fullText;
-}
\ No newline at end of file
+}
+
+/**
+ * Applies a colour theme to the document root and caches it locally so the
+ * correct theme is used on first paint before user settings load.
+ *
+ * @param mode the theme to apply, "light" or "dark"
+ * @returns {void}
+ */
+export function applyTheme(mode) {
+    document.documentElement.setAttribute("data-bs-theme", mode);
+    localStorage.setItem("care.theme", mode);
+}
+
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 9a7975aad..12ba6083a 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -146,6 +146,7 @@
  */
 
 import LoadIcon from "@/basic/Icon.vue";
+import { applyTheme } from "@/assets/utils";
 import LogoSvg from "@/basic/icon/LogoSvg.vue";
 import axios from "axios";
 import getServerURL from "@/assets/serverUrl";
@@ -206,14 +207,10 @@ export default {
       this.$socket.emit("appSettingSet", { key: "projects.default", value: projectId });
       this.showProjectDropdown = false;
     },
-    applyTheme(mode) {
-      document.documentElement.setAttribute("data-bs-theme", mode);
-      this.isDarkMode = mode === "dark";
-      localStorage.setItem("care.theme", mode);
-    },
     toggleTheme() {
       const next = this.isDarkMode ? "light" : "dark";
-      this.applyTheme(next);
+      applyTheme(next);
+      this.isDarkMode = next === "dark";
       this.$socket.emit("appSettingSet", {key: "app.theme.mode", value: next});
     },
     handleClickOutside(event) {

From 9ae1d7a9509c89617ea4881b08915854374ae952 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 13:43:20 +0200
Subject: [PATCH 15/30] style: remove duplicate btn-light override

---
 frontend/src/assets/styles/global.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 882406533..3e4756dae 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -70,16 +70,6 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-/* btn-light is a fixed near-white button; make it theme-aware in dark mode. */
-[data-bs-theme="dark"] .btn-light {
-  --bs-btn-bg: var(--bs-secondary-bg);
-  --bs-btn-color: var(--bs-body-color);
-  --bs-btn-border-color: var(--bs-border-color);
-  --bs-btn-hover-bg: var(--bs-tertiary-bg);
-  --bs-btn-hover-color: var(--bs-body-color);
-  --bs-btn-hover-border-color: var(--bs-border-color);
-}
-
 /* Remaining fixed Bootstrap variants that ignore data-bs-theme. */
 [data-bs-theme="dark"] .btn-dark {
   --bs-btn-bg: var(--bs-secondary-bg);

From 2b2551fd37d8eeb84741a9a53566dee0ad98cfd0 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 14:22:10 +0200
Subject: [PATCH 16/30] fix: reapply theme when user settings load

---
 frontend/src/App.vue                     | 9 +++++++++
 frontend/src/basic/navigation/Topbar.vue | 8 ++++++++
 2 files changed, 17 insertions(+)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 55af7c936..06d42430d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -192,6 +192,15 @@ export default {
     }
   },
   watch: {
+    "$store.state.settings": {
+      handler() {
+        const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
+        if (saved) {
+          applyTheme(saved);
+        }
+      },
+      deep: true,
+    },
     $route(to, from) {
       if (to.meta && to.meta.checkLogin) {
         this.runCheckLoginFlow();
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 12ba6083a..2ea6c3535 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -202,6 +202,14 @@ export default {
   beforeUnmount() {
     this.$refs.topbar.removeEventListener('click', this.handleClickOutside);
   },
+  watch: {
+    "$store.state.settings": {
+      handler() {
+        this.isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
+      },
+      deep: true,
+    },
+  },
   methods: {
     selectProject(projectId) {
       this.$socket.emit("appSettingSet", { key: "projects.default", value: projectId });

From d14666b54e6ab54b69b552a3a47dfe1d0e8a08d6 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 16:16:45 +0200
Subject: [PATCH 17/30] refactor: derive theme state from store and simplify
 overrides

---
 frontend/src/assets/styles/global.css    | 34 ++++++------------------
 frontend/src/basic/navigation/Topbar.vue | 25 ++++++++---------
 2 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 3e4756dae..47d6ed570 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -22,9 +22,14 @@
   }
 }
 
-/* === CARE dark mode overrides === */
-/* Bootstrap's outline-secondary uses the muted grey for text, which is
-   too dim against a dark background. Retarget the button's own variables. */
+/* Dark mode overrides.
+   Bootstrap switches themes when data-bs-theme="dark" is set on <html>, but a
+   few of its classes have a fixed colour built in and stay light regardless.
+   The rules below give those a dark version. Quill and the PDF viewer come
+   from other libraries and do not follow the theme at all, so they are here too.
+   The PDF page is inverted and then hue-rotated back so coloured figures keep
+   their original colours instead of flipping to the opposite. */
+
 [data-bs-theme="dark"] .btn-outline-secondary {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-border-color: var(--bs-border-color);
@@ -33,25 +38,10 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-/* Project selector reads too dim in dark mode; use the brighter blue. */
-[data-bs-theme="dark"] .project-box {
-  border-color: var(--bs-primary) !important;
-  background-color: var(--bs-primary) !important;
-  color: #fff !important;
-}
-
-/* Avatar circle uses a hardcoded darkblue that reads muddy on the dark topbar. */
 [data-bs-theme="dark"] #dropdownMenuButton {
   background: var(--bs-primary) !important;
 }
 
-/* Project selector hover: match the brighter blue used in dark mode. */
-[data-bs-theme="dark"] .project-box:hover {
-  background-color: #0b5ed7 !important;
-  color: #fff !important;
-}
-
-/* btn-outline-dark is near-black by design; invert it in dark mode. */
 [data-bs-theme="dark"] .btn-outline-dark {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-border-color: var(--bs-border-color);
@@ -60,7 +50,6 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-/* btn-light is a fixed near-white button; make it theme-aware in dark mode. */
 [data-bs-theme="dark"] .btn-light {
   --bs-btn-bg: var(--bs-secondary-bg);
   --bs-btn-color: var(--bs-body-color);
@@ -70,7 +59,6 @@
   --bs-btn-hover-border-color: var(--bs-border-color);
 }
 
-/* Remaining fixed Bootstrap variants that ignore data-bs-theme. */
 [data-bs-theme="dark"] .btn-dark {
   --bs-btn-bg: var(--bs-secondary-bg);
   --bs-btn-color: var(--bs-body-color);
@@ -80,13 +68,11 @@
   color: var(--bs-body-color) !important;
 }
 
-/* Disabled controls at 65% opacity lose more contrast on dark than on light. */
 [data-bs-theme="dark"] .btn:disabled,
 [data-bs-theme="dark"] .nav-link.disabled {
   opacity: 0.8;
 }
 
-/* Quill's snow theme is fixed-light; retheme its surfaces and toolbar for dark mode. */
 [data-bs-theme="dark"] .ql-toolbar.ql-snow,
 [data-bs-theme="dark"] .ql-container.ql-snow {
   border-color: var(--bs-border-color);
@@ -116,14 +102,10 @@
   border-color: var(--bs-border-color);
 }
 
-/* Black drop shadows vanish on dark; use a border to define the toolbar edge. */
 [data-bs-theme="dark"] .pdf-toolbar {
   border: 1px solid var(--bs-border-color);
 }
 
-/* Dark mode PDF pages: invert the rendered canvas, then rotate hues back so
-   coloured figures keep their original hue instead of shifting to the opposite. */
 [data-bs-theme="dark"] canvas.pdf-page {
   filter: invert(1) hue-rotate(180deg);
 }
-
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 2ea6c3535..716dfe7ca 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -33,7 +33,6 @@
           class="navbar-nav ms-auto mt-2 mt-lg-0"
         />   
         <ul class="navbar-nav">
-          <!-- v-if moved from the inner div to the li: an empty li still rendered its me-3 margin, causing uneven topbar spacing when the project button is hidden -->
           <li v-if="!isProjectButtonHidden && isInDashboard" class="nav-item me-3">
             <div
               style="
@@ -160,7 +159,6 @@ export default {
   data() {
     return {
       showProjectDropdown: false,
-      isDarkMode: false,
     }
   },
   subscribeTable: [{
@@ -194,22 +192,17 @@ export default {
     consentEnabled() {
       return this.$store.getters["settings/getValue"]("app.config.consent.enabled") === "true";
     },
+    isDarkMode() {
+      const saved = this.$store.getters["settings/getValue"]("app.theme.mode");
+      return (saved || localStorage.getItem("care.theme")) === "dark";
+    },
   },
   mounted() {
     this.$refs.topbar.addEventListener('click', this.handleClickOutside);
-    this.isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
   },
   beforeUnmount() {
     this.$refs.topbar.removeEventListener('click', this.handleClickOutside);
   },
-  watch: {
-    "$store.state.settings": {
-      handler() {
-        this.isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
-      },
-      deep: true,
-    },
-  },
   methods: {
     selectProject(projectId) {
       this.$socket.emit("appSettingSet", { key: "projects.default", value: projectId });
@@ -218,7 +211,6 @@ export default {
     toggleTheme() {
       const next = this.isDarkMode ? "light" : "dark";
       applyTheme(next);
-      this.isDarkMode = next === "dark";
       this.$socket.emit("appSettingSet", {key: "app.theme.mode", value: next});
     },
     handleClickOutside(event) {
@@ -334,4 +326,13 @@ body.sidebar-exists #backButton {
   color: white;
 }
 
+[data-bs-theme="dark"] .project-box {
+  background: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: #fff;
+}
+
+[data-bs-theme="dark"] .project-box:hover {
+  background: var(--bs-primary-border-subtle);
+}
 </style>

From faec2d2d096ff5ad8f2715a6dbe919cae77223ff Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Wed, 5 Aug 2026 23:14:51 +0200
Subject: [PATCH 18/30] fix: tie color-scheme to the selected theme so native
 controls match

---
 frontend/src/assets/styles/global.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 47d6ed570..c6ea87173 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -109,3 +109,13 @@
 [data-bs-theme="dark"] canvas.pdf-page {
   filter: invert(1) hue-rotate(180deg);
 }
+
+/* Bootstrap declares color-scheme: light dark, which lets the browser pick
+   scrollbar and native control colours from the operating system instead of
+   the theme CARE is actually showing. Tie it to our theme instead. */
+html[data-bs-theme="light"] {
+  color-scheme: light;
+}
+html[data-bs-theme="dark"] {
+  color-scheme: dark;
+}

From b6330b6867abefa6f8bd0ab9c0b7ccc23fe4fa03 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Thu, 6 Aug 2026 10:35:27 +0200
Subject: [PATCH 19/30] fix: disable pdf inversion when printing

---
 frontend/src/assets/styles/global.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index c6ea87173..f30d1d5c0 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -119,3 +119,9 @@ html[data-bs-theme="light"] {
 html[data-bs-theme="dark"] {
   color-scheme: dark;
 }
+
+@media print {
+  canvas.pdf-page {
+    filter: none !important;
+  }
+}

From 84b3ea0ee2b3f73405be74c16ce56a8c7278b138 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 00:48:09 +0200
Subject: [PATCH 20/30] style: lighten annotator icons and use outline variants

---
 frontend/src/assets/styles/global.css                     | 2 +-
 frontend/src/components/annotator/Annotator.vue           | 2 +-
 .../src/components/annotator/pdfViewer/PDFToolbar.vue     | 4 ++--
 .../src/components/annotator/sidebar/card/AnnoCard.vue    | 8 ++++----
 .../src/components/annotator/sidebar/card/Comment.vue     | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index f30d1d5c0..a037060d2 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -70,7 +70,7 @@
 
 [data-bs-theme="dark"] .btn:disabled,
 [data-bs-theme="dark"] .nav-link.disabled {
-  opacity: 0.8;
+  opacity: 0.95;
 }
 
 [data-bs-theme="dark"] .ql-toolbar.ql-snow,
diff --git a/frontend/src/components/annotator/Annotator.vue b/frontend/src/components/annotator/Annotator.vue
index cf255fa94..0fdea5127 100644
--- a/frontend/src/components/annotator/Annotator.vue
+++ b/frontend/src/components/annotator/Annotator.vue
@@ -318,7 +318,7 @@ export default {
           id: 'toggle-nlp',
           icon: 'robot',
           title: this.nlpActive ? 'Deactivate NLP support' : 'Activate NLP support',
-          color: this.nlpActive ? '#097969' : '#777777',
+          color: this.nlpActive ? '#12a085' : '#9aa3b0',
           action: 'toggleNlp'
         });
       }
diff --git a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
index b182a0a23..4794f32bf 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
@@ -188,11 +188,11 @@ export default {
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn {
   margin-left: 0;
-  color: var(--bs-secondary-color, #6c757d);
+  color: var(--bs-body-color, #6c757d);
 }
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn:hover {
-  color: var(--bs-secondary-color, #6c757d);
+  color: var(--bs-body-color, #6c757d);
 }
 
 .pdf-toolbar.loading::after {
diff --git a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
index c2fc76f86..eb92634e0 100644
--- a/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
+++ b/frontend/src/components/annotator/sidebar/card/AnnoCard.vue
@@ -65,7 +65,7 @@
           <SidebarButton
                   :loading="false"
                   :props="$props"
-                  icon="x-square-fill"
+                  icon="x-square"
                   title="Cancel"
                   @click="editingTag = false"
           />
@@ -100,14 +100,14 @@
               <SidebarButton
                   :loading="false"
                   :props="$props"
-                  icon="floppy-fill"
+                  icon="floppy"
                   title="Save"
                   @click="save"
               />
               <SidebarButton
                   :loading="false"
                   :props="$props"
-                  icon="x-square-fill"
+                  icon="x-square"
                   title="Cancel"
                   @click="cancel"
               />
@@ -135,7 +135,7 @@
                   v-if="settingResponse && !readOnly"
                   :loading="false"
                   :props="$props"
-                  icon="reply-fill"
+                  icon="reply"
                   title="Reply"
                   @click="$refs.main_comment.reply();maxComments = numChildComments+1; showReplies = true"
               />
diff --git a/frontend/src/components/annotator/sidebar/card/Comment.vue b/frontend/src/components/annotator/sidebar/card/Comment.vue
index 2bd33d674..9d7a1db24 100644
--- a/frontend/src/components/annotator/sidebar/card/Comment.vue
+++ b/frontend/src/components/annotator/sidebar/card/Comment.vue
@@ -91,14 +91,14 @@
             <SidebarButton
               :loading="false"
               :props="$props"
-              icon="save-fill"
+              icon="floppy"
               title="Save (Ctrl+Enter)"
               @click="save"
             />
             <SidebarButton
               :loading="false"
               :props="$props"
-              icon="x-square-fill"
+              icon="x-square"
               title="Cancel"
               @click="cancel"
             />
@@ -115,7 +115,7 @@
               v-if="settingResponse && !readOnly"
               :loading="false"
               :props="$props"
-              icon="reply-fill"
+              icon="reply"
               title="Reply"
               @click="reply(); maxComments = numChildComments+1"
             />

From 0a8771daf8eab1e2683b47177bd88b1f90689b0f Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 00:55:44 +0200
Subject: [PATCH 21/30] fix: give pdf page separator an explicit colour and
 width

---
 frontend/src/components/annotator/pdfViewer/PDFPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/annotator/pdfViewer/PDFPage.vue b/frontend/src/components/annotator/pdfViewer/PDFPage.vue
index 14ec735b5..6616ff7fd 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFPage.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFPage.vue
@@ -376,7 +376,7 @@ export default {
 <style>
 .pageContainer {
   position: relative;
-  border-bottom-style: solid;
+  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .pageLoader {

From 0c660c6fadac4b22e0bcc5353dcce1652a41e594 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 01:14:43 +0200
Subject: [PATCH 22/30] feat: add per-document light mode toggle to pdf toolbar

---
 frontend/src/assets/styles/global.css                |  8 ++++----
 .../components/annotator/pdfViewer/PDFToolbar.vue    | 12 ++++++++++--
 .../src/components/annotator/pdfViewer/PDFViewer.vue |  5 ++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index a037060d2..ffa5a39a3 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -27,8 +27,8 @@
    few of its classes have a fixed colour built in and stay light regardless.
    The rules below give those a dark version. Quill and the PDF viewer come
    from other libraries and do not follow the theme at all, so they are here too.
-   The PDF page is inverted and then hue-rotated back so coloured figures keep
-   their original colours instead of flipping to the opposite. */
+   The PDF page is inverted and tinted cool so it sits with the rest of the dark UI
+   rather than looking warm and out of place. */
 
 [data-bs-theme="dark"] .btn-outline-secondary {
   --bs-btn-color: var(--bs-body-color);
@@ -106,8 +106,8 @@
   border: 1px solid var(--bs-border-color);
 }
 
-[data-bs-theme="dark"] canvas.pdf-page {
-  filter: invert(1) hue-rotate(180deg);
+[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) canvas.pdf-page {
+  filter: invert(0.88) grayscale(0.85) sepia(0.3) hue-rotate(185deg) saturate(1.4);
 }
 
 /* Bootstrap declares color-scheme: light dark, which lets the browser pick
diff --git a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
index 4794f32bf..e8f5c7970 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
@@ -26,13 +26,17 @@
         :fields="zoomFields"
         @update:model-value="$emit('update:zoomFormData', $event)"
       />
+      <TopBarButton
+        :icon="pdfDarkMode ? 'sun' : 'moon-stars'"
+        @click="$emit('toggle-pdf-theme')"
+      />
     </template>
 
     <!-- Toggle Button (always visible) -->
     <BasicButton
       class="toolbar-toggle-btn"
       :icon="toolbarVisible ? 'chevron-right' : 'tools'"
-      tooltip="toolbarVisible ? 'Minimize Toolbar' : 'Show Toolbar'"
+      :tooltip="toolbarVisible ? 'Minimize Toolbar' : 'Show Toolbar'"
       @click="toggleToolbar"
     />
   </div>
@@ -70,8 +74,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfDarkMode: {
+      type: Boolean,
+      default: true,
+    },
   },
-  emits: ['update:model-value', 'update:zoomFormData', 'zoom-in', 'zoom-out', 'reset'],
+  emits: ['update:model-value', 'update:zoomFormData', 'zoom-in', 'zoom-out', 'reset', 'toggle-pdf-theme'],
   data() {
     return {
       baseZoomOptions: this.generateZoomOptions(50, 200, 10),
diff --git a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
index 8714965b9..f5be11ddc 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
@@ -14,6 +14,8 @@
       v-model="toolbarVisible"
       :zoom-form-data="zoomFormData"
       :is-zooming="isZooming"
+      :pdf-dark-mode="pdfDarkMode"
+      @toggle-pdf-theme="pdfDarkMode = !pdfDarkMode"
       @update:zoom-form-data="zoomFormData = $event"
       @zoom-in="zoomIn"
       @zoom-out="zoomOut"
@@ -25,7 +27,7 @@
       :key="'PDFPageKey' + page"
       :page-number="page"
       :render="renderCheck[page - 1]"
-      :class="'scrolling-page'"
+      :class="['scrolling-page', { 'pdf-light': !pdfDarkMode }]"
       :zoom-value="scale"
       @update-visibility="updateVisibility"
     />
@@ -113,6 +115,7 @@ export default {
       zoomFormData: {
         zoom: 1.0,
       },
+      pdfDarkMode: true,
     }
   },
   computed: {

From d380c4302a7996103866d36e3fedaf2e2be77c28 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 01:24:31 +0200
Subject: [PATCH 23/30] style: use care yellow as the dark mode accent colour

---
 frontend/src/assets/styles/global.css    | 44 +++++++++++++++++++++++-
 frontend/src/basic/navigation/Topbar.vue |  8 ++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index ffa5a39a3..39637533d 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -39,7 +39,8 @@
 }
 
 [data-bs-theme="dark"] #dropdownMenuButton {
-  background: var(--bs-primary) !important;
+  color: #212529 !important;
+  background: #ffe599 !important;
 }
 
 [data-bs-theme="dark"] .btn-outline-dark {
@@ -125,3 +126,44 @@ html[data-bs-theme="dark"] {
     filter: none !important;
   }
 }
+
+/* Dark mode uses CARE's logo yellow as the accent instead of Bootstrap's blue,
+   with dark text on top since the yellow is too light for white. Bootstrap's
+   button and form-control colours are set per component, so each family needs
+   its own override rather than a single variable change. */
+[data-bs-theme="dark"] .btn-primary {
+  --bs-btn-bg: #ffe599;
+  --bs-btn-border-color: #ffe599;
+  --bs-btn-color: #212529;
+  --bs-btn-hover-bg: #f5d77e;
+  --bs-btn-hover-border-color: #f5d77e;
+  --bs-btn-hover-color: #212529;
+  --bs-btn-active-bg: #e8c86a;
+  --bs-btn-active-border-color: #e8c86a;
+  --bs-btn-active-color: #212529;
+}
+
+[data-bs-theme="dark"] .page-item.active .page-link {
+  background-color: #ffe599;
+  border-color: #ffe599;
+  color: #212529;
+}
+
+[data-bs-theme="dark"] .form-check-input:checked {
+  background-color: #ffe599;
+  border-color: #ffe599;
+}
+
+[data-bs-theme="dark"] .form-check-input:focus {
+  border-color: #ffe599;
+  box-shadow: 0 0 0 0.25rem rgba(255, 229, 153, 0.25);
+}
+
+[data-bs-theme="dark"] .form-switch .form-check-input:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffe599'/%3e%3c/svg%3e");
+}
+
+[data-bs-theme="dark"] .form-switch .form-check-input:checked,
+[data-bs-theme="dark"] .form-switch .form-check-input:checked:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
+}
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index 716dfe7ca..b85a18b7b 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -327,12 +327,12 @@ body.sidebar-exists #backButton {
 }
 
 [data-bs-theme="dark"] .project-box {
-  background: var(--bs-primary);
-  border-color: var(--bs-primary);
-  color: #fff;
+  background: #ffe599;
+  border-color: #ffe599;
+  color: #212529;
 }
 
 [data-bs-theme="dark"] .project-box:hover {
-  background: var(--bs-primary-border-subtle);
+  background: #f5d77e;
 }
 </style>

From b3f90614f92060c9a949d2be64a0d0bd8a62554c Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 01:30:32 +0200
Subject: [PATCH 24/30] fix: keep toast close button visible in dark mode

---
 frontend/src/assets/styles/global.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 39637533d..ad4bafde4 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -167,3 +167,9 @@ html[data-bs-theme="dark"] {
 [data-bs-theme="dark"] .form-switch .form-check-input:checked:focus {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
 }
+
+/* bootstrap-vue-3 hardcodes light toast colours, so the close button must not be
+   inverted to white the way Bootstrap does for dark backgrounds. */
+[data-bs-theme="dark"] .b-toast .btn-close {
+  filter: none;
+}

From 7666e20bc6b377761dac7ca414a34f7d988d3aca Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 01:43:15 +0200
Subject: [PATCH 25/30] refactor: centralise dark mode accent colours and
 persist pdf theme choice

---
 frontend/src/assets/styles/global.css         | 179 ++++++++++--------
 .../annotator/pdfViewer/PDFViewer.vue         |  10 +-
 2 files changed, 110 insertions(+), 79 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index ad4bafde4..cdd49e4db 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -22,27 +22,39 @@
   }
 }
 
-/* Dark mode overrides.
-   Bootstrap switches themes when data-bs-theme="dark" is set on <html>, but a
-   few of its classes have a fixed colour built in and stay light regardless.
-   The rules below give those a dark version. Quill and the PDF viewer come
-   from other libraries and do not follow the theme at all, so they are here too.
-   The PDF page is inverted and tinted cool so it sits with the rest of the dark UI
-   rather than looking warm and out of place. */
-
-[data-bs-theme="dark"] .btn-outline-secondary {
-  --bs-btn-color: var(--bs-body-color);
-  --bs-btn-border-color: var(--bs-border-color);
-  --bs-btn-hover-bg: var(--bs-secondary-bg);
-  --bs-btn-hover-color: var(--bs-body-color);
-  --bs-btn-hover-border-color: var(--bs-border-color);
+/* ===== Dark mode =====
+   Bootstrap switches themes when data-bs-theme="dark" is set on <html>. Most of
+   CARE follows automatically, but three things need help here:
+   1. A few Bootstrap classes have a fixed colour built in and stay light.
+   2. Dark mode uses CARE's logo yellow as the accent instead of Bootstrap's
+      blue, with dark text on top since the yellow is too light for white.
+      Bootstrap sets button and form-control colours per component, so each
+      family needs its own override rather than one variable change.
+   3. Quill, the PDF viewer and bootstrap-vue-3 come from other libraries and
+      do not follow the theme at all. */
+
+html[data-bs-theme="dark"] {
+  --care-accent: #ffe599;
+  --care-accent-hover: #f5d77e;
+  --care-accent-active: #e8c86a;
+  --care-on-accent: #212529;
 }
 
-[data-bs-theme="dark"] #dropdownMenuButton {
-  color: #212529 !important;
-  background: #ffe599 !important;
+/* Tell the browser which theme is showing. Bootstrap declares
+   color-scheme: light dark, which lets the browser pick scrollbar and native
+   control colours from the operating system rather than from CARE. The html
+   prefix beats Bootstrap's own rule on specificity. */
+html[data-bs-theme="light"] {
+  color-scheme: light;
+}
+
+html[data-bs-theme="dark"] {
+  color-scheme: dark;
 }
 
+/* --- Bootstrap classes with a fixed colour --- */
+
+[data-bs-theme="dark"] .btn-outline-secondary,
 [data-bs-theme="dark"] .btn-outline-dark {
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-border-color: var(--bs-border-color);
@@ -65,111 +77,126 @@
   --bs-btn-color: var(--bs-body-color);
   --bs-btn-border-color: var(--bs-border-color);
 }
+
 [data-bs-theme="dark"] .text-dark {
   color: var(--bs-body-color) !important;
 }
 
+/* Disabled controls lose more contrast against dark than against white. */
 [data-bs-theme="dark"] .btn:disabled,
 [data-bs-theme="dark"] .nav-link.disabled {
-  opacity: 0.95;
+  opacity: 0.85;
+}
+
+/* --- Accent colour --- */
+
+[data-bs-theme="dark"] .btn-primary {
+  --bs-btn-bg: var(--care-accent);
+  --bs-btn-border-color: var(--care-accent);
+  --bs-btn-color: var(--care-on-accent);
+  --bs-btn-hover-bg: var(--care-accent-hover);
+  --bs-btn-hover-border-color: var(--care-accent-hover);
+  --bs-btn-hover-color: var(--care-on-accent);
+  --bs-btn-active-bg: var(--care-accent-active);
+  --bs-btn-active-border-color: var(--care-accent-active);
+  --bs-btn-active-color: var(--care-on-accent);
+}
+
+[data-bs-theme="dark"] #dropdownMenuButton {
+  background: var(--care-accent);
+  color: var(--care-on-accent);
 }
 
+[data-bs-theme="dark"] .page-item.active .page-link {
+  background-color: var(--care-accent);
+  border-color: var(--care-accent);
+  color: var(--care-on-accent);
+}
+
+[data-bs-theme="dark"] .form-check-input:checked {
+  background-color: var(--care-accent);
+  border-color: var(--care-accent);
+}
+
+[data-bs-theme="dark"] .form-check-input:focus {
+  border-color: var(--care-accent);
+  box-shadow: 0 0 0 0.25rem rgba(255, 229, 153, 0.25);
+}
+
+/* The switch knob is a background image, so each state needs its own SVG. */
+[data-bs-theme="dark"] .form-switch .form-check-input:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffe599'/%3e%3c/svg%3e");
+}
+
+[data-bs-theme="dark"] .form-switch .form-check-input:checked,
+[data-bs-theme="dark"] .form-switch .form-check-input:checked:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
+}
+
+/* --- Quill editor --- */
+
 [data-bs-theme="dark"] .ql-toolbar.ql-snow,
 [data-bs-theme="dark"] .ql-container.ql-snow {
   border-color: var(--bs-border-color);
 }
+
 [data-bs-theme="dark"] .ql-toolbar.ql-snow {
   background-color: var(--bs-tertiary-bg);
 }
+
 [data-bs-theme="dark"] .ql-container.ql-snow,
 [data-bs-theme="dark"] .ql-editor {
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
 }
+
 [data-bs-theme="dark"] .ql-editor.ql-blank::before {
   color: var(--bs-secondary-color);
 }
+
+/* Quill draws its toolbar icons as SVG, so they need stroke and fill. */
 [data-bs-theme="dark"] .ql-snow .ql-stroke {
   stroke: var(--bs-body-color);
 }
+
 [data-bs-theme="dark"] .ql-snow .ql-fill {
   fill: var(--bs-body-color);
 }
+
 [data-bs-theme="dark"] .ql-snow .ql-picker {
   color: var(--bs-body-color);
 }
+
 [data-bs-theme="dark"] .ql-snow .ql-picker-options {
   background-color: var(--bs-body-bg);
   border-color: var(--bs-border-color);
 }
 
+/* --- Toasts --- */
+
+/* bootstrap-vue-3 hardcodes light toast colours, so the close button must not be
+   inverted to white the way Bootstrap does for dark backgrounds. */
+[data-bs-theme="dark"] .b-toast .btn-close {
+  filter: none;
+}
+
+/* --- PDF viewer --- */
+
+/* A black drop shadow is invisible on dark, so define the edge with a border. */
 [data-bs-theme="dark"] .pdf-toolbar {
   border: 1px solid var(--bs-border-color);
 }
 
+/* Invert the rendered page, then tint it cool so it sits with the rest of the
+   dark UI rather than looking warm. Skipped when the reader has switched an
+   individual document back to light from the toolbar. */
 [data-bs-theme="dark"] .scrolling-page:not(.pdf-light) canvas.pdf-page {
   filter: invert(0.88) grayscale(0.85) sepia(0.3) hue-rotate(185deg) saturate(1.4);
 }
 
-/* Bootstrap declares color-scheme: light dark, which lets the browser pick
-   scrollbar and native control colours from the operating system instead of
-   the theme CARE is actually showing. Tie it to our theme instead. */
-html[data-bs-theme="light"] {
-  color-scheme: light;
-}
-html[data-bs-theme="dark"] {
-  color-scheme: dark;
-}
-
+/* Printing a dark page wastes ink and reads badly, so never invert for print. */
 @media print {
   canvas.pdf-page {
     filter: none !important;
   }
-}
-
-/* Dark mode uses CARE's logo yellow as the accent instead of Bootstrap's blue,
-   with dark text on top since the yellow is too light for white. Bootstrap's
-   button and form-control colours are set per component, so each family needs
-   its own override rather than a single variable change. */
-[data-bs-theme="dark"] .btn-primary {
-  --bs-btn-bg: #ffe599;
-  --bs-btn-border-color: #ffe599;
-  --bs-btn-color: #212529;
-  --bs-btn-hover-bg: #f5d77e;
-  --bs-btn-hover-border-color: #f5d77e;
-  --bs-btn-hover-color: #212529;
-  --bs-btn-active-bg: #e8c86a;
-  --bs-btn-active-border-color: #e8c86a;
-  --bs-btn-active-color: #212529;
-}
-
-[data-bs-theme="dark"] .page-item.active .page-link {
-  background-color: #ffe599;
-  border-color: #ffe599;
-  color: #212529;
-}
-
-[data-bs-theme="dark"] .form-check-input:checked {
-  background-color: #ffe599;
-  border-color: #ffe599;
-}
-
-[data-bs-theme="dark"] .form-check-input:focus {
-  border-color: #ffe599;
-  box-shadow: 0 0 0 0.25rem rgba(255, 229, 153, 0.25);
-}
-
-[data-bs-theme="dark"] .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffe599'/%3e%3c/svg%3e");
-}
-
-[data-bs-theme="dark"] .form-switch .form-check-input:checked,
-[data-bs-theme="dark"] .form-switch .form-check-input:checked:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
-}
-
-/* bootstrap-vue-3 hardcodes light toast colours, so the close button must not be
-   inverted to white the way Bootstrap does for dark backgrounds. */
-[data-bs-theme="dark"] .b-toast .btn-close {
-  filter: none;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
index f5be11ddc..3ef0d96b8 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
@@ -15,7 +15,7 @@
       :zoom-form-data="zoomFormData"
       :is-zooming="isZooming"
       :pdf-dark-mode="pdfDarkMode"
-      @toggle-pdf-theme="pdfDarkMode = !pdfDarkMode"
+      @toggle-pdf-theme="togglePdfTheme"
       @update:zoom-form-data="zoomFormData = $event"
       @zoom-in="zoomIn"
       @zoom-out="zoomOut"
@@ -115,7 +115,7 @@ export default {
       zoomFormData: {
         zoom: 1.0,
       },
-      pdfDarkMode: true,
+      pdfDarkMode: localStorage.getItem("care.pdfDark") !== "false",
     }
   },
   computed: {
@@ -196,6 +196,10 @@ export default {
     this.pdf = null;
   },
   methods: {
+    togglePdfTheme() {
+      this.pdfDarkMode = !this.pdfDarkMode;
+      localStorage.setItem("care.pdfDark", this.pdfDarkMode);
+    },
     zoomIn() {
       if (this.isZooming) return;
       this.isZooming = true;
@@ -252,7 +256,7 @@ export default {
       this.$emit('copy', event);
     },
   },
-
+  
 }
 </script>
 

From 5e1123e742ff3b621b3d1a72de9f0fe66480ba44 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sat, 8 Aug 2026 01:45:52 +0200
Subject: [PATCH 26/30] refactor: keep topbar theming in its own component

---
 frontend/src/assets/styles/global.css    |  4 ----
 frontend/src/basic/navigation/Topbar.vue | 13 +++++++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index cdd49e4db..b9e9cf445 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -102,10 +102,6 @@ html[data-bs-theme="dark"] {
   --bs-btn-active-color: var(--care-on-accent);
 }
 
-[data-bs-theme="dark"] #dropdownMenuButton {
-  background: var(--care-accent);
-  color: var(--care-on-accent);
-}
 
 [data-bs-theme="dark"] .page-item.active .page-link {
   background-color: var(--care-accent);
diff --git a/frontend/src/basic/navigation/Topbar.vue b/frontend/src/basic/navigation/Topbar.vue
index b85a18b7b..a6419163e 100644
--- a/frontend/src/basic/navigation/Topbar.vue
+++ b/frontend/src/basic/navigation/Topbar.vue
@@ -326,13 +326,18 @@ body.sidebar-exists #backButton {
   color: white;
 }
 
+[data-bs-theme="dark"] #dropdownMenuButton {
+  background: var(--care-accent);
+  color: var(--care-on-accent);
+}
+
 [data-bs-theme="dark"] .project-box {
-  background: #ffe599;
-  border-color: #ffe599;
-  color: #212529;
+  background: var(--care-accent);
+  border-color: var(--care-accent);
+  color: var(--care-on-accent);
 }
 
 [data-bs-theme="dark"] .project-box:hover {
-  background: #f5d77e;
+  background: var(--care-accent-hover);
 }
 </style>

From dfeab50c47003e52cb2c8ba956a1f3ac0987f7cd Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sun, 9 Aug 2026 23:24:47 +0200
Subject: [PATCH 27/30] style: make annotation highlights visible over dark pdf
 pages

---
 frontend/src/assets/styles/global.css         | 22 +++++++++++++++++--
 .../annotator/pdfViewer/Highlights.vue        | 16 +++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index b9e9cf445..eced6efd7 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -187,7 +187,7 @@ html[data-bs-theme="dark"] {
    dark UI rather than looking warm. Skipped when the reader has switched an
    individual document back to light from the toolbar. */
 [data-bs-theme="dark"] .scrolling-page:not(.pdf-light) canvas.pdf-page {
-  filter: invert(0.88) grayscale(0.85) sepia(0.3) hue-rotate(185deg) saturate(1.4);
+  filter: invert(0.88) grayscale(0.4) sepia(0.35) hue-rotate(185deg) saturate(2.2);
 }
 
 /* Printing a dark page wastes ink and reads badly, so never invert for print. */
@@ -195,4 +195,22 @@ html[data-bs-theme="dark"] {
   canvas.pdf-page {
     filter: none !important;
   }
-}
\ No newline at end of file
+}
+
+/* A pure white page glares against the dark UI when the reader switches an
+   individual document back to light, so soften it. Brightness scales all
+   channels equally, which keeps figure colours accurate. */
+[data-bs-theme="dark"] .pdf-light canvas.pdf-page {
+  filter: brightness(0.93);
+}
+
+/* Annotation highlights are SVG rects blended with multiply, which works like a
+   marker pen on white paper but produces almost nothing over a dark page.
+   Screen lightens instead of darkens, so the band stays visible. */
+[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) svg.highlight-layer {
+  mix-blend-mode: screen !important;
+}
+
+[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) .svg-highlight {
+  opacity: 0.4 !important;
+}
diff --git a/frontend/src/components/annotator/pdfViewer/Highlights.vue b/frontend/src/components/annotator/pdfViewer/Highlights.vue
index de063d404..33966fbdf 100644
--- a/frontend/src/components/annotator/pdfViewer/Highlights.vue
+++ b/frontend/src/components/annotator/pdfViewer/Highlights.vue
@@ -220,22 +220,22 @@ export default {
         if (tag) {
           switch (tag.colorCode) {
             case "success":
-              return "009933";
+              return "4dd47a";
             case "danger":
-              return "e05f5f";
+              return "f08a8a";
             case "info":
-              return "5fe0df";
+              return "8ceceb";
             case "dark":
-              return "c8c8c8";
+              return "e0e0e0";
             case "warning":
-              return "eed042";
+              return "f5e07a";
             case "secondary":
-              return "4290ee";
+              return "7db3f5";
             default:
-              return "4c86f7";
+              return "82adf9";
           }
         } else {
-          return "efea7b";
+          return "f5f2a8";
         }
       }
     },

From 6319f4e33904aaa05b6e5c8a288bb0b94a130956 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sun, 9 Aug 2026 23:29:06 +0200
Subject: [PATCH 28/30] style: deepen the dark mode accent colour

---
 frontend/src/assets/styles/global.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index eced6efd7..977100a50 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -34,9 +34,9 @@
       do not follow the theme at all. */
 
 html[data-bs-theme="dark"] {
-  --care-accent: #ffe599;
-  --care-accent-hover: #f5d77e;
-  --care-accent-active: #e8c86a;
+  --care-accent: #e8cd7d;
+  --care-accent-hover: #dcbf68;
+  --care-accent-active: #cfb055;
   --care-on-accent: #212529;
 }
 
@@ -116,12 +116,12 @@ html[data-bs-theme="dark"] {
 
 [data-bs-theme="dark"] .form-check-input:focus {
   border-color: var(--care-accent);
-  box-shadow: 0 0 0 0.25rem rgba(255, 229, 153, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(232, 205, 125, 0.25);
 }
 
 /* The switch knob is a background image, so each state needs its own SVG. */
 [data-bs-theme="dark"] .form-switch .form-check-input:focus {
-  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffe599'/%3e%3c/svg%3e");
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e8cd7d'/%3e%3c/svg%3e");
 }
 
 [data-bs-theme="dark"] .form-switch .form-check-input:checked,

From a82a26058d87ac65cad5e0126d42e4e7e2366917 Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sun, 9 Aug 2026 23:30:48 +0200
Subject: [PATCH 29/30] style: reduce the blue cast on dark pdf pages

---
 frontend/src/assets/styles/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 977100a50..33dc8ab41 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -187,7 +187,7 @@ html[data-bs-theme="dark"] {
    dark UI rather than looking warm. Skipped when the reader has switched an
    individual document back to light from the toolbar. */
 [data-bs-theme="dark"] .scrolling-page:not(.pdf-light) canvas.pdf-page {
-  filter: invert(0.88) grayscale(0.4) sepia(0.35) hue-rotate(185deg) saturate(2.2);
+  filter: invert(0.88) grayscale(0.4) sepia(0.15) hue-rotate(185deg) saturate(2.2);
 }
 
 /* Printing a dark page wastes ink and reads badly, so never invert for print. */

From 95010ef4df4a97230ec7675f80602e963fe563df Mon Sep 17 00:00:00 2001
From: Ilyas Mohammed <ilyasmohammed2023@gmail.com>
Date: Sun, 9 Aug 2026 23:56:04 +0200
Subject: [PATCH 30/30] feat: make pdf theme independent of the app theme

---
 frontend/src/assets/styles/global.css                     | 8 ++++----
 frontend/src/components/annotator/pdfViewer/PDFViewer.vue | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 33dc8ab41..2f1749c9d 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -186,7 +186,7 @@ html[data-bs-theme="dark"] {
 /* Invert the rendered page, then tint it cool so it sits with the rest of the
    dark UI rather than looking warm. Skipped when the reader has switched an
    individual document back to light from the toolbar. */
-[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) canvas.pdf-page {
+.scrolling-page.pdf-dark canvas.pdf-page {
   filter: invert(0.88) grayscale(0.4) sepia(0.15) hue-rotate(185deg) saturate(2.2);
 }
 
@@ -200,17 +200,17 @@ html[data-bs-theme="dark"] {
 /* A pure white page glares against the dark UI when the reader switches an
    individual document back to light, so soften it. Brightness scales all
    channels equally, which keeps figure colours accurate. */
-[data-bs-theme="dark"] .pdf-light canvas.pdf-page {
+[data-bs-theme="dark"] .scrolling-page:not(.pdf-dark) canvas.pdf-page {
   filter: brightness(0.93);
 }
 
 /* Annotation highlights are SVG rects blended with multiply, which works like a
    marker pen on white paper but produces almost nothing over a dark page.
    Screen lightens instead of darkens, so the band stays visible. */
-[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) svg.highlight-layer {
+.scrolling-page.pdf-dark svg.highlight-layer {
   mix-blend-mode: screen !important;
 }
 
-[data-bs-theme="dark"] .scrolling-page:not(.pdf-light) .svg-highlight {
+.scrolling-page.pdf-dark .svg-highlight {
   opacity: 0.4 !important;
 }
diff --git a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
index 3ef0d96b8..2d23e8072 100644
--- a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
+++ b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
@@ -27,7 +27,7 @@
       :key="'PDFPageKey' + page"
       :page-number="page"
       :render="renderCheck[page - 1]"
-      :class="['scrolling-page', { 'pdf-light': !pdfDarkMode }]"
+      :class="['scrolling-page', { 'pdf-dark': pdfDarkMode }]"
       :zoom-value="scale"
       @update-visibility="updateVisibility"
     />
@@ -115,7 +115,9 @@ export default {
       zoomFormData: {
         zoom: 1.0,
       },
-      pdfDarkMode: localStorage.getItem("care.pdfDark") !== "false",
+      pdfDarkMode: localStorage.getItem("care.pdfDark") !== null
+        ? localStorage.getItem("care.pdfDark") === "true"
+        : document.documentElement.getAttribute("data-bs-theme") === "dark",
     }
   },
   computed: {