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.

[R1Sh0315]

Hi @nenadvicentic ,
I would like to work on this issue. Could you please assign it to me?

[julien-deramond]

@R1Sh0315 FYI, we don't assign issues in Bootstrap repositories.

[nenadvicentic]

@R1Sh0315 The issue has already been solved a year ago. There is the pull request here: #547

@julien-deramond Are you interested in this being fixed or not?

[julien-deramond]

@julien-deramond Are you interested in this being fixed or not?

Yes, I am. My spare time is limited and our core team is quite small, but we’re doing our best. I’ll review and merge it as soon as I can. Sorry for the delay.