DocAnvil

CSS Variables

DocAnvil's default theme is built entirely on CSS custom properties (variables). Override any of them to customize the look of your site without writing complex CSS.

How to Override

Set variables in the [theme.variables] section. Omit the -- prefix:

[theme.variables]
color-primary = "#059669"
font-body = "Georgia, serif"
content-max-width = "960px"

Override variables in a :root block in your custom CSS file:

:root {
  --color-primary: #059669;
  --font-body: Georgia, serif;
  --content-max-width: 960px;
}

Colors

Variable Default Description
--color-primary #6366f1 Primary accent color (links, active states, borders)
--color-primary-light #818cf8 Lighter primary variant (h1 border, blockquote border)
--color-bg #ffffff Page background
--color-bg-secondary #f8fafc Secondary background (sidebar, table headers, blockquotes)
--color-text #1e293b Main text color
--color-text-muted #64748b Muted text (headings h4, separators, footer)
--color-border #e2e8f0 Border color used throughout
--color-link #6366f1 Link text color
--color-link-hover #4f46e5 Link hover color
--color-code-bg #f1f5f9 Background for inline code and code blocks
--color-note-bg #eef2ff Note admonition background
--color-note-border #818cf8 Note admonition left border
--color-warning-bg #fff7ed Warning admonition background
--color-warning-border #f97316 Warning admonition left border

Typography

Variable Default Description
--font-body system-ui, -apple-system, "Segoe UI", Roboto, sans-serif Body font stack
--font-mono "SF Mono", Consolas, "Liberation Mono", Menlo, monospace Monospace font for code
--font-size-base 16px Base font size
--font-size-sm 0.875rem Small font size (table headers, footnotes)
--line-height-tight 1.3 Tight line height for headings
--heading-letter-spacing -0.02em Letter spacing for headings

Layout

Variable Default Description
--sidebar-width 260px Width of the navigation sidebar
--content-max-width 800px Maximum width of the content area
Variable Default Description
--color-sidebar-hover #eef2ff Background on sidebar link hover
--color-sidebar-active-bg #eef2ff Background of the active sidebar link
--color-sidebar-active-text #4f46e5 Text color of the active sidebar link
Variable Default Description
--nav-filter-bg #ffffff Background of the filter input
--nav-filter-border var(--color-border) Border color of the filter input
--nav-group-toggle-hover rgba(99, 102, 241, 0.06) Background on group toggle hover

Shadows

Variable Default Description
--shadow-sm 0 1px 2px rgba(0, 0, 0, 0.05) Small shadow (code blocks, admonitions)
--shadow-md 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) Medium shadow (popovers, images)

Border Radius

Variable Default Description
--radius-sm 4px Small radius (inline code, nav items, filter input)
--radius-md 6px Medium radius (code blocks, tables, popovers)
--radius-lg 8px Large radius (admonitions)

Transitions

Variable Default Description
--transition-fast 150ms ease Fast transitions (hover states)
--transition-normal 200ms ease Normal transitions (chevron rotation)

Focus

Variable Default Description
--color-focus-ring rgba(99, 102, 241, 0.4) Focus ring color for keyboard navigation

Note

All color values use hex or rgba notation. Font stacks use standard CSS syntax with fallbacks. Sizes accept any CSS length unit (px, rem, em).

Built with DocAnvil