Color Mode Switcher Shows wrong icon in auto mode. Root cause contributes to occasional flickering.

[nenadvicentic]

Currently, color mode switcher displays Light or Dark icon, when no color mode has been stored in the localStorage.

The culprit is following code:

examples/color-modes/js/color-modes.js

Lines 13 to 20 in 6786420

	const getPreferredTheme = () => {
	const storedTheme = getStoredTheme()
	if (storedTheme) {
	return storedTheme
	}
	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
	}

:

The function getPreferredTheme converts non-stored item (null) to light or dark value on the output, Thus, wrong active color mode button is matched.

Further, handling of actual theme set in IU is splitted between the above function and following function:

examples/color-modes/js/color-modes.js

Lines 22 to 28 in 6786420

	const setTheme = theme => {
	if (theme === 'auto') {
	document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
	} else {
	document.documentElement.setAttribute('data-bs-theme', theme)
	}
	}

The function setTheme has special case for input parameter auto. Therefore cases where there is no value stored in localStorage and when value auto has been stored are handled in a slightly different way.

Further, value auto makes sense only for the color-swicher component, as a part of element ID in [data-bs-theme-value="auto"]. In CSS only values light and dark are valid.

Further yet, the event handler:

examples/color-modes/js/color-modes.js

Lines 60 to 65 in 6786420

	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
	const storedTheme = getStoredTheme()
	if (storedTheme !== 'light' && storedTheme !== 'dark') {
	setTheme(getPreferredTheme())
	}
	})

Currently works correctly, only if there are only light and dark color modes stored in localStorage, and there are no custom color modes added by user.

Fix could be following:

1. Threat localStorage.getItem('theme') === null and localStorage.getItem('theme') === 'auto' in the same manner. Or even better, do not store any value in auto mode in localStorage.
2. Use auto suffix only for color-switcher UI handling, as a fallback value for localStorage.getItem('theme') === null.