diff --git a/docs/assets/plugins/theme-picker/theme-picker.css b/docs/assets/plugins/theme-picker/theme-picker.css
index 234fadf3..f0fa482d 100644
--- 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
index 62c56589..fad2649c 100644
--- a/docs/assets/plugins/theme-picker/theme-picker.js
+++ b/docs/assets/plugins/theme-picker/theme-picker.js
@@ -47,6 +47,7 @@
+ Toggle \\
Light
Dark
@@ -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);
});