cloudflare / cloudflare/cloudflare-os

Context Library and Scheduler apps ignore the deployment's custom accent color

Open
#61 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.