Skip to content

Add a theme system and light/dark mode to the shell #158

Description

@priethor

Goal

Phase 1 of the Cortext editing theme: declare the token contract, ship the light/dark toggle, and refactor existing shell styles to consume tokens.

Scope

  • Declare the token contract: color, typography, spacing, borders, and shadow tokens, light and dark.
  • Refactor shell styles to consume tokens.
  • Light / dark / auto toggle in the shell, persisted per user.
  • Stamp the chosen mode before React mounts so dark users don't get a light flash on reload.
  • Drop the frontend token overlay and the Cortext header/footer block patterns; Phase 1 doesn't put any Cortext styling on the public side.
  • Document the token contract in docs/theming.md.

Out of scope

  • Extending the theme into the canvas iframe.
  • The Site Preview toggle.
  • Accent picker, font picker, density.

Acceptance criteria

  • Light, dark, and auto modes work in the shell and persist per user across reloads.
  • The shell renders identically in light mode before and after the token refactor (no visual regression).
  • The plugin emits no Cortext CSS, patterns, or tokens on public pages.
  • docs/theming.md documents the token contract.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Fields

No fields configured for Enhancement.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions