@@ -4,7 +4,7 @@ Design rationale and non-obvious conventions. See [CLAUDE.md](../CLAUDE.md) for
 
 ## Docs
 
-- [Presentation Themes](./themes.md): Minecraft activation and assets, CS:GO, GTA and Halo styling, Halo theme music, icon-only theme picker, dark-chart/export integration, and presentation-only API exclusion.
+- [Presentation Themes](./themes.md): Minecraft activation and assets, CS:GO, GTA and Halo styling, Halo theme music, single-button theme toggle, dark-chart/export integration, and presentation-only API exclusion.
 - [Playable Minecraft](./minecraft-game.md): the opt-in game launched from the Minecraft theme, controls, saves, lifecycle and verification.
 
 - [Dashboard Read-only Views](./dashboard-readonly-views.md): API/filter inventory, source audit and verification scope
 
@@ -4,10 +4,9 @@
 
 The root `ThemeProvider` in `packages/app/src/app/layout.tsx` uses `next-themes`
 to persist a theme and apply its class to `<html>` before hydration. The
-header's `ModeToggle` is an icon-only picker: the trigger shows the active
-theme's icon and expands a compact column with one icon button per theme in
-`APP_THEMES` order, so any theme is one tap away. Selecting a theme emits
-`theme_toggled`.
+header's `ModeToggle` is a single icon button: each click advances through
+`APP_THEMES` in order and wraps from Halo back to light. The icon shows the
+active theme, and each change emits `theme_toggled`. There is no dropdown.
 The existing default remains dark; the system setting remains supported.
 
 The root `EasterEggThemeLazy` boundary imports only the selected optional theme.
@@ -39,7 +38,7 @@ contrast branch.
 
 ## CS:GO implementation
 
-`src/lib/themes.ts` centralizes picker order
+`src/lib/themes.ts` centralizes toggle order
 (`light, dark, minecraft, csgo, gta, doom, halo`), dark-background classification, and the
 chart-palette alias used by CS:GO, GTA, DOOM and Halo. CS:GO retains the
 existing sans-serif font for chart legibility and preserves the dark theme's
@@ -91,7 +90,7 @@ by the repository's code license.
 
 Halo follows the GTA pattern: it is dark-classified everywhere (`isDarkTheme`),
 aliases onto the dark chart seed (`chartPaletteTheme`), and keeps the dark
-vendor, high-contrast, and overlay palettes. The picker shows it with a shield
+vendor, high-contrast, and overlay palettes. The toggle shows it with a shield
 icon after DOOM. There is no playable game.
 
 The chrome follows the Halo Infinite menus: deep navy near-opaque panels over
