feat: Adapt scss to support dark mode

1 files changed, 21 insertions, 1 deletions

diff --git a/scss/main.scss b/scss/main.scss
index e0fecf1..a98c0a2 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -12,7 +12,7 @@ $btn-border-radius: 0;
 // basic functionality
 @import "bootstrap/scss/_functions.scss";
 @import "bootstrap/scss/_variables.scss";
-@import "bootstrap/scss/_variables-dark.scss";
+//@import "bootstrap/scss/_variables-dark.scss";
 @import "bootstrap/scss/_maps.scss";
 @import "bootstrap/scss/_mixins.scss";
 @import "bootstrap/scss/_utilities.scss";
@@ -27,6 +27,7 @@ $navbar-nav-link-padding-x: $spacer;
 @import "bootstrap/scss/_grid.scss";
 @import "bootstrap/scss/_forms.scss";
 @import "bootstrap/scss/_buttons.scss";
+@import "bootstrap/scss/mixins/_color-mode.scss";
 @import "tree.scss";
 
 // overwrite to reduce the ammount of css generated by loading all utilities
@@ -80,6 +81,12 @@ body {
     margin: 0;
 }
 
+@include color-mode(dark) {
+    body {
+        background: #212529;
+    }
+}
+
 // prevert wierd input overflowing 100%
 input {
     width: 100%;
@@ -116,6 +123,12 @@ a[href]:not([href=""]):not(.nav-link) {
     background: #f8f9fa;
 }
 
+@include color-mode(dark) {
+    .event {
+        background: #131618;
+    }
+}
+
 .event-commit {
     background: #dadada;
     padding: 5px;
@@ -136,6 +149,13 @@ a[href]:not([href=""]):not(.nav-link) {
 }
 
 
+@include color-mode(dark) {
+    .event-commit {
+        background: #000;
+    }
+}
+
+
 .selected {
     text-decoration: underline;
 }