Skip to content

feat(portal): add theme switcher with system preference support#61

Draft
BatLeDev wants to merge 3 commits into
masterfrom
feat-theme-switcher
Draft

feat(portal): add theme switcher with system preference support#61
BatLeDev wants to merge 3 commits into
masterfrom
feat-theme-switcher

Conversation

@BatLeDev

@BatLeDev BatLeDev commented May 19, 2026

Copy link
Copy Markdown
Member

Add a theme switcher to the portal nav bars and support a system theme that follows the user's OS color-scheme / contrast preferences.

  • Mount the shared theme-switcher (from @data-fair/lib-vuetify) in both layout-nav-bar and layout-personal-app-bar.
  • Replace the inline theme-cookie logic in 03-vuetify.ts with a resolvePortalTheme helper: the theme cookie now defaults to system, which resolves to default/dark/hc/hc-dark from prefers-color-scheme (and forced-colors), gated on the theme variants the portal enables.
  • Read the preference from vuetify-nuxt-module's SSR client hint on the server and matchMedia on the client; enable the prefersColorScheme SSR client hint in nuxt.config.ts.
  • Add @data-fair/lib-vue as a relative dependency for the Theme/AppliedTheme types.

Why: part of the cross-repo theme-switcher feature (lib + portals + data-fair); the portal needs an in-UI control and a system mode that respects OS preferences.

Regression risks:

  • Depends on unreleased @data-fair/lib changes — the theme-switcher.vue component, the Theme/AppliedTheme exports in lib-vue/session, and the system cookie 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.
  • Default behavior changes: the theme cookie default moves from default to system, and Vuetify's defaultTheme is now the resolved theme. Existing portals that configured a dark/hc variant (and enabled the corresponding dark/hc/hcDark flag) will now auto-serve it to users whose OS prefers dark/high-contrast, where before everyone got the light default.
  • First-load flash / hydration: before the SSR client hint is known, the server may resolve to light while the client's matchMedia resolves to dark. Worth checking first-paint behavior across browsers (note reloadOnFirstRequest is already disabled as broken in Brave).
  • Cookie contract with the lib switcher: only the single resolved theme is registered in vuetifyOptions.theme.themes, so live switching relies on the lib's theme-switcher writing the theme cookie in Theme shape and reloading — verify a switch actually re-renders.

@github-actions github-actions Bot added feature and removed feature labels May 19, 2026
@BatLeDev BatLeDev force-pushed the feat-theme-switcher branch from 5c10a7a to 6cc6c0e Compare May 19, 2026 14:23
@github-actions github-actions Bot added feature and removed feature labels May 22, 2026
@BatLeDev BatLeDev force-pushed the feat-theme-switcher branch from 6cc6c0e to ba1c977 Compare June 5, 2026 17:08
@BatLeDev BatLeDev marked this pull request as ready for review June 5, 2026 17:21
@BatLeDev BatLeDev marked this pull request as draft June 5, 2026 17:32
@github-actions github-actions Bot added feature and removed feature labels Jun 5, 2026
@BatLeDev BatLeDev changed the title feat(portal): theme switcher with system preference + card summary fallback feat(portal): add theme switcher with system preference support Jun 5, 2026
@github-actions github-actions Bot added feature and removed feature labels Jun 5, 2026
@BatLeDev BatLeDev force-pushed the feat-theme-switcher branch 2 times, most recently from df6f652 to 97f36e8 Compare June 8, 2026 14:52
@github-actions github-actions Bot added feature and removed feature labels Jun 8, 2026
@BatLeDev BatLeDev force-pushed the feat-theme-switcher branch 3 times, most recently from 5817606 to 5c67c70 Compare June 9, 2026 10:51
BatLeDev added 3 commits June 9, 2026 14:00
…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.
@BatLeDev BatLeDev force-pushed the feat-theme-switcher branch from 5c67c70 to bce325e Compare June 9, 2026 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant