diff --git a/src/_data/designTokens/colors.json b/src/_data/designTokens/colors.json
index 6381a91..309a4d1 100644
--- a/src/_data/designTokens/colors.json
+++ b/src/_data/designTokens/colors.json
@@ -1,6 +1,6 @@
 {
   "title": "Colors",
-  "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
+  "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print. The first two colors are used by the theme toggle script to set the theme color.",
   "items": [
     {
       "name": "Base Dark",
diff --git a/src/assets/scripts/bundle/theme-toggle.js b/src/assets/scripts/bundle/theme-toggle.js
index 0f0f3bc..14ba7e3 100644
--- a/src/assets/scripts/bundle/theme-toggle.js
+++ b/src/assets/scripts/bundle/theme-toggle.js
@@ -1,6 +1,10 @@
 const storageKey = 'theme-preference';
 const lightLabel = '{{ meta.themeSwitch.light }}';
 const darkLabel = '{{ meta.themeSwitch.dark }}';
+const themeColors = {
+  dark: '{{ designTokens.colors.items[0].value }}', // Base Dark
+  light: '{{ designTokens.colors.items[1].value }}' // Base Light
+};
 
 const theme = {
   value: getColorPreference()
@@ -54,6 +58,10 @@ function reflectPreference() {
   document.firstElementChild.setAttribute('data-theme', theme.value);
   document.querySelector('#light-theme-toggle')?.setAttribute('aria-label', lightLabel);
   document.querySelector('#dark-theme-toggle')?.setAttribute('aria-label', darkLabel);
+  // adjust the theme color
+  document
+    .querySelector('meta[name="theme-color"]')
+    .setAttribute('content', theme.value === 'dark' ? themeColors.dark : themeColors.light);
 }
 
 // set early so no page flashes / CSS is made aware