# Custom CSS

Appearance covers colours, logo and fonts, and for most sites that is enough. When a brand guide asks for more, such as a particular header, rounder panels or one space styled differently, Custom CSS is where it goes.

Your CSS is added after the site's own styles, so a rule of yours wins over a site rule of the same specificity.

---

## Where it is

Open your site, go to Settings and choose Custom CSS. Write CSS in the Stylesheet pane on the left; the preview on the right updates as you type. Use Light and Dark above the preview to check both modes. Select Save changes, and the app confirms with "Custom CSS saved. Publishes on next deploy."

New to it? In an empty editor, Start from an example fills in the light and dark mode pattern below.

ℹ️

**Custom CSS is for Confluence admins.** Collaborators keep Appearance, where they can change colours, logo and fonts.

---

## Light and dark mode

The look of a site comes from a small set of colour variables. Set them once for each mode:

```
/* Light mode */
:root,
:root.light {
  --color-header-bg: #0b3d91;
  --color-header-text: #ffffff;
  --color-primary: #0b3d91;
}

/* Dark mode */
:root.dark {
  --color-header-bg: #0f172a;
  --color-header-text: #e2e8f0;
  --color-primary: #7aa7ff;
}
```

⚠️

**Write the light selector exactly as :root, :root.light.** A plain :root works until a visitor picks a mode with the theme button, then stops working.

A few colours have no dark value of their own, so whatever you set for light mode also shows in dark mode: the sidebar background, link colour, and header background and text. Set those in both blocks.

---

## Class names you can rely on

The Reference panel in the editor lists the class names and variables that stay the same when the site is updated, such as .site-header, .site-sidebar, .site-panel--info and .c-macro--<name>. The full list is in Custom CSS class reference.

---

## What is removed when you save

Your site is public, so some CSS is taken out on save. The editor lists what it will remove, and why, before you save.

* @import, @charset and @namespace, and at-rules other than @media, @supports, @container, @layer, @keyframes, @font-face, @page, @property, @scope and @starting-style.
* Script in CSS, such as javascript: and expression().
* Images and fonts from other websites. url() works with a path on your site or an embedded data:image.
* HTML, such as a <style> tag.
* Rules that name the Report content link, the Cookie settings link or the cookie consent dialog.
* Anything that is not valid CSS. The stylesheet can be up to 50,000 characters.

Whatever your CSS does, the footer with its Report content and Cookie settings links, the cookie consent dialog, and the page around them stay on screen. CSS that would hide, move or shrink them is ignored.

---

## A few things worth knowing

* The preview shows sample content. Rules for macros, search results or the home page show once you publish.
* Some macros set colours on the element itself. To override those, add !important.
* Custom CSS also styles the Ask AI chat, wherever it is embedded. Start a rule with body:not(.cap-ask-chat) to keep it off the chat.
* To undo everything, clear the editor and save.

---

## Related

### [Custom CSS class reference](https://help.gocapable.com/sites/custom-css-class-reference.html)

Every stable class and variable.

### [Style a published Confluence site with custom CSS](https://help.gocapable.com/sites/style-a-published-confluence-site-with-custom-css.html)

Worked examples.

### [Theme and design](https://help.gocapable.com/sites/theme-and-design.html)

Palettes and Appearance first.

---

_Your brand guide, minus the support ticket._