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 for privacy-focused analytics. To add Fathom Analytics to your status page, you can use the following script:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>

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.

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 system, you can use CSS variables to customize the colors of your status page. The following CSS variables are available:

VariableDescription
--accentThe main accent color used as the background for primary buttons.
--accent-contentAn often darker primary hue used for text content.
--accent-foregroundThe color of text content on top of an accented background.
--accent-backgroundThe 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:

Custom CSS
/* 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;
    }
}

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.

CachetTheme