Fix skillmap losing high contrast theme on page refresh - #11521
Open
Abhijith Chatra (abchatra) with Copilot wants to merge 6 commits into
Open
Fix skillmap losing high contrast theme on page refresh#11521Abhijith Chatra (abchatra) with Copilot wants to merge 6 commits into
Abhijith Chatra (abchatra) with Copilot wants to merge 6 commits into
Conversation
Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>
…ef immediately Co-authored-by: abchatra <6107272+abchatra@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix high contrast theme persistence in Skillmap after refresh
Fix skillmap losing high contrast theme on page refresh
Aug 13, 2026
Abhijith Chatra (abchatra)
marked this pull request as ready for review
August 21, 2026 17:51
…t/fix-skillmap-high-contrast-theme
Joey Wunderlich (jwunderl)
approved these changes
Aug 21, 2026
Joey Wunderlich (jwunderl)
left a comment
Member
There was a problem hiding this comment.
copilot was almost there but still not quite working, because that old special case for highContrast mode pre- theme implementation was still overriding via that sethighcontrast message. All appears to be working properly after my last commit / change, build based off as of now latest commit https://arcade.makecode.com/app/73c03d3dfba36ab1b2fa902d7f6183fdaccda319-f65e9a4e2a--skillmap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enabling High Contrast from a skillmap tutorial and then refreshing the page dropped the skillmap back to the default color scheme.
High contrast is applied through color themes:
ThemeManager.switchColorTheme()adds thehigh-contrast/hcclasses todocument.body, and all skillmap overrides (App.css,skillgraph.css,infopanel.css, ...) are keyed off.high-contrast. The skillmap App still had legacy code that removed that class on every React update whenever the deprecatedstate.auth.preferences?.highContrastredux value was falsy — which it almost always is, since preferences are only dispatched during cloud sync. So the restored high contrast theme was stripped of its class-based styling right after load.skillmap/src/App.tsxThemeManager. Dropped the now-unusedhighContrastprop.initColorThemeAsync()reads the persisted theme id and the legacy high contrast flag straight from user preferences (props aren't populated at mount), mirroring the webapp's startup logic, and falls back to the stored/default theme when a target defines no high contrast theme.changeTheme()clears the legacyhighContrastpreference when switching to a non-high-contrast theme (as the webapp does), so it can't override the theme preference on the next load.skillmap/src/lib/authClient.tsgetHighContrastPrefAsync().setColorThemeIdAsync()patches with{ immediate: true }, matching the language/high-contrast setters, so a theme picked in the skillmap isn't lost to the 1s sync debounce on a quick refresh.