@@ -128,7 +127,7 @@ Asset provenance is recorded in `packages/app/public/decorative/minecraft/game/R
 Doom follows the CS:GO pattern with no game, audio, Three.js, or custom fonts.
 It is dark-classified (`isDarkTheme`), aliases onto the dark chart seed
 (`chartPaletteTheme`), and keeps the dark vendor, high-contrast, and overlay
-palettes. The picker uses the `Skull` icon.
+palettes. The toggle uses the `Skull` icon.
 
 `DoomDecorations` follows the root class and renders a responsive local DOOM
 (2016) hellscape behind the document (`aria-hidden`, `pointer-events: none`)
@@ -138,16 +137,16 @@ rule; circuit and autumn decorations are hidden. Embed routes suppress both.
 Asset provenance and the maintainer-reported permission are recorded in
 `packages/app/public/decorative/doom/README.md`.
 
-## Picker accessibility
+## Toggle accessibility
 
 The GTA banner also launches the optional [Bay Area heist game](./gta-heist.md).
 The game loads on demand and does not alter benchmark controls or data.
 
 The trigger keeps `data-testid="theme-toggle"` and its
-`Switch theme (currently <theme> mode)` label. Options are `role="radio"` in a
-labelled `radiogroup` (`data-testid="theme-option-<theme>"`), with localized
-`aria-label`/`title` text, roving tab index, arrow/Home/End navigation, and
-Escape to close. Options stay 44px on phones and 36px from `md`.
+`Switch theme (currently <theme> mode)` label. It is a native button with
+Enter/Space activation and a 44px target on desktop and mobile. Keyboard focus
+stays on the button after each change. An unknown or system preference advances
+to light, matching the original toggle behavior; saved themes remain supported.
 
 ## Data/API coverage
 
@@ -174,7 +173,7 @@ are still checked. Dynamic imports are verified separately by browser tests.
 and Firefox CI matrix. It covers:
 
 - English/Chinese desktop/mobile light/dark landings, no saved preference and
-  system preference, including opening the picker and scrolling.
+  system preference, including focusing the toggle and scrolling.
 - Network requests from navigation onward (including requests still in flight),
   loaded JS/CSS fingerprints for the optional engines and Minecraft game,
   font registration, and absence of optional theme/game DOM.
@@ -199,7 +198,7 @@ Crawler and theme-switch comparisons also cover robots, Open Graph and Twitter
 metadata. Run these tests on the implementation's final commit before merge;
 passing an earlier commit does not verify later changes.
 
-- Direct selection of every theme from the picker, keyboard navigation,
+- Cycling through every theme and wrapping to light, keyboard activation,
   persistence after reload, and cleanup on exit.
 - No CS:GO image requests on a cold light/dark landing; images load only
   after selection, with a smaller mobile crop.
 
@@ -6,6 +6,7 @@ import { Header } from '@/components/header/header';
 import { ThemeProvider } from '@/components/ui/theme-provider';
 import { APP_THEMES } from '@/lib/themes';
 import { createMockRouter } from '../support/mock-router';
+import { cycleToTheme } from '../support/theme';
 
 // Mounted outside the Next app shell; next-style-loader inserts the global
 // stylesheet before this anchor, so it must exist before the import below.
@@ -270,7 +271,6 @@ describe('Header', () => {
       const next = APP_THEMES[index + 1];
       if (next) {
         cy.get('[data-testid="theme-toggle"]').click();
-        cy.get(`[data-testid="theme-option-${next}"]`).click();
       }
     }
   });
@@ -390,8 +390,7 @@ describe('Header', () => {
     });
 
     it('exposes the minecraft audio toggles in the mobile menu without overflowing', () => {
-      cy.get('[data-testid="theme-toggle"]').click();
-      cy.get('[data-testid="theme-option-minecraft"]').click();
+      cycleToTheme('minecraft');
       cy.get('html').should('have.class', 'minecraft');
       cy.get('[data-testid="mobile-menu-toggle"]').click();
       cy.get('[data-testid="mobile-menu"]').within(() => {
 
@@ -1,6 +1,7 @@
 import { ModeToggle } from '@/components/ui/mode-toggle';
 import { ThemeProvider } from '@/components/ui/theme-provider';
 import { APP_THEMES } from '@/lib/themes';
+import { registerAnalyticsClient } from '@/lib/analytics';
 
 const ICONS: Record<string, string> = {
   light: 'lucide-sun',
@@ -12,13 +13,10 @@ const ICONS: Record<string, string> = {
   halo: 'lucide-shield',
 };
 
-function pick(theme: string) {
-  cy.get('[data-testid="theme-toggle"]').click();
-  cy.get(`[data-testid="theme-option-${theme}"]`).click();
-}
-
 describe('ModeToggle', () => {
   beforeEach(() => {
+    cy.window().then((win) => win.localStorage.setItem('theme', 'light'));
+    registerAnalyticsClient({ capture: cy.stub().as('capture') });
     cy.mount(
       <ThemeProvider
         attribute="class"
@@ -29,56 +27,36 @@ describe('ModeToggle', () => {
         <ModeToggle />
       </ThemeProvider>,
     );
+    cy.get('[data-testid="theme-toggle"]').should(
+      'have.attr',
+      'aria-label',
+      'Switch theme (currently light mode)',
+    );
   });
 
-  it('expands an icon-only menu with one option per theme', () => {
-    cy.get('[data-testid="theme-menu"]').should('not.exist');
-    cy.get('[data-testid="theme-toggle"]')
-      .should('have.attr', 'aria-expanded', 'false')
-      .click()
-      .should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-testid="theme-menu"] [role="radio"]').should('have.length', APP_THEMES.length);
-    cy.get('[data-testid="theme-option-kart"]').should('not.exist');
-    for (const theme of APP_THEMES) {
-      cy.get(`[data-testid="theme-option-${theme}"]`)
-        .should('have.attr', 'aria-label')
-        .and('not.be.empty');
-      // Icons only: no visible text inside an option.
-      cy.get(`[data-testid="theme-option-${theme}"]`).should('have.text', '');
-      cy.get(`[data-testid="theme-option-${theme}"] svg`).should('have.class', ICONS[theme]);
-    }
-    cy.get('[data-testid="theme-option-light"]')
-      .should('have.attr', 'aria-checked', 'true')
-      .and('have.focus');
-  });
-
-  it('selects any theme directly and closes the menu', () => {
-    for (const theme of ['doom', 'halo', 'gta', 'minecraft', 'dark', 'csgo', 'light']) {
-      pick(theme);
+  it('cycles every theme with one click and wraps back to light without a menu', () => {
+    for (const theme of [...APP_THEMES.slice(1), 'light']) {
+      cy.get('[data-testid="theme-toggle"]').click();
       cy.get('html').should('have.class', theme);
       cy.get('[data-testid="theme-menu"]').should('not.exist');
+      cy.get('[data-testid="theme-toggle"]').should('not.have.attr', 'aria-expanded');
       cy.get('[data-testid="theme-toggle"]')
         .should('have.attr', 'aria-label', `Switch theme (currently ${theme} mode)`)
         .find('svg')
         .should('have.class', ICONS[theme]);
+      cy.window().should((win) => expect(win.localStorage.getItem('theme')).to.equal(theme));
+      cy.get('@capture').should('have.been.calledWith', 'theme_toggled', { theme });
     }
-    cy.get('html').should('not.have.class', 'gta');
+    cy.get('html').should('not.have.class', 'halo');
   });
 
-  it('supports arrow-key navigation and Escape', () => {
-    cy.get('[data-testid="theme-toggle"]').click();
-    cy.focused().should('have.attr', 'data-testid', 'theme-option-light');
-    cy.focused().type('{downArrow}');
-    cy.focused().should('have.attr', 'data-testid', 'theme-option-dark');
-    cy.focused().type('{upArrow}{upArrow}');
-    cy.focused().should('have.attr', 'data-testid', `theme-option-${APP_THEMES.at(-1)}`);
-    cy.focused().click();
-    cy.get('html').should('have.class', APP_THEMES.at(-1)!);
-    cy.get('[data-testid="theme-menu"]').should('not.exist');
-    cy.get('[data-testid="theme-toggle"]').click();
-    cy.focused().should('have.attr', 'data-testid', `theme-option-${APP_THEMES.at(-1)}`);
-    cy.focused().type('{esc}');
+  it('keeps a native button and retains focus after activation', () => {
+    cy.get('[data-testid="theme-toggle"]')
+      .should('have.prop', 'tagName', 'BUTTON')
+      .and('have.attr', 'type', 'button');
+    cy.get('[data-testid="theme-toggle"]').focus().click();
+    cy.get('html').should('have.class', 'dark');
+    cy.focused().should('have.attr', 'data-testid', 'theme-toggle');
     cy.get('[data-testid="theme-menu"]').should('not.exist');
-    cy.get('html').should('have.class', APP_THEMES.at(-1)!);
   });
 });
@@ -192,7 +192,6 @@ describe('Landing page performance', () => {
       .should('have.attr', 'aria-label')
       .and('contain', 'currently');
     cy.get('[data-testid="theme-toggle"]').click();
-    cy.get('[data-testid="theme-option-minecraft"]').click();
     cy.get('html').should('have.class', 'minecraft');
     cy.window().should((win) => {
       const resourceNames = win.performance.getEntriesByType('resource').map((entry) => entry.name);
 
@@ -1,10 +1,4 @@
-const chooseTheme = (theme: string) => {
-  cy.get('[data-testid="theme-toggle"]')
-    .should('have.attr', 'aria-label')
-    .and('include', 'currently');
-  cy.get('[data-testid="theme-toggle"]').click();
-  cy.get(`[data-testid="theme-option-${theme}"]`).click();
-};
+import { cycleToTheme as chooseTheme } from '../support/theme';
 
 const gameResources = (win: Window) =>
   win.performance
 
@@ -1,4 +1,5 @@
 import { APP_THEMES } from '../../src/lib/themes';
+import { cycleToTheme } from '../support/theme';
 
 const optionalThemes = APP_THEMES.filter((theme) => !['light', 'dark', 'system'].includes(theme));
 const featureCode =
@@ -50,7 +51,7 @@ const seo = (doc: Document) => [
 
 describe('optional themes stay off the default page', () => {
   for (const route of ['/', '/zh']) {
-    it(`${route} migrates a retired kart preference and keeps the picker usable`, () => {
+    it(`${route} migrates a retired kart preference and keeps the toggle usable`, () => {
       const requests: string[] = [];
       cy.intercept('GET', '**', (request) => {
         requests.push(request.url);
@@ -62,17 +63,18 @@ describe('optional themes stay off the default page', () => {
       });
       cy.get('html').should('have.class', 'dark').and('not.have.class', 'kart');
       cy.window().should((win) => expect(win.localStorage.getItem('theme')).to.equal('dark'));
-      cy.get('[data-testid="theme-toggle"]').click();
+      cy.get('[data-testid="theme-toggle"]').focus();
       cy.get('[data-testid="theme-option-kart"]').should('not.exist');
-      cy.get('[data-testid="theme-menu"] [role="radio"]').should('have.length', 7);
-      cy.get('[data-testid="theme-option-light"]').click();
+      cy.get('[data-testid="theme-menu"]').should('not.exist');
+      expectNoOptionalResources(requests);
+      // Cycling intentionally activates optional themes before returning to light.
+      cycleToTheme('light');
       cy.get('html').should('have.class', 'light').and('not.have.class', 'kart');
       cy.reload();
       cy.get('html').should('have.class', 'light').and('not.have.class', 'kart');
       cy.then(() => {
         expect(requests.filter((url) => url.includes('/decorative/kart/'))).to.deep.equal([]);
       });
-      expectNoOptionalResources(requests);
     });
   }
 
@@ -106,10 +108,9 @@ describe('optional themes stay off the default page', () => {
         const splash = win.document.querySelector('.splash-text');
         if (splash) expect(win.getComputedStyle(splash).animationName).to.equal('none');
       });
-      // Merely viewing options and interacting with the page must not activate a theme.
-      cy.get('[data-testid="theme-toggle"]').click();
-      cy.get('[data-testid="theme-option-minecraft"]').should('be.visible');
-      cy.get('body').type('{esc}');
+      // Focusing the toggle must not activate a theme or fetch optional assets.
+      cy.get('[data-testid="theme-toggle"]').focus();
+      cy.get('[data-testid="theme-menu"]').should('not.exist');
       cy.scrollTo('bottom');
       expectNoOptionalResources(requests);
     });
@@ -183,13 +184,11 @@ describe('optional themes stay off the default page', () => {
     cy.document().then((doc) => {
       const baseline = seo(doc);
       for (const theme of optionalThemes) {
-        cy.get('[data-testid="theme-toggle"]').click();
-        cy.get(`[data-testid="theme-option-${theme}"]`).click();
+        cycleToTheme(theme);
         if (theme === 'minecraft') cy.get('canvas').should('exist');
         else cy.get(`[data-testid="${theme}-theme-banner"]`).should('be.visible');
         cy.document().should((current) => expect(seo(current)).to.deep.equal(baseline));
-        cy.get('[data-testid="theme-toggle"]').click();
-        cy.get('[data-testid="theme-option-dark"]').click();
+        cycleToTheme('dark');
         cy.get(`canvas, audio, iframe, ${featureElements}`).should('not.exist');
         cy.document().should((current) => expect(seo(current)).to.deep.equal(baseline));
       }
 
@@ -1,15 +1,7 @@
 // Merged from basic.cy.ts, navigation.cy.ts, theme-toggle.cy.ts, and land-acknowledgement.cy.ts
 // to reduce per-file Cypress startup overhead (~500ms per file)
 
-/** Open the header theme picker after the client mount and choose `theme`. */
-function pickTheme(theme: string) {
-  // The trigger label names the saved theme only once the client has mounted.
-  cy.get('[data-testid="theme-toggle"]')
-    .should('have.attr', 'aria-label')
-    .and('contain', 'currently');
-  cy.get('[data-testid="theme-toggle"]').click();
-  cy.get(`[data-testid="theme-option-${theme}"]`).click();
-}
+import { cycleToTheme as pickTheme } from '../support/theme';
 
 describe('Page Load & Navigation', () => {
   before(() => {
 
@@ -0,0 +1,17 @@
+import { APP_THEMES } from '../../src/lib/themes';
+
+/** Reach a theme through the real toggle, waiting for each React update. */
+export function cycleToTheme(theme: string, remaining = APP_THEMES.length): void {
+  expect(APP_THEMES, 'registered target theme').to.include(theme);
+  cy.get('[data-testid="theme-toggle"]')
+    .should('have.attr', 'aria-label')
+    .and('contain', 'currently');
+  cy.get('html').then(($html) => {
+    if ($html.hasClass(theme)) return;
+    expect(remaining, `clicks left to reach ${theme}`).to.be.greaterThan(0);
+    const current = APP_THEMES.find((candidate) => $html.hasClass(candidate));
+    cy.get('[data-testid="theme-toggle"]').click();
+    if (current) cy.get('html').should('not.have.class', current);
+    cycleToTheme(theme, remaining - 1);
+  });
+}