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

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>
 `;