twbs / twbs/examples

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

Open
#546 4 comments 0 reactions 0 assignees View on GitHub

@nenadvicentic is already working on this.

Since Jan 2, 2025.

  • #547 by @nenadvicentic — open
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:

  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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.