Added Dark Mode

JohnLu2004 · JohnLu2004 · commit f19c76e5acf5 · 2024-07-30T23:43:51.000-04:00
A bunch of colors inherit from body now
diff --git a/src/components/Back/Back.scss b/src/components/Back/Back.scss
@@ -1,7 +1,7 @@
 .Back {
   display: flex;
   align-items: center;
-  color: #3a3a3a;
+  color: inherit;
   transition: all 0.15s;
   font-weight: 600;
   font-size: 0.85rem;
@@ -15,6 +15,6 @@
   }
 
   &:hover {
-    background-color: #f0f0f0;
+    background-color: inherit;
   }
 }
diff --git a/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss b/src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss
@@ -6,7 +6,7 @@
   border-style: solid;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #c0c0c07f;
+  border-color: #4e4e4e7f;
   margin: 1rem 0rem;
   transition: all 0.15s;
 
@@ -16,7 +16,7 @@
 
   &:hover {
     &[data-interactive="true"] {
-      background-color: #ededed;
+      background-color: #474747;
     }
     &[data-selected="false"] {
       cursor: pointer;
@@ -25,7 +25,7 @@
 
   &[data-revealed="false"] {
     &[data-selected="true"] {
-      background-color: #eaeaea;
+      background-color: #474747;
     }
   }
 
diff --git a/src/components/Page/Page.astro b/src/components/Page/Page.astro
@@ -1,7 +1,43 @@
 ---
 import "./Page.scss";
+import ThemeIcon from "../ThemeIcon/ThemeIcon.astro";
 ---
 
 <div class="Page">
+  <ThemeIcon />
   <slot />
 </div>
+
+<script type="module">
+  document.addEventListener("DOMContentLoaded", () => {
+    const toggleButton = document.getElementById("theme-toggle");
+
+    // Check if dark mode is already set in localStorage
+    const isDarkMode = localStorage.getItem("theme") === "dark";
+    if (isDarkMode) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.add("light-mode");
+    }
+
+    // Update icon based on the theme
+    const updateIcon = () => {
+      const isDarkMode = document.body.classList.contains("dark-mode");
+      document.querySelector(".sun").style.fill = isDarkMode
+        ? "transparent"
+        : "black";
+      document.querySelector(".moon").style.fill = isDarkMode
+        ? "white"
+        : "transparent";
+    };
+
+    updateIcon();
+
+    toggleButton.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+      document.body.classList.toggle("light-mode", !isDarkMode);
+      localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+      updateIcon();
+    });
+  });
+</script>
diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
@@ -10,3 +10,21 @@ $layout-width-inner-spacing-base: 1rem;
       $layout-width-inner-spacing-base
   );
 }
+
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.dark) .sun {
+  fill: transparent;
+}
+:global(.dark) .moon {
+  fill: white;
+}
diff --git a/src/components/RowCard/RowCard.scss b/src/components/RowCard/RowCard.scss
@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  color: black;
+  color: inherit;
   border-radius: 0.6rem;
   border-width: 0.1rem;
-  border-color: #f1f1f1;
+  border-color: inherit;
   border-style: solid;
   padding: 0.2rem 0.6rem;
   transition: all 0.2s;
