Color Mode Switcher Shows wrong icon in `auto` mode. Root cause contributes to occasional flickering.
- Dominant language
- HTML
- Stars
- 691
- Forks
- 390
- Avg merge
- 1h 2m
- Merged PRs (30d)
- 7
Description
Currently, color mode switcher displays Light or Dark icon, when no color mode has been stored in the localStorage.
The culprit is following code: https://github.com/twbs/examples/blob/6786420f365d35b5d79095865233a619e0235ec4/color-modes/js/color-modes.js#L13-L20:
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: https://github.com/twbs/examples/blob/6786420f365d35b5d79095865233a619e0235ec4/color-modes/js/color-modes.js#L22-L28
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: https://github.com/twbs/examples/blob/6786420f365d35b5d79095865233a619e0235ec4/color-modes/js/color-modes.js#L60-L65
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:
- Threat
localStorage.getItem('theme') === nullandlocalStorage.getItem('theme') === 'auto'in the same manner. Or even better, do not store any value inautomode inlocalStorage. - Use
autosuffix only for color-switcher UI handling, as a fallback value forlocalStorage.getItem('theme') === null.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in color-modes/js/color-modes.js at getPreferredTheme, setTheme, and the theme-change event handler linked in the issue. Reproduce the no-localStorage and stored-auto cases, then verify that the switcher selects the auto option without flickering and that custom color modes remain handled correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bootstrap, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100