fix: make theme toggle accessible for screen readers and keyboard users

Author: Saurav Kumar

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>

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%;
-}
+}