Merge pull request #6 from leahbrenny/darkmode

Darkmode

Author: dtauer

components/bluesky.js

@@ -4,7 +4,7 @@ export default function BlueskyLogo() {
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 -3.268 64 68.414"
       width="38"
-      height="auto"
+      height="100%"
     >
       <path
         fill="var(--footer-icons)"

components/footer.js

@@ -3,6 +3,7 @@ import Gh from "./github";
 import Tw from "./twitter";
 import Li from "./linkedin";
 import Bs from "./bluesky";
+import ThemeIcons from "./themeicons";
 
 export default function Footer({ twitter, linkedin, github, bluesky }) {
   return (
@@ -47,6 +48,9 @@ export default function Footer({ twitter, linkedin, github, bluesky }) {
           </div>
         </li>
       </ul>
+      <div className="theme-icons">
+        <ThemeIcons />
+      </div>
     </footer>
   );
 }

components/themeicons.js

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ThemeIcons() {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    setTheme(storedTheme || (prefersDark ? "dark" : "light"));
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      aria-label={`Activate ${theme === "light" ? "dark" : "light"} mode`}
+      title={`Activate ${theme === "light" ? "dark" : "light"} mode`}
+      className="theme-toggle"
+    >
+      {theme === "light" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36px"
+          height="100%"
+          viewBox="0 -960 960 960"
+          fill="var(--text-footer)"
+          role="img"
+        >
+          <title>Dark Mode Icon</title>
+          <path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Z" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="36px"
+          height="100%"
+          viewBox="0 -960 960 960"
+          fill="var(--text-footer)"
+          role="img"
+        >
+          <title>Light Mode Icon</title>
+          <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Z" />
+        </svg>
+      )}
+    </button>
+  );
+}

components/twitter.js

@@ -2,7 +2,7 @@ export default function Twitter() {
   return (
     <svg
       fill="none"
-      height="auto"
+      height="100%"
       width="32"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0.254 0.25 500 451.95400000000006"

lessons/01-the-first-section/A-intro.md

@@ -10,7 +10,7 @@ keywords:
 
 Hello! And welcome to the Next.js course starter by [Brian Holt][twitter].
 
-![Cat, dog, and rat logo for the course](./images/BRAND-WHearts.png)
+![Cat, dog, and rat logo for the course](/next-course-starter/images/BRAND-WHearts.png)
 
 This is a course starter specifically made for making online courses and optimized for use with [Frontend Masters][fem].
 

styles/courses.css

@@ -73,6 +73,7 @@ a {
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  color: var(--lesson-text);
 }
 
 header .cta-btn {
@@ -287,7 +288,7 @@ header .cta-btn {
 }
 
 .lesson-content td {
-  border: 1px solid black;
+  border: 1px solid var(--lesson-text);
   padding: 8px;
 }
 
@@ -354,12 +355,13 @@ blockquote > *:last-child {
 
 .lesson-content {
   line-height: 1.5;
+  color: var(--lesson-text);
 }
 
 .lesson-text {
   width: 100%;
   padding: 25px 5px 25px 35px;
-  min-height: 200px;
+  min-height: 200px
 }
 
 .sections-name {
@@ -507,6 +509,7 @@ ol.sections-name .lesson-details {
 .cta-btn:hover,
 .lesson-links a:hover {
   background: #152837;
+  color: var(--nav-buttons-text-hover);
   text-decoration: none;
 }
 

styles/footer.css

@@ -45,10 +45,19 @@
   text-decoration: underline;
 }
 
-.social svg {
+.social svg, .theme-icons svg {
   transition: opacity 0.25s;
 }
 
-.social svg:hover {
+.social svg:hover, .theme-icons svg:hover {
   opacity: 0.4;
 }
+
+.theme-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}

styles/variables.css

@@ -3,6 +3,8 @@
   --secondary: #93aca7;
   --highlight: #224159;
 
+  --lesson-text: rgb(8, 8, 8);
+
   --text-header: var(--primary);
   --text-main-headers: var(--highlight);
   --text-links: #007bff;
@@ -14,6 +16,7 @@
 
   --nav-buttons: var(--highlight);
   --nav-buttons-text: white;
+  --nav-buttons-text-hover: white;
 
   --corner-active: var(--highlight);
   --corner-inactive: #f4f4f4;
@@ -23,3 +26,48 @@
   --emphasized-bg: #dce8ff;
   --emphasized-border: #aab6d2;
 }
+
+ [data-theme="dark"] {
+  --primary: #224159;
+  --secondary: #93aca7;
+  --highlight: #dfa067;
+
+  --text-header: var(--primary);
+  --text-main-headers: var(--highlight);
+  --text-links: #ff6f00;
+  --text-footer: var(--highlight);
+
+  --lesson-text: rgb(218, 218, 218);
+
+  --bg-main: #1f1f1f;
+  --bg-dots: var(--highlight);
+  --bg-lesson: #323232;
+  --nav-buttons: var(--highlight);
+  --nav-buttons-text: var(--primary);
+  --nav-buttons-text-hover: var(--highlight);
+
+  --corner-active: var(--highlight);
+  --corner-inactive: #2a2a2a;
+  --icons: var(--primary);
+  --footer-icons: var(--highlight);
+
+  --emphasized-bg: #dce8ff;
+  --emphasized-border: #5a6c89;
+  }
+
+  .lesson-title {
+  color: var(--highlight);
+  }
+
+  .lesson-section-title {
+    color: var(--primary);
+  }
+ 
+ .terms {
+  color: var(--highlight);
+ }
+
+ li {
+  color: var(--highlight);
+ }
+