feat(webapp): Themes + contrast settings update by kathiekiwi · Pull Request #4206 · triggerdotdev/trigger.dev

kathiekiwi · 2026-07-09T15:30:34Z

Adds System Preferences, Dark and Light themes, gated by the hasThemeSwitcher feature flag (off by default — dark stays the default theme for everyone).

Old theme is now "Classic"and set as default.
"System preferences" theme has both Light and Dark modes and uses your laptop settings to use a correct one.
It has less color accents (specifically less colored text), and they are the same for both modes, only grayscale values change between them. And Light/Dark themes can be used separately.

New Contrast setting is available for System Preferences, Dark and Light themes - it changes the contrast for the whole app. All new visual Settings live in Account.

Light theme with 0 -> 100 Contrast

Dark theme with 0 -> 100 Contrast

changeset-bot · 2026-07-09T15:30:39Z

🦋 Changeset detected

Latest commit: 6b0484e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 27 packages

Name	Type
@trigger.dev/sdk	Patch
@trigger.dev/python	Patch
@internal/dashboard-agent	Patch
@internal/sdk-compat-tests	Patch
@trigger.dev/build	Patch
@trigger.dev/core	Patch
@trigger.dev/react-hooks	Patch
@trigger.dev/redis-worker	Patch
@trigger.dev/rsc	Patch
@trigger.dev/schema-to-json	Patch
@trigger.dev/database	Patch
@trigger.dev/otlp-importer	Patch
@trigger.dev/rbac	Patch
@trigger.dev/sso	Patch
trigger.dev	Patch
@internal/cache	Patch
@internal/clickhouse	Patch
@internal/llm-model-catalog	Patch
@internal/metrics-pipeline	Patch
@internal/redis	Patch
@internal/replication	Patch
@internal/run-engine	Patch
@internal/run-store	Patch
@internal/schedule-engine	Patch
@internal/testcontainers	Patch
@internal/tracing	Patch
@internal/tsql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-07-09T15:30:42Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 205629f1-fcbd-4c5b-a95f-54eff81b23aa

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	⚠️ Warning	The description is missing the required template sections like Closes #, checklist, Testing, Changelog, and Screenshots headings.	Rewrite the PR description to match the repository template and add Closes #, checklist items, Testing steps, Changelog, and a Screenshots section.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title is concise and clearly points to the theme-related UI update, which matches the main change set.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/light-theme

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

trigger-dot-bot · 2026-07-09T16:04:44Z

Preview Deployment

Status	Preview	Commit	Updated
🟢 Ready	feat-light-theme.triggerlabs.dev	`6b0484e`	Jul 27, 08:02 UTC

pkg-pr-new · 2026-07-11T21:30:30Z

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@41bd30c

trigger.dev

npm i https://pkg.pr.new/trigger.dev@41bd30c

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@41bd30c

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@41bd30c

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@41bd30c

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@41bd30c

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@41bd30c

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@41bd30c

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@41bd30c

commit: 41bd30c

Workspace packages resolve to TS source via the @triggerdotdev/source condition; server.ts keeps the Express/cluster/ws wiring with vite middleware in dev and the ESM server bundle in prod. Fixes surfaced by the stricter ESM pipeline: destructured route exports, server-only imports in routes/components, CJS interop (redlock, cuid, regression), browser node-global shims, font asset handling, and a websockets TDZ.

Restores the unit-testable export (removed to satisfy the Vite route export rules) by extracting the helper out of the route file.

…evaluation

createActionApiRoute's loader handles CORS OPTIONS preflight; the destructured exports never surfaced it (pre-existing), do it now.

- semantic token overrides for light, trigger.light editor/code palettes - Interface theme dropdown on /account, gated by hasThemeSwitcher flag - unify light surfaces: buttons, inputs, radios, checkboxes, tabs, clipboard fields - fix checkbox :read-only override and useThemeColor hydration mismatch - resolve Firefox panel animation check from request UA

- re-resolve theme colors when data-theme changes - narrow jsonb_set write for theme preference - opaque amber for reasoning text in light mode

- keep dark-theme switch/radio thumb colors, white only in light - pick avatar letter color by background luminance - seed required preference fields when jsonb column is null

…billing - white query editor and apikeys accordion surfaces - white Cancel and Contact us buttons - drop the doubled hover ring on the regions suggest button - route the section-header menu through the shared ellipsis primitive

Backgrounds deepen (dark) or lift (light), surfaces and all border steps strengthen, text weights increase - task names and dimmed labels now respond visibly to the slider in both modes.

Whites can't get whiter: dimmed/faint text goes near-black, borders and controls darken hard, deep surfaces dip slightly for panel separation.

