This page showcases every visual element that doxyYoda styles. Use it as a reference when evaluating the theme or as a test page when making modifications.

Dark Mode

Click the moon button in the top-right of the navbar to toggle dark mode. The theme supports two mechanisms:

OS preference: prefers-color-scheme: dark is respected automatically.
Manual toggle: stored in localStorage so it persists across page loads.

All colors use CSS custom properties. The switch is instant — no page reload, no flash of unstyled content.

Mermaid

Doxygen 1.17+ can render Mermaid diagrams in the HTML output.

flowchart LR
  SCSS[scss] --> CSS[doxyYoda.css]
  HDR[header.html] --> DOX[doxygen]
  CSS --> DOX
  DOX --> HTML[HTML]

Admonitions

doxyYoda styles all 10 Doxygen admonition types. Each has a distinct left border color and subtle background tint from the Solarized palette.

Note: Note — use \\note to add helpful context or tips. Supports bold, italic, and code formatting within the block.

Warning: Warning — use \\warning for things that can go wrong. Pay special attention to these in API documentation.

Attention: Attention — use \\attention for critical information that users must not overlook.

Todo: Todo — use \\todo for work items. These appear in the global Todo List.

Bug: Bug — use \\bug for known issues. These appear in the global Bug List.

Deprecated: Deprecated — use \\deprecated to mark obsolete APIs. These appear in the global Deprecated List.

Precondition: Precondition — use \\pre to document required state. Example: \( x > 0 \) and the container must not be empty.

Postcondition: Postcondition — use \\post to document guaranteed state after the function returns.

Invariant: Invariant — use \\invariant to document properties that always hold: \( 0 \le \text{size} \le \text{capacity} \).

Test: Test — use \\test to describe testing requirements. Verify that edge cases are handled and outputs match expectations.

Mathematics

doxyYoda uses MathJax 3 for rendering mathematical notation.

Inline Math

The quadratic formula: \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \)

Euler's identity: \( e^{i\pi} + 1 = 0 \)

A probability: \( P(A \mid B) = \frac{P(B \mid A)\,P(A)}{P(B)} \)

Display Math

The Gaussian integral:

\[ \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} \]

The Cauchy-Schwarz inequality:

\[ \left| \sum_{k=1}^{n} a_k b_k \right|^2 \leq \left( \sum_{k=1}^{n} a_k^2 \right) \left( \sum_{k=1}^{n} b_k^2 \right) \]

Maxwell's equations in differential form:

\[\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned} \]

Code Blocks

doxyYoda renders code blocks with syntax highlighting, a copy-to-clipboard button (top-right corner on hover), and optional code folding.

C++

#include <iostream>
#include <vector>
#include <algorithm>
#include <numeric>
template <typename T>
std::pair<double, double> statistics(const std::vector<T>& data) {
    double sum = std::accumulate(data.begin(), data.end(), 0.0);
    double mean = sum / data.size();
 
    double sq_sum = 0.0;
    for (const auto& x : data) {
        sq_sum += (x - mean) * (x - mean);
    }
    double stddev = std::sqrt(sq_sum / data.size());
    return {mean, stddev};
}

Python

import numpy as np
from dataclasses import dataclass
 
@dataclass
class SolarizedColor:
    """A color from the Solarized palette."""
    name: str
    hex: str
    rgb: tuple[int, int, int]
 
PALETTE = [
    SolarizedColor("yellow",  "#b58900", (181, 137,  0)),
    SolarizedColor("orange",  "#cb4b16", (203,  75, 22)),
    SolarizedColor("red",     "#dc322f", (220,  50, 47)),
    SolarizedColor("magenta", "#d33682", (211,  54, 130)),
    SolarizedColor("violet",  "#6c71c4", (108, 113, 196)),
    SolarizedColor("blue",    "#268bd2", ( 38, 139, 210)),
    SolarizedColor("cyan",    "#2aa198", ( 42, 161, 152)),
    SolarizedColor("green",   "#859900", (133, 153,   0)),
]

