> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cachethq.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization

> Learn how to customize Cachet.

Cachet provides the ability to customize your status page with custom HTML and CSS. To customize your status page,
navigate to the "Manage Customization" section which is found under "Settings" in your Cachet dashboard.

## Custom Header HTML

From here, you can add custom HTML including scripts and styles into the header of your status page. This is an ideal
section to add custom analytics scripts.

HTML or scripts placed in this section will be added to the `<head>` of your status page.

### Fathom Analytics

We recommend [Fathom Analytics](https://usefathom.com/james) for privacy-focused analytics. To add Fathom Analytics to
your status page, you can use the following script:

```html theme={null}
<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>
```

<Note>
  The Fathom link above is a referral link. If you sign up using the link, you'll receive \$10 credit.
  This helps support the Cachet project.
</Note>

## Custom Footer HTML

Add custom HTML to the footer of your status page to personalize scripts or styles.

HTML or scripts placed in this section will be added to the end of the `<body>` of your status page.

## Custom CSS

Add custom CSS to your status page to personalize the design. You do not need to include `<style>` tags as the CSS will be automatically wrapped in them.

CSS placed in this section is appended to Cachet's custom styles.

### CSS Variables

As part of Cachet's [Accent Colors](/v3.x/configuration/theme#accents) system, you can use
[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to customize the colors
of your status page. The following CSS variables are available:

| Variable              | Description                                                       |
| --------------------- | ----------------------------------------------------------------- |
| `--accent`            | The main accent color used as the background for primary buttons. |
| `--accent-content`    | An often darker primary hue used for text content.                |
| `--accent-foreground` | The color of text content on top of an accented background.       |
| `--accent-background` | The background color of the status page.                          |

Cachet will automatically generate a light and dark version of the accent color. When overriding colors, ensure you
override both versions to maintain a consistent design:

```css Custom CSS theme={null}
/* Light mode */
:root {
    --accent: 4, 193, 71;
    --accent-content: 4, 193, 71;
    --accent-foreground: 255, 255, 255;
    --accent-background: 250, 250, 250;
}

/* Dark mode */
@media(prefers-color-scheme: dark) {
    :root {
        --accent: 4, 193, 71;
        --accent-content: 79, 212, 126;
        --accent-foreground: 1, 58, 21;
        --accent-background: 24, 24, 27;
    }
}
```

<Warning>
  Cachet's status page will do its best to adapt its design to configured colors. However, some colors may not be
  visible or may clash with the design. Please ensure you test your colors in both light and dark mode.
</Warning>
