> ## 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.

# 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 a status page, navigate to the "Manage Theme" section under "Settings".

You may upload a custom image by drag 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/roDiT_3ouFZbM8GY/v3.x/images/manage-theme-light.png?fit=max&auto=format&n=roDiT_3ouFZbM8GY&q=85&s=7e446cacd48465b3a815e2ebc42c1226" 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/roDiT_3ouFZbM8GY/v3.x/images/manage-theme-dark.png?fit=max&auto=format&n=roDiT_3ouFZbM8GY&q=85&s=c9080f2ba39a0219df0d31b2b4578e6b" 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, images are stored 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
```

From here you may upload a custom banner image to be displayed on your status page. To use the default banner image, click the "X" button.

### Common issues

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

This error is often seen when running Cachet behind a Reverse Proxy. To resolve this, you'll need to add your trusted
proxy IPs 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
are used to 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, your chosen accent color will be paired with a base color which is used for the background of the status page.
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.
