Skip to content

🎨 Adopt dark-only theme aligned with axone.xyz #729

@ccamel

Description

@ccamel

Task

Update the documentation site (Docusaurus) to use a dark-only theme, visually consistent with https://axone.xyz.

Reference color palette

Extracted from axone.xyz for consistent styling:

  • Background: #191716
  • Text (primary): #d9d9d9
  • Text (muted): #959595
  • Primary accent: #ff773d
  • Brand blue: #044da2
  • Success: #13ce66
  • Accent alt / focus: #00ff95
  • Danger (background use): #661d1d

Note: Do not modify brand assets (logo, favicon, social preview images) β€” these are handled in a separate issue.

Reference typography

For readability and alignment with axone.xyz:

  • Body text: Inter (fallback: Helvetica, Arial, sans-serif)
  • Headings: Montserrat (fallback: Helvetica, Arial, sans-serif)

Requirements

  • Enforce dark-only mode by removing the light/dark theme toggle in Docusaurus.
  • Apply the reference color palette consistently across:
    • Backgrounds, text, links, buttons, and other UI components.
    • Code blocks (using Prism.js) and admonitions (e.g., note, tip, warning).
    • Mermaid diagrams (via Docusaurus Mermaid plugin or equivalent).
  • Use the specified typography: Inter for body text, Montserrat for headings.
  • Ensure readability of long-form documentation pages in dark mode.
  • If uncertainties or design conflicts arise (e.g., unclear styling for a component), post questions in this issue rather than making assumptions.
  • Test rendering across modern browsers (Chrome, Firefox, Safari).

Acceptance criteria

  • Documentation loads in dark mode by default with no option to switch to light mode.
  • All UI elements (backgrounds, text, links, buttons), code blocks, admonitions, and Mermaid diagrams use the specified color palette and typography.
  • Long-form documentation pages are comfortable to read in dark mode (e.g., no eye strain from low contrast or overly bright elements).
  • All text, code blocks, and interactive elements pass WCAG 2.1 AA contrast checks, with contrast ratios of at least 4.5:1 for normal text and 3:1 for large text.
  • Documentation renders consistently across modern browsers (Chrome, Firefox, Safari).
  • No visual artifacts (e.g., light backgrounds in code blocks or diagrams) remain.
  • Brand assets (logo, favicon, social preview images) remain unchanged.

Out of scope

  • Modifying logos, favicons, or social preview images.
  • Changing documentation content, structure, or layout.
  • Implementing features unrelated to the dark theme (e.g., PWA functionality).

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

βœ… Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions