This page explains how to customize doxyYoda for your project.

Doxyfile Integration

The minimum Doxyfile additions to use doxyYoda:

# Point to doxyYoda's HTML templates and CSS
HTML_HEADER            = path/to/doxyYoda/src/html/header.html
HTML_FOOTER            = path/to/doxyYoda/src/html/footer.html
HTML_EXTRA_STYLESHEET  = path/to/doxyYoda/src/styles/doxyYoda.css
LAYOUT_FILE            = path/to/doxyYoda/src/xml/doxyYoda.xml
 
# Recommended: enable MathJax for math rendering
USE_MATHJAX            = YES
MATHJAX_VERSION        = MathJax_3
 
# Recommended: enable Graphviz for diagrams
HAVE_DOT               = YES
DOT_IMAGE_FORMAT       = svg
INTERACTIVE_SVG        = YES
 
# Optional: enable inline source browsing
INLINE_SOURCES         = YES
SOURCE_BROWSER         = YES

Custom Colors

doxyYoda's entire color system uses CSS custom properties defined on :root. You can override any variable by adding a custom stylesheet.

Override via Extra Stylesheet

Create a file my-overrides.css:

:root {
    /* Change the accent blue to a different shade */
    --accent-blue: #1a73e8;
 
    /* Change the background to pure white */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
}

Then add it to your Doxyfile (after doxyYoda's stylesheet):

HTML_EXTRA_STYLESHEET = path/to/doxyYoda/src/styles/doxyYoda.css \

path/to/my-overrides.css

Available Color Variables

Backgrounds:

Variable	Light Default	Description
--bg-primary	#fdf6e3	Page background
--bg-secondary	#eee8d5	Cards, menus, table headers
--bg-surface	#f5f0e1	Blockquotes, TOC
--bg-primary-translucent	rgba(253,246,227,0.85)	Frosted navbar

Text:

Variable	Light Default	Description
--text-primary	#002b36	Main body text
--text-secondary	#586e75	Secondary text
--text-muted	#657b83	Muted/disabled text

Accents (Solarized):

Variable	Value	Usage
--accent-yellow	#b58900	Glow effects
--accent-orange	#cb4b16	Preprocessor, outlinks
--accent-red	#dc322f	Warnings, labels
--accent-magenta	#d33682	Bugs
--accent-violet	#6c71c4	Templates, blockquotes
--accent-blue	#268bd2	Links, active items
--accent-cyan	#2aa198	Code links
--accent-green	#859900	Parameter names

Custom Fonts

Fonts are loaded via CDN in _fonts.scss. To change them:

CSS Override (Easiest)

Add to your override stylesheet:

:root {
    --font-sans: "Your Body Font", sans-serif;
    --font-heading: "Your Heading Font", sans-serif;
    --font-mono: "Your Mono Font", monospace;
}

SCSS Modification

Edit src/styles/scss/_fonts.scss to change the Google Fonts import URL, then update the font stack variables in _variables.scss:

// _fonts.scss
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
// _variables.scss
:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

Spacing & Layout

Spacing Scale

Variable	Value	Usage
--space-1	0.25rem	Tight gaps
--space-2	0.5rem	Small gaps
--space-3	0.75rem	Medium gaps
--space-4	1rem	Standard gaps
--space-5	1.5rem	Section gaps
--space-6	2rem	Large gaps
--space-7	3rem	Extra large
--space-8	4rem	Page-level spacing

Border Radius

Variable	Value	Usage
--radius-sm	4px	Buttons, badges
--radius-md	6px	Cards, code blocks
--radius-lg	8px	Modals
--radius-xl	12px	Large cards, labels

Shadows

Variable	Value
--shadow-sm	0 1px 2px rgba(0,0,0,0.05)
--shadow-md	0 2px 8px rgba(0,0,0,0.08)
--shadow-lg	0 4px 16px rgba(0,0,0,0.12)

Enable/Disable Features

Dark Mode

Dark mode is handled in the header template (header.html). To disable:

Remove the <button class="dark-mode-toggle"> from header.html
Remove the localStorage script block
The theme will follow prefers-color-scheme only

To force light mode always, add to your override CSS:

html.dark {
    /* Reset all dark mode variables to light values */
    --bg-primary: #fdf6e3;
    --text-primary: #002b36;
    /* ... etc. */
}

Code Folding

Code folding wraps div.fragment elements in <details>. To disable it, remove the "Code folding" block from the <script> in header.html.

Copy Button

The copy-to-clipboard button is added via JavaScript in header.html. Remove the "Copy-to-clipboard" block to disable it.

Building from Source

If you want to modify the SCSS directly:

# Install pixi (https://pixi.sh)
curl -fsSL https://pixi.sh/install.sh | bash
 
# Clone and build
git clone https://github.com/HaoZeke/doxyYoda
cd doxyYoda
pixi install
pixi run compile    # SCSS -> CSS
pixi run demo       # Build this demo site
pixi run serve      # Preview on localhost:8000

The SCSS entry point is src/styles/scss/main.scss. Each partial handles a specific concern — see the SCSS Architecture section on the main page.