Create separately placed dark theme toggle for desktop

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>

assets/css/custom.css

@@ -98,12 +98,29 @@ div.tag-container {
   outline: none;
 }
 
-.user-toggle {
+.user-toggle, .user-toggle-desktop {
   margin: 2rem auto 0 auto;
   max-width: 20rem;
   text-align: center;
 }
 
+.dark-theme-label {
+  color: white;
+  margin: unset;
+}
+
+@media(max-width: 48em) {
+  .user-toggle-desktop {
+    display: none;
+  }
+}
+
+@media(min-width: 48em) {
+  .user-toggle {
+    display: none;
+  }
+}
+
 .toggle-button {
   display: inline-flex;
   background: var(--button-background);

layouts/partials/sidebar.html

@@ -1,4 +1,10 @@
 <aside class="sidebar">
+  <div class="user-toggle-desktop">
+    <button class="toggle-button js-mode-toggle-desktop" aria-label="Dark theme switch">
+      <span class="toggle-button__icon" aria-hidden="true"></span>
+    </button>
+    <h6 class="dark-theme-label">Enable dark theme</h3>
+  </div>
   <div class="container sidebar-sticky">
     <div class="sidebar-about">
       <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
@@ -23,8 +29,9 @@
   </div>
   <script>
     const COLOR_MODE_KEY = '--color-mode';
-    const modeToggleButton = document.querySelector('.js-mode-toggle');
     const STORAGE_KEY = 'user-color-scheme';
+    const modeToggleButtonMobile = document.querySelector('.js-mode-toggle');
+    const modeToggleButtonDesktop = document.querySelector('.js-mode-toggle-desktop');
 
     const applySetting = passedSetting => {
       let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
@@ -55,9 +62,11 @@
       localStorage.setItem(STORAGE_KEY, currentSetting);
       return currentSetting;
     };
-    modeToggleButton.addEventListener('click', evt => {
-      evt.preventDefault();
-      applySetting(toggleSetting());
+    [modeToggleButtonDesktop, modeToggleButtonMobile].forEach(element => {
+      element.addEventListener('click', evt => {
+        evt.preventDefault();
+        applySetting(toggleSetting());
+      });
     });
     applySetting();
   </script>