Colors & Theming¶

The theme ships with a complete palette and a live color picker built into the header.

Default scheme and accent¶

Set the initial values in mkdocs.yml:

extra:
  color_scheme: dark    # dark | light
  accent_color: green   # green | cyan | purple | pink | orange | red

The user's choice is saved in localStorage and applied on every page load with no flash (FOUC prevention is handled by an inline script at the top of <head>).

Available accent colors¶

Key	Dark mode	Light mode
`green`	`#50fa7b`	`#15803d`
`cyan`	`#8be9fd`	`#0369a1`
`purple`	`#bd93f9`	`#6d28d9`
`pink`	`#ff79c6`	`#be185d`
`orange`	`#ffb86c`	`#c2410c`
`red`	`#ff5555`	`#b91c1c`

In light mode, the accent colors are automatically darkened for better contrast on light backgrounds.

Using the accent color in custom CSS¶

All colors are CSS custom properties. Use --accent in any extra CSS file and it will automatically update when the user changes the color:

/* docs/assets/extra.css */
.my-custom-badge {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent);
  color: var(--accent);
}

Load it in mkdocs.yml:

extra_css:
  - assets/extra.css

CSS custom properties reference¶

All design tokens are defined in themes/dap/assets/css/vars.css:

/* Colors — change with data-scheme / data-accent attributes */
--bg        /* Page background */
--bg2       /* Sidebar and header background */
--bg3       /* Code block background */
--surface   /* Hover surfaces, badges */
--border    /* All borders */
--fg        /* Primary text */
--fg2       /* Secondary text, labels */
--accent    /* Active links, highlights, buttons */
--on-accent /* Text color on accent backgrounds */

/* Layout */
--sidebar-w    /* Sidebar width (default: 280px) */
--header-h     /* Header bar height (default: 56px) */
--topnav-h     /* Top nav bar height (default: 40px) */
--content-max  /* Article max width (default: 820px) */
--toc-w        /* TOC width (default: 216px) */

Override layout variables

To widen the content area, add to your extra CSS:

:root { --content-max: 1000px; }

Extending the scheme¶

You can add your own scheme by modifying vars.css. Create a new data-scheme value:

/* theme/assets/css/vars.css */
[data-scheme="solarized"] {
  --bg:      #002b36;
  --bg2:     #073642;
  --fg:      #839496;
  /* ... */
}

Then update the scheme buttons in themes/dap/partials/header.html.