Shared contrast-chip marker on error/health/pill/source/connection chips and subtle badges; a contrast+saturate filter driven by --theme-contrast separates the tint and its colored text.

…a washing filter

…he contrast slider

…eference React skips the data-theme write when its virtual DOM already matched the SSR fallback while the inline script had flipped the real attribute; the sync hook now writes pinned themes explicitly.

github-actions · 2026-07-23T20:47:52Z

🧭 Helm Chart Prerelease Published

Version: 4.5.7-pr4206.33a5415

Install:

helm upgrade --install trigger \
  oci://ghcr.io/triggerdotdev/charts/trigger \
  --version "4.5.7-pr4206.33a5415"

⚠️ This is a prerelease for testing. Do not use in production.

Login, invites and other anonymous pages resolve the System preference when the theme switcher flag is on; Classic stays the flag-off default. The invites heading goes monochrome in System themes.

The new-org background is built from dark-dashboard screenshots (plus a hardcoded near-black fill); the light theme falls back to a flat surface.

Light variants generated from the dark screenshots by inverting lightness (hues survive, so the accent smudges stay true); optimized progressive JPEGs at a fraction of the original size.

Error boundary backdrop, prompt override editor pane, AI filter error popover and chart-zoom tooltip get light: styling; standalone white spinners go blue; bulk-action onboarding, blank-state and queues-upgrade screenshots ship light variants (lightness-inverted, optimized).

…le on light

# Conflicts: # apps/webapp/app/routes/account._index/route.tsx

Missing or legacy preferences resolve to the pinned Dark theme (not system-resolved, so nobody is surprised by light mode) and the default contrast is 50. Classic remains the flag-off look.

devin-ai-integration

Devin Review found 1 new potential issue.

devin-ai-integration · 2026-07-27T07:02:02Z

+export function normalizeThemePreference(value: unknown): ThemePreference {
+  const result = ThemePreference.safeParse(value);
+  return result.success ? result.data : "dark";
+}


🔍 Theme default (dark) applies app-wide when flag defaults on

With hasThemeSwitcher defaulting on (see reported bug), a user who never picked a theme resolves to normalizeThemePreference(undefined) which returns "dark" (apps/webapp/app/utils/themePreference.ts:11-14), not "classic". So the practical consequence of the flag inversion is that the entire app renders the NEW Dark theme rather than the legacy Classic look for everyone. If the maintainers actually intend the switcher to ship on, they should confirm the new Dark theme (not Classic) is the desired global default, since that is what will happen.

Was this helpful? React with 👍 or 👎 to provide feedback.

# Conflicts: # apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx # apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues_.$queueParam/route.tsx

…ue-metrics merge

samejr added the preview label Jul 9, 2026

kathiekiwi force-pushed the feat/light-theme branch from 6525961 to 3ccd96f Compare July 11, 2026 21:28

kathiekiwi force-pushed the chore/vite-migration branch from 7d9ea5b to bad78e6 Compare July 11, 2026 21:28

This comment was marked as resolved.

Sign in to view

kathiekiwi marked this pull request as ready for review July 11, 2026 22:04

This comment was marked as resolved.

Sign in to view

kathiekiwi added 4 commits July 12, 2026 03:42

fix(webapp): move routeOperationsToRun into a server module

9ae20e5

Restores the unit-testable export (removed to satisfy the Vite route export rules) by extracting the helper out of the route file.

fix(webapp): guard prom metrics registration against vite dev HMR re-…

42244ad

…evaluation

fix(webapp): export the builder loader from converted API routes

653cb43

createActionApiRoute's loader handles CORS OPTIONS preflight; the destructured exports never surfaced it (pre-existing), do it now.

kathiekiwi force-pushed the chore/vite-migration branch from bad78e6 to 653cb43 Compare July 12, 2026 03:44

kathiekiwi force-pushed the feat/light-theme branch from 3ccd96f to 9a79068 Compare July 12, 2026 03:44

This comment was marked as resolved.

Sign in to view

fix(webapp): close vite dev server on shutdown

9aadad2

This comment was marked as resolved.

Sign in to view

kathiekiwi added 3 commits July 13, 2026 09:50

fix(webapp): address light theme review feedback

942c2b1

- re-resolve theme colors when data-theme changes - narrow jsonb_set write for theme preference - opaque amber for reasoning text in light mode

fix(webapp): address light theme review round 2

030b9a5

- keep dark-theme switch/radio thumb colors, white only in light - pick avatar letter color by background luminance - seed required preference fields when jsonb column is null

kathiekiwi force-pushed the feat/light-theme branch from c9b14b5 to 21dcc04 Compare July 13, 2026 09:51

This comment was marked as resolved.

Sign in to view

kathiekiwi added 2 commits July 14, 2026 13:03

