add theme toggle shortcut

shoelace-style · Sep 27, 2021 · 7476204 · 7476204
1 parent e083b1a
commit 7476204
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/docs/assets/plugins/theme-picker/theme-picker.css b/docs/assets/plugins/theme-picker/theme-picker.css
@@ -9,9 +9,21 @@
   display: none;
 }
 
+.theme-picker sl-menu-label {
+  white-space: nowrap;
+}
+
+.theme-picker sl-menu-label kbd {
+  margin-left: 0.5rem;
+}
+
 @media screen and (max-width: 768px) {
   .theme-picker {
     top: 0.5rem;
     right: 0.5rem;
   }
+
+  .theme-picker sl-menu-label {
+    display: none;
+  }
 }
diff --git a/docs/assets/plugins/theme-picker/theme-picker.js b/docs/assets/plugins/theme-picker/theme-picker.js
@@ -47,6 +47,7 @@
           <sl-icon name="sun" label="Select Theme"></sl-icon>
         </sl-button>
         <sl-menu>
+          <sl-menu-label>Toggle <kbd>\\</kbd></sl-menu-label>
           <sl-menu-item value="light">Light</sl-menu-item>
           <sl-menu-item value="dark">Dark</sl-menu-item>
           <sl-menu-divider></sl-menu-divider>
@@ -63,6 +64,19 @@
       // Update the theme when the preference changes
       window.matchMedia('(prefers-color-scheme: dark)').addListener(event => setTheme(theme));
 
+      // Toggle themes when pressing backslash
+      document.addEventListener('keydown', event => {
+        if (
+          event.key === '\\' &&
+          !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
+        ) {
+          event.preventDefault();
+
+          setTheme(isDark() ? 'light' : 'dark');
+          show();
+        }
+      });
+
       // Set the intial theme and sync the UI
       setTheme(theme);
     });