feat(theme): sync light and dark mode across web apps - #261
Conversation
Share color mode through a parent-domain gateflow-theme cookie so marketing, dashboards, portal, and design-system stay in sync on *.gateflow.site (and across localhost ports). Co-authored-by: Dorgham <iDorgham@users.noreply.github.com>
|
Warning Review limit reached
Next review available in: 46 minutes Limit details: You’ve used all 1 included review currently available under your plan. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (33)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
📦 Affected Packages
Diff: +472 / -127 lines
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| export const THEME_BOOTSTRAP_SCRIPT = `(function(){try{var KEY=${JSON.stringify( | ||
| THEME_STORAGE_KEY | ||
| )};var LEGACY=${JSON.stringify( |
| )};var LEGACY=${JSON.stringify( | ||
| LEGACY_THEME_STORAGE_KEY | ||
| )};var valid={light:1,dark:1,system:1};function readCookie(name){var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]*)'));return m?decodeURIComponent(m[1]):null}function pick(){var value=readCookie(KEY)||readCookie(LEGACY);if(!value||!valid[value]){try{value=localStorage.getItem(KEY)||localStorage.getItem(LEGACY)}catch(e){value=null}}return value&&valid[value]?value:null}var value=pick();if(value){try{localStorage.setItem(KEY,value)}catch(e){}}}catch(e){}})();`; |
Lighthouse CI — Marketing Site
Core Web Vitals (Mobile)
|
3 participants
Summary
www,app,admin,portal,design) via a parent-domaingateflow-themecookie on.gateflow.site.@gateflow/theme:ThemeScriptcopies the cookie intolocalStoragebefore paint, andThemeProviderwrites the cookie plus re-reads it when another app tab is focused.Type of change
feat— New featurePlan reference
None — product request to keep color mode in sync across apps.
Checklist
Code
feat(scope): description)console.logleft in production codeTests
@gateflow/themetypecheck + tests pass^build)Database
Env & Config
Release
Breaking changes
None. Existing
themelocalStorage/cookie values are migrated by the bootstrap script.How it works
next-themesand writesgateflow-theme(Path=/,SameSite=Lax,Domain=.gateflow.sitein production, host-only on localhost so all local ports share it).localStorage(ThemeScript+ visibility/focus sync) sonext-themesapplies the same mode.class="dark"anddata-color-mode="dark"are set so Tailwinddark:utilities,@gateflow/tokens, and.darkCSS variables stay aligned.Summary by cubic
Syncs light/dark mode across GateFlow web apps using a shared
gateflow-themecookie and@gateflow/theme. Previously each app stored theme locally; now apps on*.gateflow.siteread/write the shared cookie and apply the same mode on load and focus, avoiding a flash of the wrong color.Review and rollout
ThemeScriptin<head>and wrap the root withThemeProviderfrom@gateflow/themeinwww,app,admin,portal, anddesign.setThemeonly.Path=/,SameSite=Lax;Domain=.gateflow.sitein production, host-only on localhost;Securewhen https. Preview hosts and native/mobile clients remain local.ThemeProvidersets bothclassanddata-color-modeand re-syncs on focus/visibility;@gateflow/tokensand Tailwinddark:variants now respect.darkas well.apps/marketingupdatesnext-themesto^0.4.6;@gateflow/themenow exports fromsrc/index.tsand includes cookie/domain tests.Written for commit 79b3e41. Summary will update on new commits.