diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6aeba43459..590fbbdd71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@ Important changes to data models, configuration, and migrations between each
 AppEngine version, listed here to ease deployment and troubleshooting.
 
 ## Next Release (replace with git tag when deployed)
+ - Reduced flash of white while loading pages in dark mode.
 
 ## `20250626t093300-all`
  * Bump runtimeVersion to `2025.06.20`.
diff --git a/app/lib/dartdoc/dartdoc_page.dart b/app/lib/dartdoc/dartdoc_page.dart
index c71c3a969a..2d39ebce58 100644
--- a/app/lib/dartdoc/dartdoc_page.dart
+++ b/app/lib/dartdoc/dartdoc_page.dart
@@ -102,6 +102,7 @@ extension DartDocPageRender on DartDocPage {
             name: 'viewport',
             content:
                 'width=device-width, height=device-height, initial-scale=1, user-scalable=no'),
+        d.meta(name: 'color-scheme', content: 'light dark'),
         d.meta(name: 'generator', content: 'made with love by dartdoc'),
         d.meta(name: 'description', content: description),
         d.element('title', text: _pageTitle(options)),
@@ -286,6 +287,7 @@ extension DartDocPageRender on DartDocPage {
     final dataBaseHref = p.relative('', from: p.dirname(options.path));
     return d.element('body', classes: [
       'light-theme',
+      'loading-theme',
     ], attributes: {
       'data-base-href':
           baseHref ?? (dataBaseHref == '.' ? '' : '$dataBaseHref/'),
diff --git a/app/lib/frontend/dom/dom.dart b/app/lib/frontend/dom/dom.dart
index 07e3a1945e..ddbf38da9a 100644
--- a/app/lib/frontend/dom/dom.dart
+++ b/app/lib/frontend/dom/dom.dart
@@ -758,6 +758,7 @@ Node script({
   String? text,
   String? type,
   String? src,
+  String? blocking,
   bool async = false,
   bool defer = false,
   String? onload,
@@ -769,6 +770,7 @@ Node script({
       attributes: <String, String>{
         if (type != null) 'type': type,
         if (src != null) 'src': src,
+        if (blocking != null) 'blocking': blocking,
         if (async) 'async': 'async',
         if (defer) 'defer': 'defer',
         if (onload != null) 'onload': onload,
diff --git a/app/lib/frontend/templates/views/shared/layout.dart b/app/lib/frontend/templates/views/shared/layout.dart
index 8cb5befeb0..ff43755c50 100644
--- a/app/lib/frontend/templates/views/shared/layout.dart
+++ b/app/lib/frontend/templates/views/shared/layout.dart
@@ -59,6 +59,7 @@ d.Node pageLayoutNode({
               name: 'viewport',
               content: 'width=device-width, initial-scale=1',
             ),
+            d.meta(name: 'color-scheme', content: 'light dark'),
             if (noIndex) d.meta(name: 'robots', content: 'noindex'),
 
             // <!-- Twitter tags -->
@@ -183,6 +184,8 @@ d.Node pageLayoutNode({
             requestContext.experimentalFlags.isDarkModeDefault
                 ? 'dark-theme'
                 : 'light-theme',
+            // `loading-theme` will be removed by the dark-init.js script
+            'loading-theme',
           ],
           attributes: {
             if (activeConfiguration.isStaging) 'data-staging': '1',
@@ -191,7 +194,9 @@ d.Node pageLayoutNode({
             // The initialization of dark theme must be in a synchronous, blocking
             // script execution, as otherwise users may see flash of unstyled content
             // (usually white background instead of a dark theme).
-            d.script(src: staticUrls.getAssetUrl('/static/js/dark-init.js')),
+            d.script(
+                src: staticUrls.getAssetUrl('/static/js/dark-init.js'),
+                blocking: 'render'),
             if (activeConfiguration.isStaging)
               d.div(classes: ['staging-ribbon'], text: 'staging'),
             // <!-- Google Tag Manager (noscript) -->
diff --git a/app/test/frontend/golden/authorized_page.html b/app/test/frontend/golden/authorized_page.html
index b836bae691..66903bd324 100644
--- a/app/test/frontend/golden/authorized_page.html
+++ b/app/test/frontend/golden/authorized_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/consent_page.html b/app/test/frontend/golden/consent_page.html
index 6be2b8c71d..a28937adff 100644
--- a/app/test/frontend/golden/consent_page.html
+++ b/app/test/frontend/golden/consent_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/create_publisher_page.html b/app/test/frontend/golden/create_publisher_page.html
index 3ae2502de8..1880dbf6bf 100644
--- a/app/test/frontend/golden/create_publisher_page.html
+++ b/app/test/frontend/golden/create_publisher_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/error_page.html b/app/test/frontend/golden/error_page.html
index abd0777418..ed014c7c2c 100644
--- a/app/test/frontend/golden/error_page.html
+++ b/app/test/frontend/golden/error_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/help_page.html b/app/test/frontend/golden/help_page.html
index f6129aa618..db0b7496aa 100644
--- a/app/test/frontend/golden/help_page.html
+++ b/app/test/frontend/golden/help_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
index 564bd9bc05..fcf0086bb4 100644
--- a/app/test/frontend/golden/landing_page.html
+++ b/app/test/frontend/golden/landing_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
index f8b8e40ce8..57b893fcfc 100644
--- a/app/test/frontend/golden/my_activity_log_page.html
+++ b/app/test/frontend/golden/my_activity_log_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
index dcba119b0c..f072033964 100644
--- a/app/test/frontend/golden/my_liked_packages.html
+++ b/app/test/frontend/golden/my_liked_packages.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
index 0b6951dd63..828c363dd8 100644
--- a/app/test/frontend/golden/my_packages.html
+++ b/app/test/frontend/golden/my_packages.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
index 13f8fe30b3..4bec78fd5b 100644
--- a/app/test/frontend/golden/my_publishers.html
+++ b/app/test/frontend/golden/my_publishers.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
index c91318bc02..8e7d5924c7 100644
--- a/app/test/frontend/golden/pkg_activity_log_page.html
+++ b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
index 7cdfe8ac6b..ef46fe903c 100644
--- a/app/test/frontend/golden/pkg_admin_page.html
+++ b/app/test/frontend/golden/pkg_admin_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
index 69cad5e8fa..1dc27a996a 100644
--- a/app/test/frontend/golden/pkg_changelog_page.html
+++ b/app/test/frontend/golden/pkg_changelog_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
index b3df481285..ce2266ebfd 100644
--- a/app/test/frontend/golden/pkg_example_page.html
+++ b/app/test/frontend/golden/pkg_example_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
index f09df61cb3..ce3746ca08 100644
--- a/app/test/frontend/golden/pkg_index_page.html
+++ b/app/test/frontend/golden/pkg_index_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
index c709265254..4d9f79f1ce 100644
--- a/app/test/frontend/golden/pkg_install_page.html
+++ b/app/test/frontend/golden/pkg_install_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
index 46e5c0f8f0..0407d3d6e9 100644
--- a/app/test/frontend/golden/pkg_score_page.html
+++ b/app/test/frontend/golden/pkg_score_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html b/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html
index 46e5c0f8f0..0407d3d6e9 100644
--- a/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html
+++ b/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
index ff7577f5af..fcce0f1d5d 100644
--- a/app/test/frontend/golden/pkg_show_page.html
+++ b/app/test/frontend/golden/pkg_show_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html
index 34ad63852f..829b131f11 100644
--- a/app/test/frontend/golden/pkg_show_page_discontinued.html
+++ b/app/test/frontend/golden/pkg_show_page_discontinued.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
index 4cc5f122d7..e5d2f3a25c 100644
--- a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
+++ b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page_publisher.html b/app/test/frontend/golden/pkg_show_page_publisher.html
index e5c0a75c53..9a660cadee 100644
--- a/app/test/frontend/golden/pkg_show_page_publisher.html
+++ b/app/test/frontend/golden/pkg_show_page_publisher.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page_retracted.html b/app/test/frontend/golden/pkg_show_page_retracted.html
index aaef9b5752..dad7154872 100644
--- a/app/test/frontend/golden/pkg_show_page_retracted.html
+++ b/app/test/frontend/golden/pkg_show_page_retracted.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html b/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html
index 404479b1f3..9fbdfdb6fb 100644
--- a/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html
+++ b/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_show_version_page.html b/app/test/frontend/golden/pkg_show_version_page.html
index 4a35d9411a..5949583f57 100644
--- a/app/test/frontend/golden/pkg_show_version_page.html
+++ b/app/test/frontend/golden/pkg_show_version_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html
index 460ee53314..4d1378f94b 100644
--- a/app/test/frontend/golden/pkg_versions_page.html
+++ b/app/test/frontend/golden/pkg_versions_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/frontend/golden/publisher_activity_log_page.html b/app/test/frontend/golden/publisher_activity_log_page.html
index aeca2eb3fe..5bdeb18393 100644
--- a/app/test/frontend/golden/publisher_activity_log_page.html
+++ b/app/test/frontend/golden/publisher_activity_log_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/publisher_admin_page.html b/app/test/frontend/golden/publisher_admin_page.html
index 54f30dae27..3aa1d5da5d 100644
--- a/app/test/frontend/golden/publisher_admin_page.html
+++ b/app/test/frontend/golden/publisher_admin_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/publisher_list_page.html b/app/test/frontend/golden/publisher_list_page.html
index 12d8a57073..113f424e7d 100644
--- a/app/test/frontend/golden/publisher_list_page.html
+++ b/app/test/frontend/golden/publisher_list_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
index 28e34e744d..7af33fa660 100644
--- a/app/test/frontend/golden/publisher_packages_page.html
+++ b/app/test/frontend/golden/publisher_packages_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
index 6512d6849a..6607d61a4a 100644
--- a/app/test/frontend/golden/publisher_unlisted_packages_page.html
+++ b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/report_page.html b/app/test/frontend/golden/report_page.html
index f846102373..ec2868a5ac 100644
--- a/app/test/frontend/golden/report_page.html
+++ b/app/test/frontend/golden/report_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/report_page_appeal.html b/app/test/frontend/golden/report_page_appeal.html
index 5beaa3410b..024cb599e4 100644
--- a/app/test/frontend/golden/report_page_appeal.html
+++ b/app/test/frontend/golden/report_page_appeal.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
index 1bdd348a15..5e5f103d52 100644
--- a/app/test/frontend/golden/search_page.html
+++ b/app/test/frontend/golden/search_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
diff --git a/app/test/frontend/golden/topics_page.html b/app/test/frontend/golden/topics_page.html
index bb30b311c2..0361285462 100644
--- a/app/test/frontend/golden/topics_page.html
+++ b/app/test/frontend/golden/topics_page.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/index.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/index.html
index ac3b4e57b3..e9df9dbb77 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/index.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen API docs, for the Dart programming language."/>
     <title>oxygen - Dart API docs</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass-class.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass-class.html
index 499e2fd26c..ddd0a01ca7 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass-class.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass-class.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass class from the oxygen library, for the Dart programming language."/>
     <title>MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/MainClass.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/MainClass.html
index 35c6fed2e2..16649f6df9 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/MainClass.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/MainClass.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass.new constructor from Class MainClass from the oxygen library, for the Dart programming language."/>
     <title>MainClass.new constructor - MainClass - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/text.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/text.html
index a02737f389..58a913f69d 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/text.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/text.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the text property from the MainClass class, for the Dart programming language."/>
     <title>text property - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toLowerCase.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toLowerCase.html
index fbcaad0792..0900043e97 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toLowerCase.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toLowerCase.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toLowerCase method from the MainClass class, for the Dart programming language."/>
     <title>toLowerCase method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toString.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toString.html
index 3fe33226e9..3226b2e1b7 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toString.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/MainClass/toString.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toString method from the MainClass class, for the Dart programming language."/>
     <title>toString method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum.html
index 7ec3db5fdb..d4325c3d70 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the TypeEnum enum from the oxygen library, for the Dart programming language."/>
     <title>TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum/values-constant.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum/values-constant.html
index 281228f159..5b40ead8fc 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum/values-constant.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/TypeEnum/values-constant.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the values constant from the TypeEnum enum, for the Dart programming language."/>
     <title>values constant - TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/index.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/index.html
index f7a583c533..722fe257c0 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/index.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen library API docs, for the Dart programming language."/>
     <title>oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/main.html b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/main.html
index 68814ce10b..01ea5cabf7 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/main.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/1.0.0/oxygen/main.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the main function from the oxygen library, for the Dart programming language."/>
     <title>main function - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/index.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/index.html
index 25865f54b7..dac2206864 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/index.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen API docs, for the Dart programming language."/>
     <title>oxygen - Dart API docs</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass-class.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass-class.html
index 7102a6af6f..7d25e1ae69 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass-class.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass-class.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass class from the oxygen library, for the Dart programming language."/>
     <title>MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/MainClass.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/MainClass.html
index 5904c9e7f9..efb36c6e37 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/MainClass.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/MainClass.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass.new constructor from Class MainClass from the oxygen library, for the Dart programming language."/>
     <title>MainClass.new constructor - MainClass - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/text.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/text.html
index f0f20e4f3f..570246f028 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/text.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/text.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the text property from the MainClass class, for the Dart programming language."/>
     <title>text property - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toLowerCase.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toLowerCase.html
index 98df85771b..b89bfffbb8 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toLowerCase.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toLowerCase.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toLowerCase method from the MainClass class, for the Dart programming language."/>
     <title>toLowerCase method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toString.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toString.html
index f2f6d956ed..1b2b54fe3f 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toString.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/MainClass/toString.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toString method from the MainClass class, for the Dart programming language."/>
     <title>toString method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum.html
index e19102f133..5d21d0be5f 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the TypeEnum enum from the oxygen library, for the Dart programming language."/>
     <title>TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum/values-constant.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum/values-constant.html
index 73f5a36e4e..6770fd1e8b 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum/values-constant.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/TypeEnum/values-constant.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the values constant from the TypeEnum enum, for the Dart programming language."/>
     <title>values constant - TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/index.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/index.html
index e2c2ff4c93..387f1db561 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/index.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen library API docs, for the Dart programming language."/>
     <title>oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/main.html b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/main.html
index 7cd1ed4fb7..0ee72e5172 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/main.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/2.0.0/oxygen/main.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the main function from the oxygen library, for the Dart programming language."/>
     <title>main function - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/index.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/index.html
index 3339bcd2ff..393e91debc 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/index.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen API docs, for the Dart programming language."/>
     <title>oxygen - Dart API docs</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass-class.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass-class.html
index c712d7245b..53be1869b0 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass-class.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass-class.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass class from the oxygen library, for the Dart programming language."/>
     <title>MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/MainClass.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/MainClass.html
index e2b35bdfe1..a96ea1109c 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/MainClass.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/MainClass.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the MainClass.new constructor from Class MainClass from the oxygen library, for the Dart programming language."/>
     <title>MainClass.new constructor - MainClass - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/text.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/text.html
index 6041aa7162..17dd1929f9 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/text.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/text.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the text property from the MainClass class, for the Dart programming language."/>
     <title>text property - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toLowerCase.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toLowerCase.html
index 866e1c7066..91c0226d1e 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toLowerCase.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toLowerCase.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toLowerCase method from the MainClass class, for the Dart programming language."/>
     <title>toLowerCase method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toString.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toString.html
index 53dd9a2307..b39f4dc67b 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toString.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/MainClass/toString.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the toString method from the MainClass class, for the Dart programming language."/>
     <title>toString method - MainClass class - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum.html
index b5882f3db4..ce9a9f90d6 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the TypeEnum enum from the oxygen library, for the Dart programming language."/>
     <title>TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum/values-constant.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum/values-constant.html
index 43fd8cb897..4ef75d7a57 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum/values-constant.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/TypeEnum/values-constant.html
@@ -7,6 +7,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the values constant from the TypeEnum enum, for the Dart programming language."/>
     <title>values constant - TypeEnum enum - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/index.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/index.html
index 930c0a020c..235c75f22e 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/index.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/index.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="oxygen library API docs, for the Dart programming language."/>
     <title>oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/main.html b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/main.html
index 8614b54e6d..b55e19b9f6 100644
--- a/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/main.html
+++ b/app/test/task/testdata/goldens/documentation/oxygen/latest/oxygen/main.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="generator" content="made with love by dartdoc"/>
     <meta name="description" content="API docs for the main function from the oxygen library, for the Dart programming language."/>
     <title>main function - oxygen library - Dart API</title>
diff --git a/app/test/task/testdata/goldens/packages/oxygen.html b/app/test/task/testdata/goldens/packages/oxygen.html
index 8a5cad3406..78fee1efa7 100644
--- a/app/test/task/testdata/goldens/packages/oxygen.html
+++ b/app/test/task/testdata/goldens/packages/oxygen.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -225,7 +226,7 @@ <h1 id="oxygen" class="hash-header">
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -238,12 +239,6 @@ <h1 id="oxygen" class="hash-header">
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -304,7 +299,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -317,12 +312,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/changelog.html
index 53c454f450..bed32b0631 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/changelog.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/changelog.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -231,7 +232,7 @@ <h2 class="changelog-version hash-header" id="200">
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -244,12 +245,6 @@ <h2 class="changelog-version hash-header" id="200">
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -310,7 +305,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -323,12 +318,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/example.html b/app/test/task/testdata/goldens/packages/oxygen/example.html
index 1919dcbc5c..c17291af09 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/example.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/example.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -226,7 +227,7 @@ <h3 class="detail-lead-title">Metadata</h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -239,12 +240,6 @@ <h3 class="detail-lead-title">Metadata</h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -305,7 +300,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -318,12 +313,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/install.html b/app/test/task/testdata/goldens/packages/oxygen/install.html
index ee7adb904a..fed7b75dea 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/install.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/install.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -254,7 +255,7 @@ <h3>Import it</h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -267,12 +268,6 @@ <h3>Import it</h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -333,7 +328,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -346,12 +341,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/license.html b/app/test/task/testdata/goldens/packages/oxygen/license.html
index 289bbc55c9..416bb33011 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/license.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/license.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -227,7 +228,7 @@ <h2>License</h2>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -240,12 +241,6 @@ <h2>License</h2>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -306,7 +301,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -319,12 +314,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/score.html b/app/test/task/testdata/goldens/packages/oxygen/score.html
index 21996826a6..812c169d73 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/score.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/score.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -215,7 +216,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                     </div>
                     <div class="score-key-figure">
                       <div class="score-key-figure-title">
-                        <span class="score-key-figure-value">140</span>
+                        <span class="score-key-figure-value">130</span>
                         <span class="score-key-figure-supplemental">/ 160</span>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
@@ -231,7 +232,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <p class="analysis-info">
                     We analyzed this package
                     <a class="-x-ago" href="" title="on %%short-dateformat%%" role="button" data-timestamp="%%time-ago-millis%%">%%time-ago%%</a>
-                    , and awarded it 140 pub points (of a possible 160):
+                    , and awarded it 130 pub points (of a possible 160):
                   </p>
                   <div class="pkg-report">
                     <div class="pkg-report-section foldable">
@@ -332,11 +333,11 @@ <h3>
                     <div class="pkg-report-section foldable">
                       <div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-documentation">
                         <div class="pkg-report-header-icon">
-                          <img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
+                          <img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="Failed report section" width="18" height="18"/>
                         </div>
                         <div class="pkg-report-header-title">Provide documentation</div>
-                        <div class="pkg-report-header-score">
-                          <span class="pkg-report-header-score-granted">20</span>
+                        <div class="pkg-report-header-score -is-red">
+                          <span class="pkg-report-header-score-granted">10</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
                           <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
@@ -364,9 +365,18 @@ <h3>
                               .
                             </p>
                             <h3>
-                              <img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
-                              10/10 points: Package has an example and has no issues with screenshots
+                              <img class="report-summary-icon" alt="Failed check" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
+                              0/10 points: Package has an example and has no issues with screenshots
                             </h3>
+                            <p>Found 4 issues. Showing the first 2:</p>
+                            <ul>
+                              <li>
+                                <p>No such file or directory</p>
+                              </li>
+                              <li>
+                                <p>No such file or directory</p>
+                              </li>
+                            </ul>
                           </div>
                         </div>
                       </div>
@@ -535,7 +545,7 @@ <h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -548,12 +558,6 @@ <h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -614,7 +618,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -627,12 +631,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions.html b/app/test/task/testdata/goldens/packages/oxygen/versions.html
index 5be69d7fbe..6c0f12b421 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
     <meta name="twitter:description" content="Pub is the package manager for the Dart programming language, containing reusable libraries &amp; packages for Flutter and general Dart programs."/>
@@ -292,7 +293,7 @@ <h2 id="stable">Stable versions of oxygen</h2>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -305,12 +306,6 @@ <h2 id="stable">Stable versions of oxygen</h2>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -371,7 +366,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -384,12 +379,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html
index 5345aa5a88..bbf7a282e5 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -229,7 +230,7 @@ <h1 id="oxygen" class="hash-header">
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -242,12 +243,6 @@ <h1 id="oxygen" class="hash-header">
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -308,7 +303,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -321,12 +316,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html
index de33860e3f..c14d659875 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -235,7 +236,7 @@ <h2 class="changelog-version hash-header" id="100">
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -248,12 +249,6 @@ <h2 class="changelog-version hash-header" id="100">
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -314,7 +309,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -327,12 +322,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html
index 0015d0709d..fcda64745b 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/example.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -230,7 +231,7 @@ <h3 class="detail-lead-title">Metadata</h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -243,12 +244,6 @@ <h3 class="detail-lead-title">Metadata</h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -309,7 +304,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -322,12 +317,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html
index 0daa7500da..3721a8ea30 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/install.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -258,7 +259,7 @@ <h3>Import it</h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -271,12 +272,6 @@ <h3>Import it</h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -337,7 +332,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -350,12 +345,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html
index ba6dcc35df..51b8841558 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/license.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -231,7 +232,7 @@ <h2>License</h2>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -244,12 +245,6 @@ <h2>License</h2>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -310,7 +305,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -323,12 +318,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html
index a619308fd4..7d697347af 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/score.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -219,7 +220,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                     </div>
                     <div class="score-key-figure">
                       <div class="score-key-figure-title">
-                        <span class="score-key-figure-value">140</span>
+                        <span class="score-key-figure-value">130</span>
                         <span class="score-key-figure-supplemental">/ 160</span>
                       </div>
                       <div class="score-key-figure-label">pub points</div>
@@ -235,7 +236,7 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <p class="analysis-info">
                     We analyzed this package
                     <a class="-x-ago" href="" title="on %%short-dateformat%%" role="button" data-timestamp="%%time-ago-millis%%">%%time-ago%%</a>
-                    , and awarded it 140 pub points (of a possible 160):
+                    , and awarded it 130 pub points (of a possible 160):
                   </p>
                   <div class="pkg-report">
                     <div class="pkg-report-section foldable">
@@ -336,11 +337,11 @@ <h3>
                     <div class="pkg-report-section foldable">
                       <div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-documentation">
                         <div class="pkg-report-header-icon">
-                          <img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
+                          <img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="Failed report section" width="18" height="18"/>
                         </div>
                         <div class="pkg-report-header-title">Provide documentation</div>
-                        <div class="pkg-report-header-score">
-                          <span class="pkg-report-header-score-granted">20</span>
+                        <div class="pkg-report-header-score -is-red">
+                          <span class="pkg-report-header-score-granted">10</span>
                           /
                           <span class="pkg-report-header-score-max">20</span>
                           <img class="foldable-icon" src="/static/hash-%%etag%%/img/foldable-section-icon.svg" alt="trigger folding of the section" width="13" height="6"/>
@@ -368,9 +369,18 @@ <h3>
                               .
                             </p>
                             <h3>
-                              <img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
-                              10/10 points: Package has an example and has no issues with screenshots
+                              <img class="report-summary-icon" alt="Failed check" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
+                              0/10 points: Package has an example and has no issues with screenshots
                             </h3>
+                            <p>Found 4 issues. Showing the first 2:</p>
+                            <ul>
+                              <li>
+                                <p>No such file or directory</p>
+                              </li>
+                              <li>
+                                <p>No such file or directory</p>
+                              </li>
+                            </ul>
                           </div>
                         </div>
                       </div>
@@ -539,7 +549,7 @@ <h3>
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -552,12 +562,6 @@ <h3>
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -618,7 +622,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -631,12 +635,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html b/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html
index 8a5cad3406..78fee1efa7 100644
--- a/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html
+++ b/app/test/task/testdata/goldens/packages/oxygen/versions/2.0.0.html
@@ -6,6 +6,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="x-ua-compatible" content="ie=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="color-scheme" content="light dark"/>
     <meta name="robots" content="noindex"/>
     <meta name="twitter:card" content="summary"/>
     <meta name="twitter:site" content="@dart_lang"/>
@@ -225,7 +226,7 @@ <h1 id="oxygen" class="hash-header">
               </div>
               <div class="packages-score packages-score-health">
                 <div class="packages-score-value -has-value">
-                  <span class="packages-score-value-number">140</span>
+                  <span class="packages-score-value-number">130</span>
                   <span class="packages-score-value-sign"></span>
                 </div>
                 <div class="packages-score-label">points</div>
@@ -238,12 +239,6 @@ <h1 id="oxygen" class="hash-header">
                 <div class="packages-score-label">downloads</div>
               </div>
             </a>
-            <div class="detail-screenshot-thumbnail">
-              <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-              </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-            </div>
             <h3 class="title">Publisher</h3>
             <p>
               <span>unverified uploader</span>
@@ -304,7 +299,7 @@ <h3 class="detail-metadata-title">
             </div>
             <div class="packages-score packages-score-health">
               <div class="packages-score-value -has-value">
-                <span class="packages-score-value-number">140</span>
+                <span class="packages-score-value-number">130</span>
                 <span class="packages-score-value-sign"></span>
               </div>
               <div class="packages-score-label">points</div>
@@ -317,12 +312,6 @@ <h3 class="detail-metadata-title">
               <div class="packages-score-label">downloads</div>
             </div>
           </a>
-          <div class="detail-screenshot-thumbnail">
-            <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots" tabindex="0"/>
-            </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
-          </div>
           <h3 class="title">Publisher</h3>
           <p>
             <span>unverified uploader</span>
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 275a1d19a3..f62ea205f7 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -156,6 +156,8 @@
 }
 
 .light-theme {
+  color-scheme: light;
+
   .displayed-in-dark-theme {
     display: none !important;
   }
@@ -163,6 +165,8 @@
 
 /// Variables that are specific to the dark theme.
 .dark-theme {
+  color-scheme: dark;
+
   @include dash_variables.dark-theme;
 
   --pub-color-darkBlack:       #121317;
@@ -263,6 +267,17 @@
   }
 }
 
+.loading-theme {
+  // This class is applied before dark-init.js runs.
+  // This tells the browser to use the system theme's lightness until
+  // the script can set body's class to either `light-theme` or `dark-theme`.
+  color-scheme: light dark;
+  background: initial;
+  color: initial;
+  --pub-neutral-bgColor: initial;
+  --pub-neutral-textColor: initial;
+}
+
 @mixin elevated-content-border {
   .light-theme & {
     box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);
diff --git a/static/js/dark-init.js b/static/js/dark-init.js
index d85627eea4..cff6b47dc1 100644
--- a/static/js/dark-init.js
+++ b/static/js/dark-init.js
@@ -26,4 +26,6 @@
     document.body.classList.remove('light-theme');
     document.body.classList.add('dark-theme');
   }
+
+  document.body.classList.remove('loading-theme');
 })();
diff --git a/third_party/dartdoc/resources/docs.dart.js b/third_party/dartdoc/resources/docs.dart.js
index 87dd918e6b..f257c37fc5 100644
--- a/third_party/dartdoc/resources/docs.dart.js
+++ b/third_party/dartdoc/resources/docs.dart.js
@@ -4154,7 +4154,7 @@ if(a){s.classList.remove("light-theme")
 s.classList.add("dark-theme")
 r.window.localStorage.setItem("colorTheme","true")}else{s.classList.remove("dark-theme")
 s.classList.add("light-theme")
-r.window.localStorage.setItem("colorTheme","false")}},
+r.window.localStorage.setItem("colorTheme","false")}s.classList.remove("loading-theme")},
 $S:27}
 A.dN.prototype={
 $1(a){this.b.$1(!this.a.classList.contains("dark-theme"))},