Loading...
Searching...
No Matches
Feature Tour

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 ☾ button in the top-right of the navbar to toggle dark mode. The theme supports two mechanisms:

  1. OS preference: prefers-color-scheme: dark is respected automatically.
  2. 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.

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

  1. Clone the repository
  2. Install dependencies with pixi install
  3. Compile the theme: pixi run compile
  4. Point your Doxyfile at the theme files
  5. Run Doxygen

Unordered

  • Crimson Text — body copy (Google Fonts)
  • Maiden Orange — headings (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

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)