Environment Colors

[Alex-Tideman]

Description & motivation 💭

Allow self-hosted users to set an environment name of development/test/staging to very easily distinguish the Temporal Web UI when multiple environments are used. It can be frustrating to navigate to multiple tabs with different environments and quickly understanding which one you are looking at. If no environment name is set, it will default to the black background.

This also includes refactoring our main layout to use Svelte5.

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

• Manual testing
• E2E tests added
• Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
holocene	Ready	Preview, Comment	Dec 17, 2025 5:47pm

[temporal-cicd]

• ⚠️ Argument of type '{ accesskey?: string | null | undefined; autocapitalize?: "on" | "off" | "none" | "characters" | "sentences" | "words" | null | undefined; autofocus?: boolean | null | undefined; class: ClassValue | null; ... 426 more ...; onfullscreenerrorcapture?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to parameter of type 'HTMLProps<"nav", HTMLAttributes>'.

[temporal-cicd]

• ⚠️ 'name' is possibly 'undefined'.

[temporal-cicd]

Warnings

⚠️

📊 Strict Mode: 10 errors in 6 files (0.7% of 1342 total) src/lib/theme/variables.ts (3) L236:16: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly '--color-text-black': { readonly light: "space-black"; readonly dark: "space-black"; }; readonly '--color-text-white': { readonly light: "off-white"; readonly dark: "off-white"; }; ... 52 more ...; readonly '--color-border-focus-danger': { ...; }; }'. L237:2: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<--${string}, ${number} ${number} ${number}>'. L238:2: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<--${string}, ${number} ${number} ${number}>'. src/lib/services/settings-service.ts (1) L77:2: Type '{ auth: { enabled: boolean; options: string[]; }; bannerText: string; baseUrl: string | null; codec: { endpoint: string; passAccessToken: boolean | undefined; includeCredentials: boolean | undefined; customErrorMessage: { ...; }; }; ... 17 more ...; version: string; }' is not assignable to type 'Settings'. src/lib/utilities/environment-name.ts (1) L1:14: 'name' is possibly 'undefined'. src/lib/components/bottom-nav.svelte (2) L154:55: Argument of type 'string | null' is not assignable to parameter of type 'string'. L160:34: Type 'string | null' is not assignable to type 'string'. src/lib/holocene/navigation/navigation-container.svelte (1) L36:3: Argument of type '{ accesskey?: string | null | undefined; autocapitalize?: "on" | "off" | "none" | "characters" | "sentences" | "words" | null | undefined; autofocus?: boolean | null | undefined; class: ClassValue | null; ... 426 more ...; onfullscreenerrorcapture?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to parameter of type 'HTMLProps<"nav", HTMLAttributes>'. src/routes/(app)/+layout.svelte (2) L65:23: Argument of type '(namespace: string) => { namespace: string; onClick: (namespace: string) => void; }' is not assignable to parameter of type '(value: string | null | undefined, index: number, array: (string | null | undefined)[]) => { namespace: string; onClick: (namespace: string) => void; }'. L246:29: '$authUser' is possibly 'null'.

Generated by 🚫 dangerJS against f6be65c