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); });