feat(theme): restyle docs to match opentrace.com#21
Conversation
- Dark-only slate scheme with matching color palette (#08080d bg, #6C8EFF/#A855F7 accents) - Host Grotesk headings, Inter body font loaded via CSS - Gradient h1s, styled code blocks, admonitions, tables, and scrollbars - "Try Now" button in header linking to oss.opentrace.ai - Updated homepage CTA from "Get Started" to "Try Now" linking to oss.opentrace.ai Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
📚 Documentation Preview Preview deployed to: https://opentrace.github.io/docs/preview/21-merge/ |
![opentrace[bot]](https://avatars.githubusercontent.com/in/1202796?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ Approved
This is a clean documentation styling update that matches the main website design. The changes are safe and correctly implemented.
Summary
The PR updates the MkDocs Material theme with:
- Custom CSS matching opentrace.com branding (dark theme, custom colors, fonts)
- Template override adding a "Try Now" button to the header
- Updated site URL and copyright year
- Simplified theme configuration (dark-only mode)
Code Quality
The implementation is well-structured:
- CSS is organized with clear section comments
- JavaScript DOM manipulation includes a null check
- External links properly use
target="_blank"withrel="noopener"for security - Responsive design includes mobile breakpoint for the header button
- Template correctly extends Material's
base.html
Minor Observations
-
External font dependency: The CSS loads Google Fonts from
fonts.googleapis.com. This is standard but does create an external dependency and potential GDPR consideration if serving EU users. -
Year update: Copyright changed from 2025 → 2026. This appears intentional but worth confirming the year is correct.
-
Dark-only theme: The PR removes light mode entirely. This is a design decision that reduces accessibility for users who prefer light themes, but it's clearly intentional to match the main site.
All of these are design choices rather than bugs. The code is correct and safe to merge.
Replace icon-only white logo with full OpenTrace wordmark from the website, including the orange (#f60) icon and "OpenTrace" text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 participant
Restyle docs to match opentrace.com brand
✨ Improvement · 📝 Docs
Replaces the default Material for MkDocs theme with custom styling that matches the opentrace.com website. Adds a "Try Now" button to the header and updates the homepage CTA to link to the live platform.
Complexity
🟢 Low ·
4 files changed, 342 insertions(+), 28 deletions(-)This is a cosmetic documentation styling update. The changes are confined to MkDocs configuration and presentation — no functional code, no data handling, no integrations. The custom CSS and template override follow standard Material for MkDocs patterns. A reviewer familiar with MkDocs can scan the CSS and confirm it matches the design intent without deep analysis.
Additional details
Theming approach
The custom CSS defines a complete color palette matching the opentrace.com website — deep dark backgrounds (
#08080d), purple-to-blue gradient accents (#6C8EFF→#A855F7), and Host Grotesk + Inter font stack. The theme is dark-only (removed light mode toggle) to ensure consistency.Header injection
The "Try Now" button is added to the header via a custom Jinja template override (
main.html) that extendsbase.htmland injects JavaScript to insert a styled link into the Material header. This avoids forking Material's navigation template while keeping the button visible on every page.Visual consistency
Typography, borders, code blocks, tables, and admonitions all follow the website's design system — rounded corners, subtle borders with
rgba(255, 255, 255, 0.06), glassmorphic header with backdrop blur, and custom scrollbar colors.