Add theme switcher

assets/css/screen.css

@@ -71,6 +71,26 @@ production stylesheet in assets/built/screen.css
     --grid-gap: 42px;
 }
 
+:root.light-theme {
+    /* light theme color */
+    --background-color: #fff;
+    --baclground-secondary: #eaeaea;
+    --header: #fafafa;
+    --color-primary-text: #222;
+    --color-secondary-text: #999;
+    --border-color: #dcdcdc;
+}
+
+:root.dark-theme {
+    /* dark theme colors */
+    --background-color: #292a2d;
+    --background-secondary: #3b3d42;
+    --header: #252627;
+    --color-primary-text: #a9a9b3;
+    --color-secondary-text: #73747b;
+    --border-color: #4a4b50;
+}
+
 :root.has-light-text,
 :is(.gh-navigation, .gh-footer).has-accent-color {
     --color-lighter-gray: rgb(255 255 255 / 0.1);
@@ -369,7 +389,7 @@ button.gh-form-input {
     .gh-form {
         font-size: 1.6rem;
     }
-    
+
     .gh-form .gh-button {
         padding-inline: 12px;
     }
@@ -1003,6 +1023,28 @@ Search                         LOGO                    Login Subscribe
 /* 8. Header
 /* ---------------------------------------------------------- */
 
+#svglogo {
+    height: 3em;
+    width: 3em;
+}
+
+#svglogo use {
+    fill: var(--color-primary-text);
+}
+
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.theme-toggler {
+    fill: currentColor;
+}
+
+
 .gh-header {
     position: relative;
     margin-top: 40px;

assets/js/theme.js

@@ -0,0 +1,45 @@
+// Toggle theme
+
+const isOSLight = window.matchMedia("(prefers-color-scheme: light)").matches
+const localTheme = window.localStorage && window.localStorage.getItem("lightTheme")
+const themeToggle = document.querySelector(".theme-toggle")
+
+function changeFavicon() {
+  const src = document.documentElement.classList.contains("dark-theme") ? "/img/favicon-dark.png" : "/img/favicon.png";
+  const link = document.createElement('link'),
+    oldLink = document.getElementById('dynamic-favicon');
+  link.id = 'dynamic-favicon';
+  link.rel = 'shortcut icon';
+  link.href = src;
+  if (oldLink) {
+    document.head.removeChild(oldLink);
+  }
+  document.head.appendChild(link);
+}
+
+function changeTheme(useLight) {
+  document.documentElement.classList.remove('light-theme', 'dark-theme', 'has-light-text', 'has-dark-text')
+  if (useLight) {
+    document.documentElement.classList.add('light-theme', 'has-dark-text')
+  } else {
+    document.documentElement.classList.add('dark-theme', 'has-light-text')
+  }
+
+  if (window.localStorage) {
+    window.localStorage.setItem(
+        "lightTheme",
+        useLight)
+  }
+
+  changeFavicon()
+}
+
+themeToggle.addEventListener("click", () => {
+  changeTheme(document.documentElement.classList.contains('dark-theme'))
+});
+
+if (localTheme instanceof Boolean) {
+  changeTheme(localTheme)
+} else {
+  changeTheme(isOSLight)
+}

partials/components/navigation.hbs

@@ -47,6 +47,7 @@
                     {{/unless}}
                 </div>
             {{/unless}}
+            {{> "theme-switcher"}}
         </div>
 
     </div>

partials/icons/theme-icon.hbs

@@ -0,0 +1,14 @@
+<svg
+  class="theme-toggler"
+  width="24"
+  height="24"
+  viewBox="0 0 48 48"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
+  3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
+  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"
+  />
+</svg>

partials/theme-switcher.hbs

@@ -0,0 +1,3 @@
+<button class="theme-toggle gh-icon-button" aria-label="Change theme">
+    {{> "icons/theme-icon"}}
+</button>