Shell

#!/bin/bash
# Build doxyYoda demo
set -euo pipefail
 
echo "Compiling SCSS..."
sass src/styles/scss/main.scss src/styles/doxyYoda.css
 
echo "Building documentation..."
doxygen demo/Doxyfile
 
echo "Done. Open demo/build/html/index.html"

Configuration

# Doxyfile snippet for doxyYoda integration
HTML_HEADER            = doxyYoda/src/html/header.html
HTML_FOOTER            = doxyYoda/src/html/footer.html
HTML_EXTRA_STYLESHEET  = doxyYoda/src/styles/doxyYoda.css
LAYOUT_FILE            = doxyYoda/src/xml/doxyYoda.xml
USE_MATHJAX            = YES
MATHJAX_VERSION        = MathJax_3

Tables

Comparison Table

Feature	doxyYoda	Default Doxygen	doxygen-awesome	m.css
CSS Grid	Yes	No	No	No
Dark mode	Yes	No	Yes	Yes
Foldable code	Yes	No	No	No
Copy button	Yes	Yes	Yes	No
MathJax 3	Yes	Yes	Yes	Yes
Solarized	Yes	No	No	No
Graphviz SVG	Yes	Yes	Yes	Yes
Frosted navbar	Yes	No	No	No
Pixi build	Yes	No	No	No

Solarized Palette

Name	Hex	Role
base03	#002b36	Dark background
base02	#073642	Dark highlights
base01	#586e75	Emphasized text
base00	#657b83	Body text (dark)
base0	#839496	Body text (light)
base1	#93a1a1	De-emphasized
base2	#eee8d5	Light highlights
base3	#fdf6e3	Light background
yellow	#b58900	Accent
orange	#cb4b16	Accent
red	#dc322f	Accent
magenta	#d33682	Accent
violet	#6c71c4	Accent
blue	#268bd2	Accent
cyan	#2aa198	Accent
green	#859900	Accent

Lists

Ordered

Clone the repository
Install dependencies with pixi install
Compile the theme: pixi run compile
Point your Doxyfile at the theme files
Run Doxygen

Unordered

Source Serif 4 — body copy (Google Fonts)
Fraunces — headings (Google Fonts)
Source Sans 3 — UI and navigation (Google Fonts)
Hack — monospaced code (jsDelivr CDN)
Vollkorn — serif fallback (Google Fonts)

Nested

Solarized palette
- Light mode: base3 background, base03 text
- Dark mode: base03 background, base3 text
- 8 accent colors for UI chrome
CSS custom properties
- Colors, spacing, radii, shadows, transitions
- Runtime-switchable for dark mode
Font stacks
- --font-sans for body text
- --font-heading for headings
- --font-mono for code

Typography Sampler

Heading Levels

The following heading levels are available. In doxyYoda, headings use the Maiden Orange display font:

@section produces an <h2>
@subsection produces an <h3>
@subsubsection produces an <h4>

Inline Formatting

Bold text via <b> or \\b
Italic text via <em> or \\e
Inline code via backticks
Internal cross-reference via @ref
External link via <a href>

Blockquote

doxyYoda is a modern Doxygen theme that replaces the default table-based layout with CSS Grid, a Solarized color palette, and full dark mode support.

— Project description

Graphviz Diagrams

doxyYoda renders SVG diagrams generated by Doxygen + Graphviz. Visit any class page (e.g., geometry::Shape) to see:

Inheritance graphs showing the class hierarchy
Collaboration graphs showing member type relationships
Include graphs showing header dependencies

The SVG diagrams are interactive — click on a class name to navigate to its documentation page.

Search

doxyYoda styles Doxygen's built-in search. Try the search box in the top navigation bar — it supports:

Class names (e.g., Vec2, Shape)
Function names (e.g., fibonacci, lerp)
Page titles (e.g., Feature Tour)