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;