generated from okp4/template-oss
-
Notifications
You must be signed in to change notification settings - Fork 24
Closed
Description
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).
Copilot
Metadata
Metadata
Labels
No labels
Type
Projects
Status
β
Done