diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index ef6d12af7..3774af864 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -138,6 +138,16 @@ export class SettingsService {
         '--pngx-primary-lightness',
         `${hsl.l * 100}%`,
         RendererStyleFlags2.DashCase
+      );
+
+      /**
+       * Fix for not reflecting changed variables. (--bs-primary is at :root while here we set them to body)
+        */
+      this._renderer.setStyle(
+        document.body,
+        '--bs-primary',
+        'hsl(var(--pngx-primary), var(--pngx-primary-lightness))',
+        RendererStyleFlags2.DashCase
       )
     } else {
       this._renderer.removeStyle(
@@ -150,6 +160,11 @@ export class SettingsService {
         '--pngx-primary-lightness',
         RendererStyleFlags2.DashCase
       )
+      this._renderer.removeStyle(
+        document.body,
+        '--bs-primary',
+        RendererStyleFlags2.DashCase
+      )
     }
   }
 
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 369de919a..c6de360f3 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -275,7 +275,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
 }
 
 @include color-mode(dark) {
-  &:not(.primary-light):not(.primary-dark) {
+  body:not(.primary-light):not(.primary-dark) {
     @include paperless-green-dark-mode;
 
     .navbar.bg-primary {