Skip to content

[adm 12] Establish canonical light/dark mode switching across app and /ankh administration #127

Description

@artiphishle

Roadmap: #115

Respect the roadmap first and the AGENTS.md file of every repository touched.

Previous roadmap step

[adm 11] (#126) proves module-owned administration through localization. This issue prepares Theme work by establishing one canonical active light/dark mode across the generated app and its /ankh/* administration.

Repository impact

Likely:

  • ankhorage/studio
  • ankhorage/templates
  • ankhorage/zora / ankhorage/surface only if canonical mode/provider APIs are incomplete
  • ankhorage/runtime / ankhorage/contracts only if current mode state/action ownership requires evolution

Pause at package release boundaries per roadmap rule #6.

Goal

Establish one canonical active theme mode experience so generated templates and all /ankh/* administration render in the same light/dark mode.

Requirements

Template switcher

Every generated template should expose a convenient top-right light/dark mode switcher in the normal app chrome where appropriate.

The switcher must use the canonical app theme-mode state/action, not a template-specific local boolean.

Shared mode

Active app mode = light
  -> generated app renders light
  -> /ankh/* renders light
  -> Theme administration edits/previews light

Active app mode = dark
  -> generated app renders dark
  -> /ankh/* renders dark
  -> Theme administration edits/previews dark

There must not be separate app mode, Studio mode and admin mode models.

Persistence/lifecycle

Investigate the current canonical mode state and decide appropriate persistence according to existing app/runtime state architecture.

  • switching mode must update immediately;
  • navigation between app and /ankh/* preserves the active mode;
  • refresh/reload behavior is deterministic according to the chosen canonical persistence policy;
  • no route-specific mode overrides unless explicitly supported by the theme architecture later.

Theme integration

The canonical mode must be consumable by [adm 13] so Theme administration edits the currently active mode without maintaining a second preview mode state.

Likely files

Studio, non-exhaustive:

src/ui/admin/AnkhAdminShell.tsx
src/ui/admin/pages/ThemeAdminPage.tsx
src/core/StudioProvider.ts
src/host/layout/templates/rootLayout.ts

Template/ZORA/Surface/Runtime ownership must be inspected before changing other repositories.

Phases

Phase 1 — canonical mode ownership

Audit current ZORA/Surface/runtime theme mode APIs and establish one state/action/persistence path.

Phase 2 — generated template switcher

Add reusable top-right mode switching through the canonical app chrome/template integration.

Phase 3 — /ankh propagation

Ensure all admin routes and Theme page consume the same active mode.

Tests

Cover at minimum:

  • light -> dark -> light state transitions;
  • app and /ankh/* resolve the same active mode;
  • navigation preserves mode;
  • persistence/reload behavior according to chosen policy;
  • no duplicate admin/Studio mode state;
  • generated template integration uses canonical action/state.

Acceptance criteria

  1. Generated templates expose a convenient light/dark switcher.
  2. The switcher uses one canonical theme-mode state/action.
  3. App and every /ankh/* route render according to the same active mode.
  4. Theme administration consumes the same mode.
  5. Mode changes apply immediately and navigation preserves them.
  6. Persistence behavior is explicit, deterministic and documented.
  7. No duplicate Studio/admin mode model exists.
  8. Behavior-focused tests and full validation pass.
  9. No legacy/compatibility/ankhorage4 dependency is introduced.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions