Skip to content

DX-039: Theme toggle and light/dark parity for docs #551

Description

@IbrahimIjai

Context

Docs are read for long stretches and theme preference matters more here than
anywhere else in the product. The requirement matching apps/web is zero flash
on load, which means the theme must be resolved before first paint.

Scope

  • Reuse the app's ThemeProvider approach: a blocking inline script sets the
    class on <html> from stored preference or prefers-color-scheme before
    paint.
  • Add a theme toggle to the docs header with the same three states the app uses.
  • Audit every docs surface in both themes: code blocks, callouts, tables,
    sidebar, TOC, search dialog, badges.
  • Verify AA contrast for body text, muted text, links, and code on every surface.
  • Handle images that need a dark variant with a documented convention.

Acceptance criteria

  • No flash of the wrong theme on a hard load in either preference, on a
    throttled connection.
  • Preference persists and syncs with the app's stored value.
  • Every listed surface meets AA in both themes; ratios in the PR.
  • Screenshots of every component in both themes attached.

Out of scope

  • A high-contrast theme (DS-066 already covers the app; docs inherits later).

Spec: docs/dx_1/001_docs_site.md §5 · Depends on: DX-038

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardStellar WaveIssues in the Stellar wave programThird CampaignCampaign: Third CampaigndocumentationImprovements or additions to documentationenhancementNew feature or request

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions