fix: use unique id for theme toggles

bardenHa · Oct 10, 2023 · f4ee4b1 · f4ee4b1
1 parent b93640b
commit f4ee4b1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/lib/layouts/full.astro b/src/lib/layouts/full.astro
@@ -11,7 +11,7 @@ import { constants } from '@/config';
         <a href="/" title="Home">
           <Image src="/h_avatar.svg" alt="Harry Barden's avatar" class="h-12 w-12" />
         </a>
-        <ColorModeSwitcher class="sm:hidden" client:only />
+        <ColorModeSwitcher id="theme-toggle-mobile" class="sm:hidden" client:only />
       </div>
       <div class="flex items-center gap-6 sm:justify-center">
         <ul class="flex items-center gap-4">
@@ -25,7 +25,7 @@ import { constants } from '@/config';
             ))
           }
         </ul>
-        <ColorModeSwitcher class="hidden sm:block" client:only />
+        <ColorModeSwitcher id="theme-toggle" class="hidden sm:block" client:only />
       </div>
     </nav>
   </header>

diff --git a/src/views/theme.tsx b/src/views/theme.tsx
@@ -24,9 +24,11 @@ function onThemeToggle(): Theme {
     const nextTheme = theme === 'dark' ? 'light' : 'dark';
     window.theme.set(nextTheme);
 
-    const toggleElements = document.querySelectorAll('#theme-toggle');
-    for (const element of toggleElements) {
-      element.setAttribute('aria-checked', nextTheme === 'dark' ? 'true' : 'false');
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeToggleMobile = document.getElementById('theme-toggle-mobile');
+
+    for (const element of [themeToggle, themeToggleMobile]) {
+      element?.setAttribute('aria-checked', nextTheme === 'dark' ? 'true' : 'false');
     }
 
     return nextTheme;
@@ -35,10 +37,10 @@ function onThemeToggle(): Theme {
   return DEFAULT_THEME;
 }
 
-export function ColorModeSwitcher(props: Readonly<{ class?: string }>): JSX.Element {
+export function ColorModeSwitcher(props: Readonly<{ id: string; class?: string }>): JSX.Element {
   return (
     <IconButton
-      id="theme-toggle"
+      id={props.id}
       icon={<Moon aria-label="Toggle theme" />}
       title="Toggle theme"
       aria-label="Enable dark mode"