diff --git a/app/lib/frontend/templates/views/shared/site_header.dart b/app/lib/frontend/templates/views/shared/site_header.dart
index 0f3c93c5f..fddec6bb3 100644
--- a/app/lib/frontend/templates/views/shared/site_header.dart
+++ b/app/lib/frontend/templates/views/shared/site_header.dart
@@ -2,6 +2,8 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+import 'package:pub_dev/frontend/request_context.dart';
+
 import '../../../../account/models.dart' show SessionData;
 import '../../../../shared/urls.dart' as urls;
 import '../../../dom/dom.dart' as d;
@@ -109,12 +111,26 @@ d.Node siteHeaderNode({
           _foldableMobileLinks('Dart', _dartLinks),
           if (userSession != null && userSession.isAuthenticated)
             _userBlock(userSession),
+          _themeSwitcher(),
         ],
       ),
     ],
   );
 }
 
+d.Node _themeSwitcher() {
+  // <span id="dark-theme-button" class="material-symbols-outlined">dark_mode</span>
+  // <span id="light-theme-button" class="material-symbols-outlined">light_mode</span>
+  if (requestContext.experimentalFlags.isDarkModeEnabled) {
+    return d.fragment([
+      d.button(
+          classes: ['-pub-theme-toggle'], ariaLabel: 'light/dark theme toggle'),
+    ]);
+  } else {
+    return d.fragment([]);
+  }
+}
+
 d.Node _userBlock(SessionData userSession) {
   return d.div(
     classes: ['nav-container', 'nav-profile-container', 'hoverable'],
diff --git a/pkg/web_app/lib/script.dart b/pkg/web_app/lib/script.dart
index d5556fb6c..269ffaf2f 100644
--- a/pkg/web_app/lib/script.dart
+++ b/pkg/web_app/lib/script.dart
@@ -26,6 +26,7 @@ void main() {
   window.onPageShow.listen((_) {
     adjustQueryTextAfterPageShow();
   });
+  _setupDarkThemeButton();
 }
 
 void _setupAllEvents() {
@@ -39,3 +40,16 @@ void _setupAllEvents() {
   setupLikesList();
   setupScreenshotCarousel();
 }
+
+void _setupDarkThemeButton() {
+  final button = document.querySelector('button.-pub-theme-toggle');
+  if (button != null) {
+    button.onClick.listen((_) {
+      final classes = document.body!.classes;
+      final isCurrentlyDark = classes.contains('dark-theme');
+      window.localStorage['colorTheme'] = isCurrentlyDark ? 'false' : 'true';
+      classes.toggle('dark-theme');
+      classes.toggle('light-theme');
+    });
+  }
+}
diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
index 30d406ba9..05e68cfe3 100644
--- a/pkg/web_css/lib/src/_site_header.scss
+++ b/pkg/web_css/lib/src/_site_header.scss
@@ -65,6 +65,18 @@
     }
   }
 
+  button.-pub-theme-toggle {
+    display: block;
+    background-color: transparent;
+    width: 24px;
+    background-position: center;
+    margin: 0 18px;
+    background-image: url("../img/light-mode-symbol-888888.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    opacity: 0.8;
+  }
+
   a.logo {
     display: inline-block;
     height: 30px;
diff --git a/static/img/light-mode-symbol-888888.svg b/static/img/light-mode-symbol-888888.svg
new file mode 100755
index 000000000..14ca634f4
--- /dev/null
+++ b/static/img/light-mode-symbol-888888.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#888888"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
\ No newline at end of file