From f6ce98e29cea41802411124a90d6b42cf4413d94 Mon Sep 17 00:00:00 2001 From: madrilene Date: Fri, 7 Jun 2024 14:06:17 +0200 Subject: [PATCH] adjust theme-color value based on current theme --- src/_data/designTokens/colors.json | 2 +- src/assets/scripts/bundle/theme-toggle.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) 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