Use a sun for light theme toggle instead of moon (#3309)

Author: parlough

lib/resources/styles.css

@@ -70,13 +70,26 @@
   display: none;
 }
 
+#theme-button {
+  position: absolute;
+  right: 30px;
+  height: 24px;
+}
+
 #theme-button .material-symbols-outlined {
-  padding-top: 6px;
   color: var(--main-icon-color);
   user-select: none;
   cursor: pointer;
 }
 
+.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/
@@ -953,11 +966,6 @@ button {
   padding-right: 60px;
 }
 
-#theme-button {
-  position: absolute;
-  right: 30px;
-}
-
 .tt-menu {
   position: absolute;
   top: 100%;

lib/src/generator/templates.aot_renderers_for_html.dart

@@ -3126,9 +3126,12 @@ String _deduplicated_lib_templates_html__head_html(
   <div class="toggle" id="theme-button">
     <label for="theme">
       <input type="checkbox" id="theme" value="light-theme">
-      <span class="material-symbols-outlined">
+      <span id="dark-theme-button" class="material-symbols-outlined">
         brightness_4
       </span>
+      <span id="light-theme-button" class="material-symbols-outlined">
+        brightness_5
+      </span>
     </label>
   </div>
 </header>

lib/templates/html/_head.html

@@ -60,9 +60,12 @@
   <div class="toggle" id="theme-button">
     <label for="theme">
       <input type="checkbox" id="theme" value="light-theme">
-      <span class="material-symbols-outlined">
+      <span id="dark-theme-button" class="material-symbols-outlined">
         brightness_4
       </span>
+      <span id="light-theme-button" class="material-symbols-outlined">
+        brightness_5
+      </span>
     </label>
   </div>
 </header>