# Theming your site

Customize your site's appearance to match your brand. All theme settings are available in the site settings panel under **Theme & Branding**.

![Theme Capable Sites](https://help.gocapable.com/images/6ae6b20e-6e3d-4387-af0b-ab4cb2a74a37.webp)

### [#](#logo-favicon-and-cover-image)Logo, favicon, and cover image

| **Asset**               | **Purpose**                                                             | **Constraints** |
| ----------------------- | ----------------------------------------------------------------------- | --------------- |
| **Logo**                | Displayed in the site header next to the site title                     | Max 100 KB      |
| **Favicon**             | Browser tab icon                                                        | Max 100 KB      |
| **Default cover image** | Used as the og:image for social sharing when no page-level image is set | Max 500 KB      |

Assets are uploaded as attachments to the CAPABLEASSETSTORE space in your Confluence instance.

![Theme Capable Sites](https://help.gocapable.com/images/aee58c39-dfbd-40d2-b846-9942830e34ce.webp)

### [#](#colors)Colors

You can customize the following color properties:

| Property              | Description                                           | Default |
| --------------------- | ----------------------------------------------------- | ------- |
| **Background color**  | Main brand color used for buttons, links, and accents | #2563eb |
| **Text color**        | Lighter variant of the primary color                  | —       |
| **Header background** | Background color of the site header                   | —       |
| **Header text color** | Text color in the site header                         | —       |

![Set up colors for Capable Sites](https://help.gocapable.com/images/8f7a8af7-d0ba-490f-8fef-9e2451b779fe.webp)

### [#](#font-presets)Font presets

Choose from the following built-in font presets:

* **System** (system default sans-serif)
* **Inter**
* **Roboto**
* **Open Sans**
* **Nunito**
* **Lato**

### [#](#dark-mode)Dark mode

Sites include a built-in **theme toggle** button in the header that lets visitors switch between light and dark mode. The user's preference is persisted in their browser's local storage. If no preference is set, the site follows the system preference (`prefers-color-scheme`).