> ## Documentation Index
> Fetch the complete documentation index at: https://cachet-claude-scheduled-incidents-maintenance-0mn6xo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme

> Learn how to configure and theme Cachet.

Cachet provides the ability to configure and theme the status page to match your brand. To customize your status page,
navigate to the "Manage Theme" section found under "Settings" in your Cachet dashboard.

## Banner image

To override the default banner image shown at the top of your status page, upload a custom image by dragging and dropping the file into the "Banner Image" field. Alternatively, you can click to select a file.

<Frame caption="Cachet's 'Manage Theme' Dashboard">
  <img className="block dark:hidden" src="https://mintcdn.com/cachet-claude-scheduled-incidents-maintenance-0mn6xo/jkDJyAKWDSFAp3OU/v3.x/images/manage-theme-light.png?fit=max&auto=format&n=jkDJyAKWDSFAp3OU&q=85&s=ac02d3fb1432332ef05703f25d5e2e2a" alt="Manage Theme" width="2478" height="1228" data-path="v3.x/images/manage-theme-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/cachet-claude-scheduled-incidents-maintenance-0mn6xo/jkDJyAKWDSFAp3OU/v3.x/images/manage-theme-dark.png?fit=max&auto=format&n=jkDJyAKWDSFAp3OU&q=85&s=efe9a4cb6c3ed43133b2dec98ff224ea" alt="Manage Theme" width="2478" height="1226" data-path="v3.x/images/manage-theme-dark.png" />
</Frame>

<Tip>
  We recommend using an image with a 16:9 aspect ratio for the best results.
</Tip>

Once you've uploaded your image, click the "Save" button to apply the changes.
By default, Cachet stores images in `/storage/app/public`. To make the image accessible to the public, you'll need to run the following command:

```bash theme={null}
php artisan storage:link
```

To use the default banner image, click the "X" button.

### Common issues

#### Uploading images returns a `401 Unauthorized`

You often see this error when running Cachet behind a reverse proxy. To resolve this, you'll need to add your trusted
proxy IPs to Cachet's `.env` file.

```dotenv theme={null}
# Replace with your reverse proxy IPs
CACHET_TRUSTED_PROXIES="192.168.1.1,192.168.1.2"
```

## Accents

Cachet provides a simple way to customize the colors of your status page through the use of accents. Accent colors
highlight important elements on the page, such as buttons and links.

By default, Cachet provides common Tailwind colors as accent options. You may choose from the following options:

* <div className="inline-block rounded-full size-4 bg-primary" /> Cachet
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(239, 68, 68)"}} /> Red
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(249, 115, 22)"}} /> Orange
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(245, 158, 11)"}} /> Amber
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(234, 179, 8)"}} /> Yellow
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(132, 204, 22)"}} /> Lime
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(34, 197, 94)"}} /> Green
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(16, 185, 129)"}} /> Emerald
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(20, 184, 166)"}} /> Teal
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(6, 182, 212)"}} /> Cyan
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(14, 165, 233)"}} /> Sky
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(59, 130, 246)"}} /> Blue
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(99, 102, 241)"}} /> Indigo
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(139, 92, 246)"}} /> Violet
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(168, 85, 247)"}} /> Purple
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(217, 70, 239)"}} /> Fuchsia
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(236, 72, 153)"}} /> Pink
* <div className="inline-block rounded-full size-4" style={{backgroundColor: "rgb(244, 63, 94)"}} /> Rose

By default, Cachet pairs your chosen accent color with a base color used for the status page background.
You can disable "Accent Pairing" and select your own background color from a list of Tailwind grays.

### Custom colors

To customize Cachet to your liking, we recommend using the [Customization](/v3.x/configuration/customization) panel and
configuring your own colors with CSS.