feat(portal): add theme switcher with system preference support#61
Draft
BatLeDev wants to merge 3 commits into
Draft
feat(portal): add theme switcher with system preference support#61BatLeDev wants to merge 3 commits into
BatLeDev wants to merge 3 commits into
Conversation
5c10a7a to
6cc6c0e
Compare
6cc6c0e to
ba1c977
Compare
df6f652 to
97f36e8
Compare
5817606 to
5c67c70
Compare
…ture Show a warning in the Colors block of the portal config when at least one alternative theme (dark / high-contrast / dark high-contrast) is offered to users, inviting them to report display issues via support.
5c67c70 to
bce325e
Compare
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.
Add a theme switcher to the portal nav bars and support a
systemtheme that follows the user's OS color-scheme / contrast preferences.theme-switcher(from@data-fair/lib-vuetify) in bothlayout-nav-barandlayout-personal-app-bar.03-vuetify.tswith aresolvePortalThemehelper: thethemecookie now defaults tosystem, which resolves todefault/dark/hc/hc-darkfromprefers-color-scheme(andforced-colors), gated on the theme variants the portal enables.matchMediaon the client; enable theprefersColorSchemeSSR client hint innuxt.config.ts.@data-fair/lib-vueas a relative dependency for theTheme/AppliedThemetypes.Why: part of the cross-repo theme-switcher feature (lib + portals + data-fair); the portal needs an in-UI control and a
systemmode that respects OS preferences.Regression risks:
@data-fair/libchanges — thetheme-switcher.vuecomponent, theTheme/AppliedThemeexports inlib-vue/session, and thesystemcookie value. The portal can't build/CI-pass until that lib version is published and pinned; the relative dep currently points at a local checkout.themecookie default moves fromdefaulttosystem, and Vuetify'sdefaultThemeis now the resolved theme. Existing portals that configured a dark/hc variant (and enabled the correspondingdark/hc/hcDarkflag) will now auto-serve it to users whose OS prefers dark/high-contrast, where before everyone got the light default.matchMediaresolves to dark. Worth checking first-paint behavior across browsers (notereloadOnFirstRequestis already disabled as broken in Brave).vuetifyOptions.theme.themes, so live switching relies on the lib'stheme-switcherwriting thethemecookie inThemeshape and reloading — verify a switch actually re-renders.