Add Custom CSS

Override default styles or add your own design touches to the rendered site.

Great Docs ships a default SCSS theme file (great-docs.scss) that works well out of the box. You can extend or override it with your own styles.

Where to Put Custom CSS

Create a CSS file in your project and reference it in the site settings:

great-docs.yml

site:
  css:
    - my-custom-styles.css # Add your overrides

Place my-custom-styles.css in the same directory as great-docs.yml (your project root). It will be copied to the build directory during great-docs build.

Common Customizations

Change the Accent Color

/* my-custom-styles.css */
:root {
  --bs-primary: #6a1b9a;       /* Purple accent */
  --bs-link-color: #6a1b9a;
}

Widen the Content Area

.container-fluid {
  max-width: 1400px;
}

Style API Signatures

/* Make function signatures stand out */
.doc-signature {
  background-color: #f8f9fa;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--bs-primary);
  font-size: 0.95rem;
}

Hide the Table of Contents on Specific Pages

Add to a page’s frontmatter instead of CSS:

---
title: "My Page"
toc: false
---

Dark Mode Considerations

If dark mode is enabled, test your custom CSS in both light and dark themes. Use the [data-bs-theme="dark"] selector for dark-mode-specific overrides:

[data-bs-theme="dark"] .doc-signature {
  background-color: #1e1e1e;
  border-left-color: #bb86fc;
}