dark mode + .... some form of toggle :)

src/assets/scss/_variables.scss

@@ -1,14 +1,33 @@
 @use "sass:math";
 @use "sass:color";
 
-$color-base: hsl(0, 0%, 13%);
-$color-primary: hsl(220, 100%, 68%);
-$color-secondary: hsl(220, 100%, 68%);
+:root {
+  --bg-color: #fff;
+  --base: hsl(0, 0%, 13%);
+  --primary: hsl(220, 100%, 68%);
+  --secondary: hsl(220, 100%, 68%);
+  --gray: hsl(230, 23%, 23%);
+  --gray-border: hsl(230, 77%, 13%);
+}
 
+[data-theme="dark"] {
+  --bg-color: hsl(210, 3.7%, 10.6%);
+  --base: hsl(219, 14%, 71%);
+  --primary: hsl(220, 100%, 68%);
+  --secondary: hsl(220, 100%, 68%);
+  --gray-border: hsl(220, 10%, 40%);
+  --gray: hsl(0, 0%, 100%);
+}
+
+$color-bg: var(--bg-color);
+$color-base: var(--base);
+$color-primary: var(--primary);
+$color-secondary: var(--secondary);
 $color-white: hsl(0, 0%, 100%);
-$color-gray: color.adjust($color-base, $lightness: 40%);
-$color-gray-border: color.adjust($color-base, $lightness: 77%);
-$color-gray-bg: color.adjust($color-base, $lightness: 79%);
+
+$color-gray: color.adjust(hsl(0, 0%, 13%), $lightness: 30%);
+$color-gray-border: var(--gray-border);
+$color-gray-bg: var(--gray-border);
 
 $typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
 

src/assets/scss/base/_generic.scss

@@ -6,6 +6,7 @@ html {
 }
 
 body {
+  background-color: $color-bg;
   color: $typographic-base-font-color;
   font-family: $typographic-font-family;
   font-size: $typographic-base-font-size;

src/components/DarkmodeSwitch/ThemeSwitcher.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+
+enum themes {
+  dark = "dark",
+  light = "light",
+}
+
+function ThemeSwitcher() {
+  const initTheme = document.documentElement.dataset.theme;
+  const [theme, setTheme] = useState(initTheme);
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme ?? themes.light);
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  const getOppositeTheme = () => {
+    return theme === themes.light ? themes.dark : themes.light;
+  };
+
+  function toggleTheme() {
+    const newTheme = theme === themes.dark ? themes.light : themes.dark;
+    setTheme(newTheme);
+  }
+
+  return <a href="#" onClick={toggleTheme}>{`Switch to ${getOppositeTheme()} mode`}</a>;
+}
+
+export default ThemeSwitcher;

src/components/PostHeader/PostHeader.module.scss

@@ -3,9 +3,9 @@
 
 .header {
   align-items: baseline;
-  background: #fff;
+  background: $color-bg;
   border-bottom: 1px solid #808080;
-  color: #000;
+  color: $color-base;
   display: flex;
   height: 50px;
   justify-content: space-between;
@@ -33,7 +33,7 @@
   }
 
   .name {
-    color: #000;
+    color: $color-base;
   }
 }
 

src/components/Sidebar/Copyright/Copyright.module.scss

@@ -4,6 +4,6 @@
 @import "../../../assets/scss/mixins";
 
 .copyright {
-  color: color.adjust($color-gray, $whiteness: 18%);
+  color: $color-gray;
   font-size: $typographic-small-font-size;
 }

src/components/Sidebar/Sidebar.tsx

@@ -7,6 +7,7 @@ import { Menu } from "./Menu";
 
 import * as styles from "./Sidebar.module.scss";
 import { useSiteMetadata } from "@/hooks";
+import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
 
 type Props = {
   isIndex?: boolean;
@@ -23,6 +24,7 @@ const Sidebar = ({ isIndex }: Props) => {
         <Contacts contacts={author.contacts} />
         <Copyright copyright={copyright} />
         <Menu menu={legalMenu} />
+        <ThemeSwitcher />
       </div>
     </div>
   );

src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -141,6 +141,12 @@ exports[`Sidebar renders correctly 1`] = `
     <nav>
       <ul />
     </nav>
+    <a
+      href="#"
+      onClick={[Function]}
+    >
+      Switch to light mode
+    </a>
   </div>
 </div>
 `;

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`CategoriesTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`IndexTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>

src/templates/NotFoundTemplate/NotFoundTemplate.tsx

@@ -4,6 +4,7 @@ import { Layout } from "@/components/Layout";
 import { Page } from "@/components/Page";
 import { Sidebar } from "@/components/Sidebar";
 import { useSiteMetadata } from "@/hooks";
+import { Link } from "gatsby";
 
 const NotFoundTemplate: React.FC = () => {
   const { title, subtitle } = useSiteMetadata();
@@ -11,8 +12,12 @@ const NotFoundTemplate: React.FC = () => {
   return (
     <Layout title={`Not Found - ${title}`} description={subtitle}>
       <Sidebar />
-      <Page title="NOT FOUND">
-        <p>You just hit a route that doesn't exist... the sadness.</p>
+      <Page title="Oh no! page be lost">
+        <p>
+          You've stumbled upon a link that doesn't work anymore {":("}
+          <br />
+          Use the menu to navigate around or click <Link to="/">here</Link> to go to the main page.
+        </p>
       </Page>
     </Layout>
   );

src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap

@@ -142,16 +142,31 @@ exports[`NotFoundTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>
     <div>
       <h1>
-        NOT FOUND
+        Oh no! page be lost
       </h1>
       <div>
         <p>
-          You just hit a route that doesn't exist... the sadness.
+          You've stumbled upon a link that doesn't work anymore 
+          :(
+          <br />
+          Use the menu to navigate around or click 
+          <a
+            href="/"
+          >
+            here
+          </a>
+           to go to the main page.
         </p>
       </div>
     </div>

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`PageTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>

src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`TagTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>

src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap

@@ -142,6 +142,12 @@ exports[`TagsTemplate renders correctly 1`] = `
       <nav>
         <ul />
       </nav>
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        Switch to light mode
+      </a>
     </div>
   </div>
   <div>