Add zero-dep theme behavior and render-blocking theme guard - #892
Open
wibjorn wants to merge 1 commit into
Open
Conversation
Adds createThemeState to @microsoft/atlas-js: a zero-dependency behavior that resolves, applies, and persists the active theme-* class, falls back to the system prefers-color-scheme, and wires up [data-theme-cycle] controls. The theme list is passed in as config so the package stays free of cross-package imports. The documentation site now uses createThemeState (replacing the bespoke site-only theming module) and ships a render-blocking inline #theme-preference guard in <head> across the scaffolds to prevent a wrong-theme flash when scripts are deferred. New components/theme.md documents the behavior and the inline guard. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: a2a623b The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
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
1 participant
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.
Summary
Mirrors docs-ui PR 1175046 ("Add render-blocking theme guard to prevent theme flash") in Atlas, and moves theme-switching logic out of the site-only
theming.tsinto the published, zero-dependency@microsoft/atlas-jspackage.What changed
New zero-dep behavior —
createThemeState(js/src/behaviors/theme.ts)['light','dark','high-contrast']) — not imported from@microsoft/atlas-css, preserving the package's zero-dependency guarantee.createLayoutStatebehavior.js/src/index.ts.Render-blocking theme guard
#theme-preferenceinline IIFE to the<head>of thestandard,token, andhomepagescaffolds.localStorage('theme'), validates against the known themes, falls back toprefers-color-scheme: dark, and applies thetheme-*class to<html>before first paint — eliminating the wrong-theme flash that occurred while the deferred module bundle loaded.Slimmed site glue (
site/src/scaffold/scripts/theming.ts)createThemeState: derives the theme list from the Atlas tokens, keeps the non-persistent?theme=override, and continues to exposewindow.setTheme(used by visual-diff tests).Docs —
site/src/components/theme.md.notification notification-warningcallout noting that the hardcoded theme array in the inline guard must be updated when using custom themes.Changeset
@microsoft/atlas-jsand@microsoft/atlas-site.Testing
[ai generated]-tagged unit tests injs/test/behaviors/theme.test.ts(98% statement / 98% branch / 100% function coverage on the new module).npm run lint,npm run build, andnpm run testall green for atlas-js; site lint +tsc --noEmitpass.