added associated label to theme toggle

dzcode-io · Sep 19, 2024 · 69b4d80 · 69b4d80
1 parent 9bc7b03
commit 69b4d80
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/web/src/components/top-bar.tsx b/web/src/components/top-bar.tsx
@@ -71,7 +71,7 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
           </ul>
         </div>
         <div>
-          <label className="flex cursor-pointer gap-2">
+          <label htmlFor="theme-toggle" className="flex cursor-pointer gap-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="20"
@@ -85,7 +85,12 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
             >
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
-            <input type="checkbox" value="dzcodeLight" className="theme-controller toggle" />
+            <input
+              id="theme-toggle"
+              type="checkbox"
+              value="dzcodeLight"
+              className="theme-controller toggle"
+            />
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="20"