From 8ed772475f18805f81ded891498b2184c935ebb9 Mon Sep 17 00:00:00 2001
From: Saurav Kumar <saurav@example.com>
Date: Mon, 24 Aug 2026 18:44:42 +0530
Subject: [PATCH] fix: make theme toggle accessible for screen readers and
 keyboard users

---
 index.html           |  2 +-
 web/common-style.css | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3916ff3fe..51a6de95e 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,7 @@ <h1 class="logo">
   <div class="options">
     <div id="theme-toggle-wrapper">
       <label id="theme-toggle-label" for="theme-toggle-btn">
-        <input type="checkbox" id="theme-toggle-btn" style="display: none" />
+        <input type="checkbox" id="theme-toggle-btn" />
         <div id="theme-toggle-slider"></div>
       </label>
       <span id="theme-text">Dark Mode</span>
diff --git a/web/common-style.css b/web/common-style.css
index f09bea61c..f2c8a4a2b 100644
--- a/web/common-style.css
+++ b/web/common-style.css
@@ -214,6 +214,18 @@ select {
   font-size: 1rem;
 }
 
+#theme-toggle-btn {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+#theme-toggle-btn:focus+#theme-toggle-slider {
+  outline: 2px solid #2196F3;
+  outline-offset: 2px;
+}
+
 #theme-toggle-label {
   display: inline-block;
   height: 20px;
@@ -255,4 +267,4 @@ input:checked+#theme-toggle-slider:before {
 
 #theme-toggle-slider:before {
   border-radius: 50%;
-}
+}
\ No newline at end of file