Clean up theme styling and improve accessibility of theme toggle (#4005)

- Utilize SCSS nesting in theme styles
- Hide the IDs of internal icons of theme toggle from screen readers
- Enable a focus style for theme toggle by switching to a button
- Properly center theme toggle

---

**Focused while in light mode:**
<img width="185" alt="Screenshot of toggle focused while in light mode"
src="https://github.com/user-attachments/assets/a6aedde6-b53c-4a50-a161-f0fb939853ad"
/>

**Focused while in dark mode:**
<img width="215" alt="Screenshot of toggle focused while in dark mode"
src="https://github.com/user-attachments/assets/cc23bab5-1a64-489b-97f1-dcb96f6045f2"
/>

**Hovered while in dark mode:**
<img width="201" alt="Screenshot of toggle hovered while in dark mode"
src="https://github.com/user-attachments/assets/8e3e8413-ac8f-4dae-95f4-f5c85ff5f9e1"
/>

Author: parlough

lib/resources/docs.dart.js

@@ -2478,17 +2478,14 @@ String _deduplicated__head(TemplateDataBase context0) {
   <form class="search navbar-right" role="search">
     <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
   </form>
-  <div class="toggle" id="theme-button" title="Toggle brightness">
-    <label for="theme">
-      <input type="checkbox" id="theme" value="light-theme">
-      <span id="dark-theme-button" class="material-symbols-outlined">
-        dark_mode
-      </span>
-      <span id="light-theme-button" class="material-symbols-outlined">
-        light_mode
-      </span>
-    </label>
-  </div>
+  <button class="toggle" id="theme-button" title="Toggle between light and dark mode" aria-label="Light and dark mode toggle">
+    <span id="dark-theme-button" class="material-symbols-outlined" aria-hidden="true">
+      dark_mode
+    </span>
+    <span id="light-theme-button" class="material-symbols-outlined" aria-hidden="true">
+      light_mode
+    </span>
+  </button>
 </header>
 <main>''');
 

lib/resources/docs.dart.js.map

@@ -54,16 +54,13 @@
   <form class="search navbar-right" role="search">
     <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
   </form>
-  <div class="toggle" id="theme-button" title="Toggle brightness">
-    <label for="theme">
-      <input type="checkbox" id="theme" value="light-theme">
-      <span id="dark-theme-button" class="material-symbols-outlined">
-        dark_mode
-      </span>
-      <span id="light-theme-button" class="material-symbols-outlined">
-        light_mode
-      </span>
-    </label>
-  </div>
+  <button class="toggle" id="theme-button" title="Toggle between light and dark mode" aria-label="Light and dark mode toggle">
+    <span id="dark-theme-button" class="material-symbols-outlined" aria-hidden="true">
+      dark_mode
+    </span>
+    <span id="light-theme-button" class="material-symbols-outlined" aria-hidden="true">
+      light_mode
+    </span>
+  </button>
 </header>
 <main>

lib/resources/styles.css

@@ -1 +1 @@
-6AD77EE4737CB53C3F7994D7BCC1E463
+318ACAF85024D323F3F60B8D63B1EC23

lib/src/generator/templates.aot_renderers_for_html.dart

@@ -45,6 +45,15 @@
   --alert-important-fgColor: #7953bf;
   --alert-warning-fgColor: #955d00;
   --alert-error-fgColor: #c43131;
+
+  #light-theme-button {
+    display: none;
+  }
+
+  // Hide dark-mode only images from GitHub's themable image support.
+  img[src$="#gh-dark-mode-only"] {
+    display: none;
+  }
 }
 
 .dark-theme {
@@ -88,53 +97,34 @@
   --alert-important-fgColor: #ad81ff;
   --alert-warning-fgColor: #cea11f;
   --alert-error-fgColor: #ff6666;
-}
 
-#theme {
-  display: none;
+  #dark-theme-button {
+    display: none;
+  }
+
+  // Hide light-mode only images from GitHub's themable image support.
+  img[src$="#gh-light-mode-only"] {
+    display: none;
+  }
 }
 
 #theme-button {
+  // Reset button appearance.
+  appearance: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+
   position: absolute;
   right: 30px;
-  height: 24px;
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
 
-#theme-button .material-symbols-outlined {
   color: var(--main-icon-color);
-  user-select: none;
-  cursor: pointer;
-}
-
-#theme-button .material-symbols-outlined:hover {
-  color: var(--main-hyperlinks-color);
-}
-
-li .material-symbols-outlined, dt .material-symbols-outlined {
-  font-size: 1em;
-  vertical-align: text-bottom;
-}
-
-dt .material-symbols-outlined {
-  text-indent: 0;
-}
-
-.light-theme #light-theme-button {
-  display: none;
-}
-
-.dark-theme #dark-theme-button {
-  display: none;
-}
-
-/*
-Only show images that fit their theme using GitHub's syntax, see:
-https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
-*/
-.dark-theme img[src$="#gh-light-mode-only"] {
-  display: none;
-}
 
-.light-theme img[src$="#gh-dark-mode-only"] {
-  display: none;
+  &:hover {
+    color: var(--main-hyperlinks-color);
+  }
 }

lib/templates/_head.html

@@ -34,3 +34,12 @@
     display: none !important;
   }
 }
+
+li .material-symbols-outlined, dt .material-symbols-outlined {
+  font-size: 1em;
+  vertical-align: text-bottom;
+}
+
+dt .material-symbols-outlined {
+  text-indent: 0;
+}

web/sig.txt

@@ -8,34 +8,36 @@ import 'package:web/web.dart';
 
 void init() {
   var bodyElement = document.body;
-
   if (bodyElement == null) {
     return;
   }
 
-  var theme = document.getElementById('theme') as HTMLInputElement;
+  var themeButton =
+      document.getElementById('theme-button') as HTMLButtonElement;
+
+  void switchThemes(bool toDarkMode) {
+    if (toDarkMode) {
+      bodyElement.classList.remove('light-theme');
+      bodyElement.classList.add('dark-theme');
 
-  void switchThemes() {
-    if (theme.checked) {
-      bodyElement.setAttribute('class', 'dark-theme');
-      theme.setAttribute('value', 'dark-theme');
       window.localStorage.setItem('colorTheme', 'true');
     } else {
-      bodyElement.setAttribute('class', 'light-theme');
-      theme.setAttribute('value', 'light-theme');
+      bodyElement.classList.remove('dark-theme');
+      bodyElement.classList.add('light-theme');
+
       window.localStorage.setItem('colorTheme', 'false');
     }
   }
 
-  theme.addEventListener(
-    'change',
+  themeButton.addEventListener(
+    'click',
     (Event _) {
-      switchThemes();
+      final currentlyDarkMode = bodyElement.classList.contains('dark-theme');
+      switchThemes(!currentlyDarkMode);
     }.toJS,
   );
 
   if (window.localStorage.getItem('colorTheme') case var colorTheme?) {
-    theme.checked = colorTheme == 'true';
-    switchThemes();
+    switchThemes(colorTheme == 'true');
   }
 }