diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js index b5afa453c..c5ddf952a 100644 --- a/static/js/themeSwitcher.js +++ b/static/js/themeSwitcher.js @@ -57,3 +57,18 @@ themeSwitcher.setAttribute('aria-pressed', currentTheme === 'dark'); if (localStorage.getItem('theme')) { themeResetter.classList.add('has-custom-theme'); } + +// Function to handle keydown event on theme toggler buttons. +function handleThemeTogglerKeydown(event) { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + if (event.target === themeSwitcher) { + switchTheme(); + } else if (event.target === themeResetter) { + resetTheme(); + } + } +} + +themeSwitcher.addEventListener('keydown', handleThemeTogglerKeydown); +themeResetter.addEventListener('keydown', handleThemeTogglerKeydown); diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js index 5c9561b57..e563ad348 100644 --- a/static/js/themeSwitcher.min.js +++ b/static/js/themeSwitcher.min.js @@ -1 +1 @@ -const themeSwitcher=document.querySelector(".theme-switcher"),themeResetter=document.querySelector(".theme-resetter"),defaultTheme=document.documentElement.getAttribute("data-default-theme");function getSystemThemePreference(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme")||getSystemThemePreference();function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,themeSwitcher.setAttribute("aria-pressed","dark"===e),t?(localStorage.setItem("theme",e),themeResetter.classList.add("has-custom-theme")):(localStorage.removeItem("theme"),themeResetter.classList.remove("has-custom-theme")),window.dispatchEvent(new CustomEvent("themeChanged",{detail:{theme:e}}))}function resetTheme(){setTheme(defaultTheme||getSystemThemePreference())}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme),themeResetter.addEventListener("click",resetTheme),defaultTheme||window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}),themeSwitcher.setAttribute("aria-pressed","dark"===currentTheme),localStorage.getItem("theme")&&themeResetter.classList.add("has-custom-theme"); +const a=document.querySelector(".theme-switcher"),r=document.querySelector(".theme-resetter"),e=document.documentElement.getAttribute("data-default-theme");function t(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}let d=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme")||t();function n(e,t=!1){document.documentElement.setAttribute("data-theme",e),d=e,a.setAttribute("aria-pressed","dark"===e),t?(localStorage.setItem("theme",e),r.classList.add("has-custom-theme")):(localStorage.removeItem("theme"),r.classList.remove("has-custom-theme")),window.dispatchEvent(new CustomEvent("themeChanged",{detail:{theme:e}}))}function c(){n(e||t())}function m(){n("dark"===d?"light":"dark",!0)}function o(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.target===a?m():e.target===r&&c())}a.addEventListener("click",m),r.addEventListener("click",c),e||window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{n(e.matches?"dark":"light")}),a.setAttribute("aria-pressed","dark"===d),localStorage.getItem("theme")&&r.classList.add("has-custom-theme"),a.addEventListener("keydown",o),r.addEventListener("keydown",o); diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html index 7fba81a9b..cb4c93bf6 100644 --- a/templates/partials/theme_switcher.html +++ b/templates/partials/theme_switcher.html @@ -11,6 +11,7 @@