@@ -15,7 +15,7 @@
   cursor: grab;
 
   &:hover {
-    background-color: rgba(248, 248, 248, 0.753);
+    background-color: rgba(107, 107, 107, 0.753);
     .RowCard__icon {
       color: #e30614;
     }
@@ -28,7 +28,7 @@
   }
 
   &__icon {
-    background-color: #f2f2f2;
+    background-color: inherit;
     padding: 0.3rem 0.6rem;
     border-radius: 0.5rem;
     font-size: 1.4rem;
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -4,7 +4,7 @@
   width: 14rem;
   height: 100vh;
   overflow: hidden;
-  background-color: #fafafa;
+  background-color: inherit;
   border-right: 0.1rem solid #f3f3f3;
   display: flex;
   padding: 0.5rem;
@@ -26,7 +26,7 @@
     padding-top: -0.3rem;
     font-size: 0.9rem;
     font-weight: 600;
-    color: #000000;
+    color: inherit;
   }
 
   &__sections {
@@ -48,7 +48,7 @@
     &--enabled {
       cursor: pointer;
       &:hover {
-        background-color: #f0f0f0;
+        background-color: inherit;
         .Sidebar__item__icon {
           color: #e30614;
         }
@@ -61,19 +61,19 @@
     }
 
     &--active {
-      background-color: #f3f3f3;
+      background-color: inherit;
     }
 
     &__icon {
       font-size: 1.5rem;
-      color: #000000;
+      color: inherit;
     }
 
     &__title {
       padding-left: 0.75rem;
       font-size: 1rem;
       font-weight: 500;
-      color: #000000;
+      color: inherit;
     }
   }
 
@@ -97,38 +97,9 @@
   width: 100vw;
   z-index: 1;
   position: fixed;
-  background-color: #ffffff;
+  background-color: inherit;
   bottom: 0;
   justify-content: center;
   border-top-width: 0.1rem;
   border-color: #f1f1f1;
-  border-style: solid;
-  @media (max-width: 768px) {
-    display: flex;
-  }
-
-  &__inner {
-    display: flex;
-    justify-content: space-between;
-    min-width: 14rem;
-    padding: 0.5rem;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .Sidebar__item {
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.3rem;
-    min-width: 3rem;
-  }
-  .Sidebar__item__icon {
-    font-size: 2rem;
-  }
-  .Sidebar__item__title {
-    font-size: 0.6rem;
-    padding-left: 0rem;
-    text-align: center;
-  }
 }
diff --git a/src/components/Them b/src/components/Them
diff --git a/src/components/ThemeIcon/ThemeIcon.astro b/src/components/ThemeIcon/ThemeIcon.astro
@@ -0,0 +1,18 @@
+---
+import "./ThemeIcon.scss";
+---
+
+<div id="theme-toggle">
+  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="sun"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="moon"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</div>
diff --git a/src/components/ThemeIcon/ThemeIcon.scss b/src/components/ThemeIcon/ThemeIcon.scss
@@ -0,0 +1,17 @@
+#themeToggle {
+  border: 0;
+  background: none;
+}
+.sun {
+  fill: black;
+}
+.moon {
+  fill: transparent;
+}
+
+:global(.light-mode) .sun {
+  fill: transparent;
+}
+:global(.dark-mode) .moon {
+  fill: white;
+}
diff --git a/src/layouts/Base/Base.scss b/src/layouts/Base/Base.scss
@@ -5,25 +5,29 @@ body {
 
 a {
   text-decoration: none;
-  color: #e30614;
+  color: inherit;
 }
 
 :root {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 
-  /* color-scheme: light dark; */
-  // background-color: #1f2023; // var(--color-background);
-  // color: #1f2023; //var(--color-foreground);
+.light-mode {
+  --color: #000000;
+  --color-background: #ffffff;
+  --color-foreground: #000000;
+  --color-accent: #5c6ac4;
+}
 
-  // --color-background: #ffffff;
-  // --color-foreground: #1f2023;
-  // --color-accent: #5c6ac4;
+.dark-mode {
+  --color: #ffffff;
+  --color-background: #000000;
+  --color-foreground: #ffffff;
+  --color-accent: #5c6ac4;
 }
 
-// @media (prefers-color-scheme: light) {
-//   :root {
-//     --color-background: #1f2023;
-//     --color-foreground: #ffffff;
-//   }
-// }
+body {
+  background-color: var(--color-background);
+  color: var(--color);
+}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.Back {`
`2`	`2`	`display: flex;`
`3`	`3`	`align-items: center;`
`4`		`- color: #3a3a3a;`
	`4`	`+ color: inherit;`
`5`	`5`	`transition: all 0.15s;`
`6`	`6`	`font-weight: 600;`
`7`	`7`	`font-size: 0.85rem;`
`@@ -15,6 +15,6 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`&:hover {`
`18`		`- background-color: #f0f0f0;`
	`18`	`+ background-color: inherit;`
`19`	`19`	`}`
`20`	`20`	`}`