wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adjust theme-color value based on current theme

Browse source
This commit is contained in:
madrilene 2024-06-07 14:06:17 +02:00
parent 1a66176913
commit f6ce98e29c
2 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_data/designTokens/colors.json
View file

@ -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",

8
src/assets/scripts/bundle/theme-toggle.js
View file

@ -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