Styling

Docula gives you full control over the look and feel of your site through CSS variables and a custom stylesheet. The built-in templates define a set of CSS variables that you can override in your site/variables.css file.

Table of Contents

• Custom Stylesheet
• CSS Variables (Modern Template)
  • Colors
  • Example Override
• CSS Variables (Classic Template)
• Blockquote Alerts
• Copy Code Button
• Image Lightbox
• Logo and Favicon

Custom Stylesheet

Each template ships with a default variables.css that defines its CSS variables. To customize your site's appearance, create a variables.css file in your site directory. This file replaces the template's defaults during the build, so any values you set here take priority.

The quickest way to get started is to run:

npx docula download variables

This copies the current template's variables.css into your site directory with all default values in place, ready for you to edit. If the file already exists, pass --overwrite to replace it.

site/
  variables.css   <-- your overrides go here
  logo.png
  favicon.ico
  docula.config.ts

CSS Variables (Modern Template)

The Modern template uses the following CSS variables. Override any of these in variables.css to customize your site.

Colors

Example Override

:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --link: #58a6ff;
  --surface: #161b22;
  --border: rgba(240, 246, 252, 0.1);
}

[data-theme="light"] {
  --bg: #f6f8fa;
  --fg: #24292f;
  --link: #0550ae;
  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
}

CSS Variables (Classic Template)

The Classic template uses a different set of variables focused on named semantic colors.

Blockquote Alerts

Docula supports GitHub-style blockquote alerts via Writr's markdown plugins. Use the following syntax in any markdown file:

> [!NOTE]
> Useful information that users should know.

> [!WARNING]
> Important information that could cause issues.

> [!CAUTION]
> Critical information about risks or destructive actions.

To style these alerts, add CSS rules targeting the .markdown-alert classes in your variables.css:

.markdown-alert {
  border-left: 4px solid var(--border);
  border-radius: 8px;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface);
}

.markdown-alert-note {
  border-left-color: #4c8ef7;
}

.markdown-alert-warning {
  border-left-color: #f2b90c;
}

.markdown-alert-caution {
  border-left-color: #e5534b;
}

Copy Code Button

The Modern template adds a copy-to-clipboard button to every code block. The button appears in the top-right corner on hover and shows a checkmark after copying. Because variables.css loads before the template stylesheet, these class overrides require a partial template override of css/styles.css to take effect:

.copy-code-btn {
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  opacity: 0;
}

pre:hover .copy-code-btn {
  opacity: 1;
}

.copy-code-btn:hover {
  color: var(--fg);
}

Image Lightbox

Clicking an image in docs or changelog opens a fullscreen lightbox overlay. Like the copy code button, these overrides require a partial template override of css/styles.css:

.lightbox-overlay {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox-overlay img {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  color: rgba(255, 255, 255, 0.8);
}

.lightbox-close:hover {
  color: #fff;
}

Logo and Favicon

Replace the default files in your site directory to use your own branding:

• site/logo.png (or logo.svg) -- displayed in the header and home page hero
• site/favicon.ico -- browser tab icon