diff --git a/src-ui/src/index.html b/src-ui/src/index.html
index cb6ce7816..118b9deff 100644
--- a/src-ui/src/index.html
+++ b/src-ui/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
 <head>
   <meta charset="utf-8">
   <title>Paperless-ngx</title>
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 1bdd84190..ffecca62f 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,8 +1,8 @@
 // bs options
 $enable-negative-margins: true;
 
-@import "theme";
 @import "node_modules/bootstrap/scss/bootstrap";
+@import "theme";
 @import "~@ng-select/ng-select/themes/default.theme.css";
 @import "print";
 
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index bcfceb6ec..369de919a 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -1,10 +1,14 @@
+$color-mode-type: data;
+
+@import 'bootstrap/scss/mixins/color-mode';
+
 @mixin paperless-green {
   // base color e.g. #17541f = hsl(128, 57%, 21%)
   --pngx-primary: 128, 57%;
   --pngx-primary-lightness: 21%;
 }
 
-body {
+:root {
   @include paperless-green;
   --pngx-primary-text-contrast: var(--bs-light);
 
@@ -270,8 +274,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 }
 
-body.color-scheme-dark {
-  // no custom theme color
+@include color-mode(dark) {
   &:not(.primary-light):not(.primary-dark) {
     @include paperless-green-dark-mode;
 
@@ -284,18 +287,38 @@ body.color-scheme-dark {
   @include dark-mode;
 }
 
-@media (prefers-color-scheme: dark) {
-  body.color-scheme-system {
-    // no custom theme color
-    &:not(.primary-light):not(.primary-dark) {
-      @include paperless-green-dark-mode;
+// Temp to not blink with white before angular loads
+@include color-mode(auto) {
+  @media (prefers-color-scheme: dark) {
+    body {
+      // no custom theme color
+      &:not(.primary-light):not(.primary-dark) {
+        @include paperless-green-dark-mode;
 
-      .navbar.bg-primary {
-        // navbar is og green in dark mode
-        @include paperless-green;
+        .navbar.bg-primary {
+          // navbar is og green in dark mode
+          @include paperless-green;
+        }
       }
-    }
 
-    @include dark-mode;
+      @include dark-mode;
+    }
   }
+
 }
+
+//@media (prefers-color-scheme: dark) {
+//  :root {
+//    // no custom theme color
+//    &:not(.primary-light):not(.primary-dark) {
+//      @include paperless-green-dark-mode;
+//
+//      .navbar.bg-primary {
+//        // navbar is og green in dark mode
+//        @include paperless-green;
+//      }
+//    }
+//
+//    @include dark-mode;
+//  }
+//}
