Repository: dart-lang/pub-dev (dart)

Issue:
Dark mode toggle button not visually responsive
It should visually indicate being pressed and when hovered like a ([material?](https://material-web.dev/components/icon-button/)) button.

Currently it also looks "disabled" because it is grey.

<img width="268" alt="image" src="https://github.com/user-attachments/assets/61661867-7b70-4da4-b0b0-dbce26fdd396">

It should probably show a moon when dark mode is off, and a sun when it's on (like it does on dartdoc). Currently it is always a sun.

Pull request:
- Fixes #7982
- Similar logic as in dartdoc (dark mode shows light icon, light mode shows moon/dark icon).
- Responsive feedback provided via opacity + the cursor changes.

Patch:
diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
index 05e68cfe39..5f43696f73 100644
--- a/pkg/web_css/lib/src/_site_header.scss
+++ b/pkg/web_css/lib/src/_site_header.scss
@@ -71,10 +71,18 @@
     width: 24px;
     background-position: center;
     margin: 0 18px;
-    background-image: url("../img/light-mode-symbol-888888.svg");
+    background-image: url("../img/dark-mode-symbol-888888.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     opacity: 0.8;
+
+    .dark-theme & {
+      background-image: url("../img/light-mode-symbol-888888.svg");
+    }
+
+    &:hover {
+      opacity: 1.0;
+    }
   }
 
   a.logo {
diff --git a/static/img/dark-mode-symbol-888888.svg b/static/img/dark-mode-symbol-888888.svg
new file mode 100755
index 0000000000..559e5c09db
--- /dev/null
+++ b/static/img/dark-mode-symbol-888888.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#888888"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
\ No newline at end of file


Test patch:
diff --git a/app/test/frontend/static_files_test.dart b/app/test/frontend/static_files_test.dart
index 04a9515e67..754f4316d1 100644
--- a/app/test/frontend/static_files_test.dart
+++ b/app/test/frontend/static_files_test.dart
@@ -109,8 +109,12 @@ void main() {
 
     testWithProfile('proper hash in css content', fn: () async {
       final css = cache.getFile('/static/css/style.css')!;
-      for (Match m
-          in RegExp('url\\("(.*?)"\\);').allMatches(css.contentAsString)) {
+      final matches = RegExp('url\\("([^"]*?)"\\);')
+          .allMatches(css.contentAsString)
+          .toList();
+      // expect some URLs
+      expect(matches, hasLength(greaterThan(5)));
+      for (final m in matches) {
         final matched = m.group(1)!;
         if (matched.contains('data:image')) continue;
         final uri = Uri.parse(matched);
@@ -119,7 +123,7 @@ void main() {
             .toString();
         expect(absPath, startsWith('/static/hash-xyz/'));
         final rs = await issueGet(absPath);
-        expect(rs.statusCode, 200);
+        expect(rs.statusCode, 200, reason: matched);
         expect(await rs.read().toList(), isNotEmpty);
       }
     });