chore(webapp): default theme switcher on for preview (drop before merge)

000ccd1

kathiekiwi force-pushed the feat/light-theme branch from 21dcc04 to 000ccd1 Compare July 14, 2026 13:03

Base automatically changed from chore/vite-migration to main July 21, 2026 13:57

This comment was marked as resolved.

Sign in to view

kathiekiwi added 11 commits July 23, 2026 16:46

feat(webapp): contrast overlay covers the full monochrome scale

fc2b65f

Backgrounds deepen (dark) or lift (light), surfaces and all border steps strengthen, text weights increase - task names and dimmed labels now respond visibly to the slider in both modes.

fix(webapp): light-mode contrast pushes foregrounds, not backgrounds

ffa3b52

Whites can't get whiter: dimmed/faint text goes near-black, borders and controls darken hard, deep surfaces dip slightly for panel separation.

feat(webapp): tinted status chips respond to the contrast control

ae288da

Shared contrast-chip marker on error/health/pill/source/connection chips and subtle badges; a contrast+saturate filter driven by --theme-contrast separates the tint and its colored text.

fix(webapp): chips gain a currentColor ring with contrast instead of …

17d1a7c

…a washing filter

feat(webapp): quiet slider variant for the contrast setting

7c548ea

feat(webapp): borderless contrast slider thumb; release note covers t…

3f3c240

…he contrast slider

feat(webapp): borderless solid thumb on the contrast slider

1db252c

feat(webapp): contrast slider thumb matches the switch thumb

447a663

fix(webapp): pinned theme applies immediately after leaving system pr…

c376521

…eference React skips the data-theme write when its virtual DOM already matched the SSR fallback while the inline script had flipped the real attribute; the sync hook now writes pinned themes explicitly.

fix(webapp): contrast slider thumb visible on the light track

b41d0de

fix(webapp): contrast slider thumb reuses the secondary button shadow

4719b7a

kathiekiwi changed the title ~~feat(webapp): light theme~~ feat(webapp): Themes + contrast settings update Jul 23, 2026

kathiekiwi added 2 commits July 23, 2026 20:33

fix(webapp): stronger contrast slider thumb definition

2fada02

Merge remote-tracking branch 'origin/main' into feat/light-theme

8b64da9

feat(webapp): logged-out pages follow the OS appearance

48f75c5

Login, invites and other anonymous pages resolve the System preference when the theme switcher flag is on; Classic stays the flag-off default. The invites heading goes monochrome in System themes.

This comment was marked as resolved.

Sign in to view

kathiekiwi added 5 commits July 23, 2026 21:00

fix(webapp): hide the dark dashboard backdrop on the light theme

b8813ce

The new-org background is built from dark-dashboard screenshots (plus a hardcoded near-black fill); the light theme falls back to a flat surface.

fix(webapp): logged-out pages stay on the branded Classic look

d8ce6d4

feat(webapp): light blurred backdrop for the new-organization page

d52c68a

Light variants generated from the dark screenshots by inverting lightness (hues survive, so the accent smudges stay true); optimized progressive JPEGs at a fraction of the original size.

fix(webapp): error screen keeps the dark animation, text stays readab…

27172a1

…le on light

kathiekiwi added preview and removed preview labels Jul 23, 2026

kathiekiwi added 3 commits July 23, 2026 21:59

revert(webapp): onboarding screenshots stay dark in every theme

62c3d4f

Merge branch 'feat/system-preference-theme' into feat/light-theme

33a5415

# Conflicts: # apps/webapp/app/routes/account._index/route.tsx

feat(webapp): new Dark theme is the default with a slight contrast bump

57ceb98

Missing or legacy preferences resolve to the pinned Dark theme (not system-resolved, so nobody is surprised by light mode) and the default contrast is 50. Classic remains the flag-off look.

devin-ai-integration Bot reviewed Jul 27, 2026

View reviewed changes

kathiekiwi added 2 commits July 27, 2026 07:49

fix(webapp): merge the duplicated pause-button className from the que…

6b0484e

…ue-metrics merge

Uh oh!

Uh oh!

Conversation

kathiekiwi commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

❌ Failed checks (2 warnings)

Uh oh!

trigger-dot-bot Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

github-actions Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧭 Helm Chart Prerelease Published

Uh oh!

This comment was marked as resolved.

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kathiekiwi commented Jul 9, 2026 •

edited

Loading

changeset-bot Bot commented Jul 9, 2026 •

edited

Loading

coderabbitai Bot commented Jul 9, 2026 •

edited

Loading

trigger-dot-bot Bot commented Jul 9, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 11, 2026 •

edited

Loading

github-actions Bot commented Jul 23, 2026 •

edited

Loading