Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Sep 17, 2025

This PR implements a comprehensive dark-only theme for the Axone Protocol documentation site, ensuring visual consistency with the main axone.xyz website.

Key Changes

Theme Configuration

  • Enforced dark-only mode by updating colorMode.defaultMode to 'dark' in docusaurus.config.js
  • Removed theme toggle - users can no longer switch to light mode
  • Updated footer style from 'light' to 'dark' for consistency
  • Updated Prism.js to use vsDark theme for both light and dark modes

Typography Implementation

  • Added Google Fonts integration for Inter (body text) and Montserrat (headings)
  • Configured font fallbacks to existing Helvetica fonts for reliability
  • Aligned typography with axone.xyz design specifications

Color Palette

Implemented the complete axone.xyz color palette as CSS custom properties:

  • Background: #191716
  • Primary text: #d9d9d9
  • Muted text: #959595
  • Primary accent: #ff773d
  • Brand blue: #044da2
  • Success: #13ce66
  • Accent alt/focus: #00ff95
  • Danger background: #661d1d

Comprehensive Styling Updates

  • Rewrote src/scss/custom.scss with dark-only CSS variables
  • Enhanced contrast ratios for accessibility compliance
  • Styled all UI components including navigation, sidebar, footer, code blocks, and interactive elements
  • Ensured consistency across charts, mathematical formulas, and Mermaid diagrams
  • Maintained brand assets (logos, favicons) unchanged as specified

Visual Results

The documentation now presents a cohesive dark theme experience:

Homepage with new dark theme:
Homepage with Dark Theme

Documentation pages showing consistent styling:
Documentation Pages with Dark Theme

Testing & Quality Assurance

  • Build verification: Production build completes successfully
  • Linting compliance: All SCSS changes pass stylelint validation
  • Cross-page consistency: Verified across homepage, documentation, whitepaper, and technical reference pages
  • Component compatibility: Charts, code blocks, mathematical formulas, and interactive elements work correctly
  • Accessibility: Maintains proper contrast ratios for readability

The implementation provides a professional, cohesive dark theme that enhances the user experience while maintaining perfect alignment with the Axone brand identity.

Fixes #729.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@vercel
Copy link

vercel bot commented Sep 17, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
docs Ready Ready Preview Comment Sep 22, 2025 11:18am

Copilot AI changed the title [WIP] 🎨 Adopt dark-only theme aligned with axone.xyz 🎨 Adopt dark-only theme aligned with axone.xyz Sep 17, 2025
Copilot AI requested a review from ccamel September 17, 2025 17:42
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 18, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Member

@bot-anik bot-anik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Device URL
desktop http://localhost:3000/

Device URL
mobile http://localhost:3000/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

Copy link
Contributor

@AnjaMis AnjaMis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

@ccamel ccamel marked this pull request as ready for review September 22, 2025 11:15
Copy link
Member

@ccamel ccamel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome 👍

@ccamel ccamel merged commit 49e7fd5 into main Sep 22, 2025
18 checks passed
@ccamel ccamel deleted the copilot/fix-729 branch September 22, 2025 11:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🎨 Adopt dark-only theme aligned with axone.xyz

4 participants