Fix the admin theme toggle

[ascorbic]

What does this PR do?

Replaces the admin header's three-state theme cycle with a direct light/dark toggle. Every click changes the visible color scheme; when the selected scheme matches the operating system preference, the admin removes its stored override and resumes following the system.

The button shows the resolved sun or moon state and exposes its next action as its accessible label. The interaction follows the model described in Lea Verou's Dark mode toggles: two states are enough.

Related issue: Not applicable.

Type of change

• Bug fix
• Feature (requires maintainer-approved Discussion)
• Refactor (no behavior change)
• Translation
• Documentation
• Performance improvement
• Tests
• Chore (dependencies, CI, tooling)

Checklist

• I have read CONTRIBUTING.md
• pnpm typecheck passes
• pnpm lint passes
• pnpm test passes (or targeted tests for my change)
• pnpm format has been run
• I have added/updated tests for my changes (if applicable)
• User-visible strings in the admin UI are wrapped for translation (if applicable). Do not include messages.po changes except in translation PRs — a workflow extracts catalogs on merge to main.
• I have added and reviewed the user-facing changeset (if this PR changes a published package)
• New features link to an approved Discussion: Not applicable — this is a bug fix.
• I have included screenshots below if this PR changes the UI

AI-generated code disclosure

• This PR includes AI-generated code — model/tool: GPT-5 Codex

Screenshots / test output

The light state follows the system preference with no stored override:

One click applies the dark override and changes the header control to a moon:

Focused browser component tests: 8 passed across ThemeToggle and Header.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7838e58

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

This PR includes changesets to release 17 packages

Name	Type
@emdash-cms/admin	Patch
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/sandbox-workerd	Patch
@emdash-cms/fixture-perf-site	Patch
@emdash-cms/perf-demo-site	Patch
@emdash-cms/cache-demo-site	Patch
@emdash-cms/do-demo-site	Patch
@emdash-cms/do-solo-demo-site	Patch
@emdash-cms/auth	Patch
@emdash-cms/blocks	Patch
create-emdash	Patch
@emdash-cms/gutenberg-to-portable-text	Patch
@emdash-cms/x402	Patch
@emdash-cms/auth-atproto	Patch
@emdash-cms/release-service	Patch
@emdash-cms/plugin-embeds	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

[pkg-pr-new]

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@3072

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@3072

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/@emdash-cms/auth-atproto@3072

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@3072

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@3072

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/contentful-to-portable-text@3072

emdash

npm i https://pkg.pr.new/emdash@3072

create-emdash

npm i https://pkg.pr.new/create-emdash@3072

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@3072

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/@emdash-cms/plugin-cli@3072

@emdash-cms/plugin-types

npm i https://pkg.pr.new/@emdash-cms/plugin-types@3072

@emdash-cms/registry-client

npm i https://pkg.pr.new/@emdash-cms/registry-client@3072

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/@emdash-cms/registry-lexicons@3072

@emdash-cms/registry-moderation

npm i https://pkg.pr.new/@emdash-cms/registry-moderation@3072

@emdash-cms/registry-verification

npm i https://pkg.pr.new/@emdash-cms/registry-verification@3072

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/@emdash-cms/sandbox-workerd@3072

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@3072

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@3072

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@3072

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@3072

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@3072

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@3072

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/@emdash-cms/plugin-field-kit@3072

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@3072

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@3072

commit: 7838e58

[emdashbot]

This PR fixes the admin theme toggle by replacing the three-state cycle with a direct light/dark toggle that removes the stored override whenever the chosen scheme matches the OS preference. That is the right fix for the reported problem (clicks that previously cycled through system could leave the visible scheme unchanged), it matches the accessible two-state model described in the link, and it keeps working within the existing ThemeProvider/useTheme interface.

I read the diff, the full changed components and tests, the package changeset, and verified the changes against AGENTS.md conventions. All user-facing strings are Lingui templates, no directional Tailwind classes were introduced, the changeset is accurate and proportionate for a patch, and the new focused tests cover the toggle semantics — system matching, explicit overrides, and localStorage removal. No logic errors, regressions, or convention violations. The PR is clean.

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://codex-admin-two-state-theme-toggle.try.emdashcms.com, https://codex-admin-two-state-theme-toggle-emdash-playground.emdash-cms.workers.dev (commit 7838e58)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://f96c8b97.try.emdashcms.com, https://f96c8b97-emdash-playground.emdash-cms.workers.dev	7838e58	2026-09-11T17:21:37.798Z	Visit the dashboard ↗
Build: Success ✅ Deployment: Success ✅ View logs ↗	https://d70ced70.try.emdashcms.com, https://d70ced70-emdash-playground.emdash-cms.workers.dev	37024d9	2026-09-11T16:53:11.256Z	Visit the dashboard ↗

[ascorbic]

/accept-baselines

[github-actions]

✅ Baselines accepted by @ascorbic and committed to this PR.

[emdashbot]

I re-read the current diff and traced the changed files against the admin theme code. This is a re-review: my previous review approved the PR and found no issues. I concentrated on whether the current state introduces any new problems.

Approach judgment: Replacing the three-state theme cycle with a two-state light/dark toggle is the right fix for the reported problem (clicks that cycled through system without changing the visible scheme). It matches the accessible model described in the PR and stays within the existing ThemeProvider/useTheme interface. Removing the localStorage override when the chosen scheme matches the OS preference is the correct way to resume following the system.

What I checked: ThemeProvider.tsx, ThemeToggle.tsx, Header.test.tsx, ThemeToggle.test.tsx, the changeset, and the visual regression snapshot diffs. I also verified cross-cutting conventions (Lingui wrappers, RTL-safe Tailwind, comment discipline, changeset quality, no logged-out routes affected, no SQL or auth changes).

• The setTheme("system") path now removes the storage key, which is correct because getStoredTheme() treats a missing/invalid key as "system".
• ThemeToggle correctly computes the next scheme from resolvedTheme, samples the OS preference at click time, and stores only when the choice differs from the system.
• All user-facing strings are Lingui template literals.
• No directional Tailwind classes were added or removed.
• The focused tests cover system-matching removal, explicit overrides, and label changes.
• The 24 updated visual regression baselines correspond exactly to the 12 page × 2 locale screenshots where the header toggle icon changed from the old Monitor to the resolved Sun/Moon; this is expected for the UI change.

I found no logic errors, regressions, convention violations, or unaddressed issues since the prior review.

Verdict: approve — the PR remains clean.

[github-actions]

Overlapping PRs

This PR modifies files that are also changed by other open PRs:

• fix(admin): keep locale menus consistent with the admin theme #2903 (12 shared files)

This may cause merge conflicts or duplicated work. A maintainer will coordinate.