diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d0128dcb8..06d42430d 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";
@@ -191,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();
@@ -232,6 +242,7 @@ export default {
     this.connect();
   },
   async mounted() {
+    this.initTheme();
     if (this.$route.meta.checkLogin) {
       await this.runCheckLoginFlow();
     }
@@ -242,6 +253,12 @@ export default {
     }
   },
   methods: {
+    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;
+      applyTheme(saved || cached || (osPrefersDark ? "dark" : "light"));
+    },
     async runCheckLoginFlow() {
       const response = await axios.get(getServerURL() + "/auth/check", {
         withCredentials: true,
diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 341251c4c..2f1749c9d 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-radius: 4px;
-  background-color: #ffebee;
+  border: 1px solid var(--bs-danger-border-subtle);
+  border-radius: 4px !important;
+  background-color: var(--bs-danger-bg-subtle);
 
   > p {
     margin-bottom: 0.5rem;
@@ -21,3 +21,196 @@
     line-height: 1.4;
   }
 }
+
+/* ===== 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: #e8cd7d;
+  --care-accent-hover: #dcbf68;
+  --care-accent-active: #cfb055;
+  --care-on-accent: #212529;
+}
+
+/* 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);
+  --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);
+}
+
+[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);
+}
+
+[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 lose more contrast against dark than against white. */
+[data-bs-theme="dark"] .btn:disabled,
+[data-bs-theme="dark"] .nav-link.disabled {
+  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"] .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(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='%23e8cd7d'/%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. */
+.scrolling-page.pdf-dark canvas.pdf-page {
+  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. */
+@media print {
+  canvas.pdf-page {
+    filter: none !important;
+  }
+}
+
+/* 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"] .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. */
+.scrolling-page.pdf-dark svg.highlight-layer {
+  mix-blend-mode: screen !important;
+}
+
+.scrolling-page.pdf-dark .svg-highlight {
+  opacity: 0.4 !important;
+}
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/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 088b133a6..c1d499876 100644
--- a/frontend/src/auth/TwoFactorSelect.vue
+++ b/frontend/src/auth/TwoFactorSelect.vue
@@ -232,13 +232,13 @@ form {
 }
 
 .method-card:hover {
-  background-color: #f8f9fa;
-  border-color: #0d6efd;
+  background-color: var(--bs-tertiary-bg, #f8f9fa);
+  border-color: var(--bs-primary, #0d6efd);
 }
 
 .method-card.selected {
-  border-color: #0d6efd;
-  background-color: #e7f1ff;
+  border-color: var(--bs-primary, #0d6efd);
+  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/Sidebar.vue b/frontend/src/basic/Sidebar.vue
index d6a537faf..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">
@@ -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..e09efe266 100644
--- a/frontend/src/basic/modal/StepperModal.vue
+++ b/frontend/src/basic/modal/StepperModal.vue
@@ -203,13 +203,13 @@ 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;
 
   &:before {
@@ -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..a6419163e 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"
@@ -33,9 +33,8 @@
           class="navbar-nav ms-auto mt-2 mt-lg-0"
         />   
         <ul class="navbar-nav">
-          <li class="nav-item me-3">
+          <li v-if="!isProjectButtonHidden && isInDashboard" class="nav-item me-3">
             <div
-              v-if="!isProjectButtonHidden && isInDashboard"
               style="
                 position: relative;
                 display: flex;
@@ -112,6 +111,11 @@
                 >
                   Change password
                 </a>
+                <a
+                  class="dropdown-item"
+                  href="#"
+                  @click.prevent="toggleTheme()"
+                >{{ isDarkMode ? 'Light mode' : 'Dark mode' }}</a>
                 <a
                   class="dropdown-item"
                   href="#"
@@ -141,6 +145,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";
@@ -187,6 +192,10 @@ 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);
@@ -199,6 +208,11 @@ export default {
       this.$socket.emit("appSettingSet", { key: "projects.default", value: projectId });
       this.showProjectDropdown = false;
     },
+    toggleTheme() {
+      const next = this.isDarkMode ? "light" : "dark";
+      applyTheme(next);
+      this.$socket.emit("appSettingSet", {key: "app.theme.mode", value: next});
+    },
     handleClickOutside(event) {
         if (!this.$el.contains(event.target)) {
           this.showProjectDropdown = false;
@@ -290,7 +304,7 @@ body.sidebar-exists #backButton {
   display: flex;
   align-items: center;
   padding: 2px 10px;
-  background: #f5f5f5;
+  background: var(--bs-tertiary-bg, #f5f5f5);
   border: 1px solid darkblue;
   color: darkblue;
   border-radius: 4px;
@@ -312,4 +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: var(--care-accent);
+  border-color: var(--care-accent);
+  color: var(--care-on-accent);
+}
+
+[data-bs-theme="dark"] .project-box:hover {
+  background: var(--care-accent-hover);
+}
 </style>
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..66d01fd0d 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>
@@ -42,7 +42,7 @@
       </span>
       <LoadIcon
           :size="22"
-          :color="'#800000'"
+          :color="'var(--bs-danger-text-emphasis)'"
           icon-name="lock-fill"
       />
     </div>
@@ -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/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/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";
         }
       }
     },
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 {
diff --git a/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue b/frontend/src/components/annotator/pdfViewer/PDFToolbar.vue
index 8bb797c33..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),
@@ -136,7 +144,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 +168,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);
 }
@@ -175,24 +183,24 @@ 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;
 }
 
 .toolbar-toggle-btn:hover {
-  background: #e9ecef;
+  background: var(--bs-secondary-bg, #e9ecef);
   transform: scale(1.1);
 }
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn {
   margin-left: 0;
-  color: #6c757d;
+  color: var(--bs-body-color, #6c757d);
 }
 
 .pdf-toolbar.collapsed .toolbar-toggle-btn:hover {
-  color: #6c757d;
+  color: var(--bs-body-color, #6c757d);
 }
 
 .pdf-toolbar.loading::after {
@@ -202,7 +210,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;
diff --git a/frontend/src/components/annotator/pdfViewer/PDFViewer.vue b/frontend/src/components/annotator/pdfViewer/PDFViewer.vue
index 8714965b9..2d23e8072 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="togglePdfTheme"
       @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-dark': pdfDarkMode }]"
       :zoom-value="scale"
       @update-visibility="updateVisibility"
     />
@@ -113,6 +115,9 @@ export default {
       zoomFormData: {
         zoom: 1.0,
       },
+      pdfDarkMode: localStorage.getItem("care.pdfDark") !== null
+        ? localStorage.getItem("care.pdfDark") === "true"
+        : document.documentElement.getAttribute("data-bs-theme") === "dark",
     }
   },
   computed: {
@@ -193,6 +198,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;
@@ -249,7 +258,7 @@ export default {
       this.$emit('copy', event);
     },
   },
-
+  
 }
 </script>
 
diff --git a/frontend/src/components/annotator/sidebar/Sidebar.vue b/frontend/src/components/annotator/sidebar/Sidebar.vue
index 718cfe386..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>
@@ -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..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"
               />
@@ -689,7 +689,7 @@ export default {
 
 .replies {
   font-size: smaller;
-  color: #929292;
+  color: var(--bs-secondary-color, #929292);
 }
 
 @keyframes flickerAnimation {
@@ -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 {
@@ -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..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"
             />
@@ -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..96eaa2248 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 */
 }
@@ -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;
 }
 
@@ -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 {
@@ -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/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/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/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..6c39feece 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;
 }
@@ -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;
 }
@@ -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;
 }
 
@@ -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 {
@@ -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;
 }
 
@@ -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 {
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/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/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>
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..5720ff813 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">
@@ -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,12 +159,12 @@ 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);
 }
 
 .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..31558ca3a 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">
@@ -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,12 +289,12 @@
     margin-right: 0.625rem;
     align-items: center;
     justify-content: center;
-    color: var(--text-color);
+    color: var(--bs-body-color);
     background-color: var(--bg-color);
   }
   
   .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..865aaa9e6 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;
 }
 
@@ -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 {
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;
 }
 
