1 files changed, 37 insertions, 7 deletions

diff --git a/src/css/design.scss b/src/css/design.scss
index a83ce34..8bbaa36 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -12,11 +12,17 @@ $big-screen: "screen and (min-width: 1720px)";
 
 
 html {
-  background: #f1f1f1;
+
+  @mixin lightMode {
+    background: #f1f1f1;
+  }
   @mixin darkMode {
     background: #222;
   }
-  @media (prefers-color-scheme: dark) { @include darkMode; } &.dark { @include darkMode; }
+  @media (prefers-color-scheme: dark) { @include darkMode; } 
+  @media (prefers-color-scheme: light) { @include lightMode; }
+  &.light { @include lightMode; }
+  &.dark { @include darkMode; }
 }
 
 /*
@@ -45,10 +51,6 @@ body {
   #side-bar {
     box-sizing: border-box;
 
-    @mixin lightMode {
-      background: #F5F6F5;
-    }
-    @media (prefers-color-scheme: light) { @include lightMode; } &.dark { @include lightMode; }
     padding-top: 10px;
 
 
@@ -68,6 +70,8 @@ body {
 }
 .hide_arrow {
   @media (prefers-color-scheme: dark) { filter: invert(1); }
+  @media (prefers-color-scheme: light) { filter: invert(0); }
+  &.light{ filter: invert(0); }
   &.dark { filter: invert(1); }
 
   position: fixed;
@@ -149,4 +153,30 @@ table, th, td {
   }
   transition: margin-left 0.25s ease-out 0.25s, grid-template-columns 0.25s ease-out 0.25s;
 }
-
+#hid {
+  .moon, .sun {
+    display: none;
+  }
+  &.dark {
+    .sun {
+      display: unset;
+    }
+  }
+  &.light {
+    .moon {
+      display: unset;
+    }
+  }
+  position: fixed;
+  top: 10px;
+  right: 10vw;
+  .sun, .moon {
+    position: sticky;
+    top: 400px;
+    cursor: pointer;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}