Body
Bug: setting a custom accent/brand color in Admin → General → Theme applies correctly to the main Workshop UI, but the Context Library (/gatekeepers/context) and Scheduler (/gatekeepers/scheduler) apps' primary buttons ("New collection", "Create schedule") stay on the hardcoded default orange regardless of what's configured.
Root cause: the admin-chosen accent color (applyAccentColor() in workshop-frontend/src/theme.ts) is only ever applied to the main app's document.documentElement. Context Library and Scheduler run in separate, network-isolated iframes and can't read ServerConfig themselves — the host already has a bridge to push light/dark mode into them (SandboxedGatekeeperApp.tsx's subscribeTheme/updateTheme), but that bridge only ever carried mode, never the accent color. Both apps' own styles.css ship the same hardcoded default (#ff4801 / #b84e00), so they're stuck there no matter what a deployment configures.
To reproduce:
- Set a custom accent color in Admin → General → Theme, Save
- Visit
/gatekeepers/context or /gatekeepers/scheduler
- The primary button stays the default orange instead of the configured color; everywhere else in the main UI updates correctly
I have a working fix on my fork (extends the existing theme-mode bridge with a parallel subscribeAccentColor/updateAccentColor, plus an applyAccentColor() in each app mirroring the main app's formula): https://github.com/HarvardChin/cloudflare-os/tree/fix-gatekeeper-app-theme-color
One caveat with that approach: it leaves the accent-color formula duplicated in three places (main app + both sandboxed apps) since importing the shared @gadgets/workshop-shared/api barrel from these apps pulls in gatekeeper.ts's Workers-only types, which their DOM-only tsconfigs don't have. Happy to open a PR if useful, or if there's a preferred way to share that logic across the sandboxed apps without that collision, let me know and I'll shape it accordingly.
Body
Bug: setting a custom accent/brand color in Admin → General → Theme applies correctly to the main Workshop UI, but the Context Library (
/gatekeepers/context) and Scheduler (/gatekeepers/scheduler) apps' primary buttons ("New collection", "Create schedule") stay on the hardcoded default orange regardless of what's configured.Root cause: the admin-chosen accent color (
applyAccentColor()inworkshop-frontend/src/theme.ts) is only ever applied to the main app'sdocument.documentElement. Context Library and Scheduler run in separate, network-isolated iframes and can't readServerConfigthemselves — the host already has a bridge to push light/dark mode into them (SandboxedGatekeeperApp.tsx'ssubscribeTheme/updateTheme), but that bridge only ever carried mode, never the accent color. Both apps' ownstyles.cssship the same hardcoded default (#ff4801/#b84e00), so they're stuck there no matter what a deployment configures.To reproduce:
/gatekeepers/contextor/gatekeepers/schedulerI have a working fix on my fork (extends the existing theme-mode bridge with a parallel
subscribeAccentColor/updateAccentColor, plus anapplyAccentColor()in each app mirroring the main app's formula): https://github.com/HarvardChin/cloudflare-os/tree/fix-gatekeeper-app-theme-colorOne caveat with that approach: it leaves the accent-color formula duplicated in three places (main app + both sandboxed apps) since importing the shared
@gadgets/workshop-shared/apibarrel from these apps pulls ingatekeeper.ts's Workers-only types, which their DOM-only tsconfigs don't have. Happy to open a PR if useful, or if there's a preferred way to share that logic across the sandboxed apps without that collision, let me know and I'll shape it accordingly.