cloudflare / cloudflare/cloudflare-os
Context Library and Scheduler apps ignore the deployment's custom accent color
- Dominant language
- TypeScript
- Stars
- 9.9k
- Forks
- 1.2k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 107
Description
## 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:**
1. Set a custom accent color in Admin → General → Theme, Save
2. Visit `/gatekeepers/context` or `/gatekeepers/scheduler`
3. 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.
Contributor guide
Research direction
Start in workshop-frontend/src/theme.ts and SandboxedGatekeeperApp.tsx, then inspect the Context Library and Scheduler styles.css files and the /gatekeepers/context and /gatekeepers/scheduler entry points. Verify the reproduction with a configured custom accent color; done means both sandboxed apps' primary buttons use that color in light and dark mode without breaking the existing theme-mode bridge.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100