Update theme toggle mechanism

styleguide/assets/script/styleguide.js

@@ -2,13 +2,6 @@ document.querySelector('nav > button')?.addEventListener('click', (e) => {
     document.querySelector('nav').classList.toggle('visible');
 })
 
-function applyTheme(theme){
-    const html = document.querySelector('html')
-    document.cookie = `theme=${theme}; path=/; expires=; SameSite=Strict; Secure`
-    html.classList.remove('dark', 'light')
-    html.classList.add(theme)
-}
-
 document.querySelectorAll('.toggleTheme')?.forEach(
     element => element.addEventListener('click', (e) => {
             const newTheme = element.dataset.theme;
@@ -17,11 +10,10 @@ document.querySelectorAll('.toggleTheme')?.forEach(
     )
 );
 
-const themeFromCookie = document.cookie
-    .split("; ")
-    .find((row) => row.startsWith("theme="))
-    ?.split("=")[1];
+document.querySelector('#themeDark').addEventListener('change', (e) => {
+    setTheme(e.target.checked ? 'dark' : 'system');
+})
 
-if (themeFromCookie) {
-    applyTheme(themeFromCookie)
-}
+document.querySelector('#themeLight').addEventListener('change', (e) => {
+    setTheme(e.target.checked ? 'light' : 'system');
+})