Skip to content

Add custom CSS

Inject custom CSS into your published site for fine-grained control over appearance. Custom CSS is available on every plan.

Before you begin

  • You should have at least one published web target so you can preview your changes.

  • Custom CSS is limited to 50 KB.

Add custom CSS

  1. Go to Settings > General and find the Custom CSS field in the Branding section.

  2. Enter your CSS rules.

  3. Publish a web target (or click Update if it is already live) to see the changes.

What custom CSS can do

Custom CSS is injected into the <head> of every page on your published site. You can:

  • Override default typography (font sizes, line heights, letter spacing)

  • Customize colors beyond the primary color

  • Adjust spacing, margins, and padding

  • Style specific elements (tables, code blocks, callouts)

  • Hide or rearrange elements

  • Add custom backgrounds or borders

Topicary's published site styles use specific CSS selectors. Your custom rules may need higher specificity to take effect. Use your browser's developer tools to inspect the existing selectors. Match or exceed their specificity rather than relying on `!important`.

Common CSS targets

The published site is built with utility classes, so it exposes a small set of stable class hooks plus standard HTML elements you can target:

Selector

What it targets

.prose

Main content area (typography, spacing)

.callout

Callout blocks (also .callout-info, .callout-warning, .callout-danger, .callout-success)

pre, code

Code blocks and inline code

aside

Left navigation sidebar

.prose h1, .prose h2, .prose h3

Heading elements within content

The sidebar, table of contents, and homepage cards do not have dedicated class names. Use your browser's developer tools to find the actual element and utility classes before writing rules against them.

Example: Increase body text size 

.prose {
  font-size: 18px;
  line-height: 1.75;
}

Example: Custom code block styling 

pre {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

Example: Custom heading color 

.prose h2,
.prose h3 {
  color: #1e3a5f;
}

Example: Adjust dark mode colors

The published site applies dark mode by adding the dark class to the <html> element, so scope dark-mode overrides with .dark:

.dark .prose {
  color: #e0e0e0;
}

.dark pre {
  background-color: #1a1a2e;
  border-color: #2a2a4a;
}

Use your browser's developer tools to inspect the published site and identify the CSS selectors you need. Toggle dark mode while the inspector is open to test both themes at once.

Tips

  • Custom CSS applies to all published web sites in the project. Target specific pages by using page-specific selectors if needed.

  • Test changes on both light and dark modes. The published site supports dark mode, and your CSS should work in both.

See also

Was this page helpful?