diff --git a/dashboard/styles/dark.scss b/dashboard/styles/dark.scss
new file mode 100644
index 00000000..049b2c17
--- /dev/null
+++ b/dashboard/styles/dark.scss
@@ -0,0 +1,46 @@
+@import "../node_modules/bootstrap-dark-5/scss/variables-alt"; 
+
+.dark {
+    .navbar.bg-light {
+        background-color: $body-bg-alt !important;
+    }
+    
+    .footer.bg-light {
+        background-color: $dark-alt !important;
+    }
+    
+    .nav-item {
+        .btn.btn-transparent {
+            color: rgba(250,250,250,.55);
+        }
+    }
+
+    // bootstrap
+    .nav-tabs * .nav-link {
+        background-color: $body-bg-alt !important;
+    }
+
+    //svelecte
+    .svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
+        color: $body-color-alt !important; //this can also be optionally overwritten
+        background-color: $body-bg-alt !important;
+    }
+
+    .sv-item-btn {
+        background-color: $light-alt !important;
+    }
+
+    // discord markdown
+    .d-spoiler {
+        color: $dark-alt; //overwrite
+        background-color: $dark-alt; //overwrite
+    }
+
+    .d-spoiler::selection {
+        color: $dark-alt; //overwrite
+    }
+    
+    .d-spoiler:active {
+        color: $body-color-alt; //overwrite
+    }
+}
\ No newline at end of file
diff --git a/dashboard/styles/themes.scss b/dashboard/styles/themes.scss
index 4139e566..4898588a 100644
--- a/dashboard/styles/themes.scss
+++ b/dashboard/styles/themes.scss
@@ -1,51 +1,7 @@
 $primary: #da9317;
 $primary-alt: #da9317;
 @import "../node_modules/bootstrap/scss/bootstrap.scss";
+
+// dark mode. dark.scss extends nightshade
 @import "bootstrap-nightshade.scss";
-
-.dark {
-    .navbar.bg-light {
-        background-color: var(--bs-body-bg-alt) !important;
-    }
-    
-    .footer.bg-light {
-        background-color: var(--bs-dark-alt) !important;
-    }
-    
-    > * {
-        .nav-item {
-            .btn.btn-transparent {
-                color: rgba(250,250,250,.55);
-            }
-        }
-    }
-        
-    // bootstrap
-    .nav-tabs * .nav-link {
-        background-color: var(--bs-body-bg-alt) !important;
-    }
-
-    //svelecte
-    .svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
-        color: var(--bs-body-color-alt) !important; //this can also be optionally overwritten
-        background-color: var(--bs-body-bg-alt) !important;
-    }
-
-    .sv-item-btn {
-        background-color: var(--bs-light-alt) !important;
-    }
-
-    // discord markdown
-    .d-spoiler {
-        color: var(--bs-dark-alt); //overwrite
-        background-color: var(--bs-dark-alt); //overwrite
-    }
-
-    .d-spoiler::selection {
-        color: var(--bs-dark-alt); //overwrite
-    }
-    
-    .d-spoiler:active {
-        color: var(--bs-body-color-alt); //overwrite
-    }
-}
\ No newline at end of file
+@import "dark.scss";
\ No newline at end of file