Synchronous JS initionalization of the dark theme. (#7929)

dart-lang · Aug 13, 2024 · 63b2f46 · 63b2f46
1 parent b7cdf09
commit 63b2f46
Show file tree

Hide file tree

Showing 51 changed files with 81 additions and 25 deletions.
diff --git a/app/lib/frontend/templates/views/shared/layout.dart b/app/lib/frontend/templates/views/shared/layout.dart
@@ -167,6 +167,10 @@ d.Node pageLayoutNode({
             if (activeConfiguration.isStaging) 'staging-banner',
           ],
           children: [
+            // 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')),
             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
@@ -31,6 +31,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/consent_page.html b/app/test/frontend/golden/consent_page.html
@@ -31,6 +31,7 @@
     <meta name="pub-page-data" content="eyJjb25zZW50SWQiOiIxMjM0LTU2NzgiLCJzZXNzaW9uQXdhcmUiOnRydWV9"/>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/create_publisher_page.html b/app/test/frontend/golden/create_publisher_page.html
@@ -30,6 +30,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/error_page.html b/app/test/frontend/golden/error_page.html
@@ -30,6 +30,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/help_page.html b/app/test/frontend/golden/help_page.html
@@ -31,6 +31,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/img/square-bg-full-2x.webp" as="image"/>
   </head>
   <body class="page-landing light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
@@ -31,6 +31,7 @@
     <meta name="csrf-token" content="%%csrf-token%%"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
@@ -32,6 +32,7 @@
     <meta name="pub-page-data" content="eyJzZXNzaW9uQXdhcmUiOnRydWV9"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -31,6 +31,7 @@
     <meta name="csrf-token" content="%%csrf-token%%"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
@@ -31,6 +31,7 @@
     <meta name="csrf-token" content="%%csrf-token%%"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -31,6 +31,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_page_publisher.html b/app/test/frontend/golden/pkg_show_page_publisher.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_page_retracted.html b/app/test/frontend/golden/pkg_show_page_retracted.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

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
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_show_version_page.html b/app/test/frontend/golden/pkg_show_version_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/publisher_activity_log_page.html b/app/test/frontend/golden/publisher_activity_log_page.html
@@ -32,6 +32,7 @@
     <meta name="pub-page-data" content="eyJwdWJsaXNoZXIiOnsicHVibGlzaGVySWQiOiJleGFtcGxlLmNvbSJ9fQ=="/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/publisher_admin_page.html b/app/test/frontend/golden/publisher_admin_page.html
@@ -32,6 +32,7 @@
     <meta name="pub-page-data" content="eyJwdWJsaXNoZXIiOnsicHVibGlzaGVySWQiOiJleGFtcGxlLmNvbSJ9LCJzZXNzaW9uQXdhcmUiOnRydWV9"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/publisher_list_page.html b/app/test/frontend/golden/publisher_list_page.html
@@ -31,6 +31,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -32,6 +32,7 @@
     <meta name="pub-page-data" content="eyJwdWJsaXNoZXIiOnsicHVibGlzaGVySWQiOiJleGFtcGxlLmNvbSJ9fQ=="/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -32,6 +32,7 @@
     <meta name="pub-page-data" content="eyJwdWJsaXNoZXIiOnsicHVibGlzaGVySWQiOiJleGFtcGxlLmNvbSJ9fQ=="/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/report_page.html b/app/test/frontend/golden/report_page.html
@@ -30,6 +30,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/report_page_appeal.html b/app/test/frontend/golden/report_page_appeal.html
@@ -30,6 +30,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
@@ -31,6 +31,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/frontend/golden/topics_page.html b/app/test/frontend/golden/topics_page.html
@@ -31,6 +31,7 @@
     <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script>
   </head>
   <body class="page-standalone light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/task/testdata/goldens/packages/oxygen.html b/app/test/task/testdata/goldens/packages/oxygen.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/changelog.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/example.html b/app/test/task/testdata/goldens/packages/oxygen/example.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/install.html b/app/test/task/testdata/goldens/packages/oxygen/install.html
@@ -33,6 +33,7 @@
     <link rel="preload" href="/static/hash-%%etag%%/highlight/highlight-with-init.js" as="script"/>
   </head>
   <body class="light-theme">
+    <script src="/static/hash-%%etag%%/js/dark-init.js"></script>
     <noscript>&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden">&lt;/iframe></noscript>
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>