---
layout: '@/layouts/Doc.astro'
title: Custom Theme
---

import Example from '@/components/Example.astro'
import typographyStyle from '@webtui/css/components/typography.css?raw'
import badgeStyle from '@webtui/css/components/badge.css?raw'
import buttonStyle from '@webtui/css/components/button.css?raw'
import accordionStyle from '@webtui/css/components/accordion.css?raw'
import customStyle from '@webtui/theme-custom?raw'
import catppuccinStyle from '@webtui/theme-catppuccin?raw'

A custom theme for WebTUI with light and dark variants

## Theme

Theme example

<Example
    stylesheets={[typographyStyle, customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Body text with <a href="https://example.com">a link</a> and <code>inline code</code> styling.</p>
`}
/>

## Badges

<Example
    stylesheets={[badgeStyle, customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<span is-="badge" variant-="red">red</span>
<span is-="badge" variant-="orange">orange</span>
<span is-="badge" variant-="yellow">yellow</span>
<span is-="badge" variant-="green">green</span>
<span is-="badge" variant-="teal">teal</span>
<span is-="badge" variant-="aqua">aqua</span>
<span is-="badge" variant-="blue">blue</span>
<span is-="badge" variant-="purple">purple</span>
<span is-="badge" variant-="pink">pink</span>
<span is-="badge" variant-="sky">sky</span>
<span is-="badge" variant-="rosewater">rosewater</span>
<span is-="badge" variant-="flamingo">flamingo</span>
<span is-="badge" variant-="mauve">mauve</span>
<span is-="badge" variant-="maroon">maroon</span>
<span is-="badge" variant-="peach">peach</span>
<span is-="badge" variant-="sapphire">sapphire</span>
<span is-="badge" variant-="lavender">lavender</span>
`}
/>

## Buttons

<Example
    stylesheets={[buttonStyle, customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<button variant-="red">red</button>
<button variant-="orange">orange</button>
<button variant-="yellow">yellow</button>
<button variant-="green">green</button>
<button variant-="teal">teal</button>
<button variant-="aqua">aqua</button>
<button variant-="blue">blue</button>
<button variant-="purple">purple</button>
<button variant-="pink">pink</button>
<button variant-="sky">sky</button>
<button variant-="dim">dim</button>
<button variant-="bright">bright</button>
`}
/>

## Callouts

<Example
    stylesheets={[accordionStyle, customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<style>
.callout {
  --callout-color: var(--blue, #118cc2);
  --callout-bg: oklch(from var(--callout-color) calc(l * var(--oklch-scale, 1.12)) c h / 0.1);
  background-color: var(--callout-bg);
  color: var(--callout-color);
  /* Just a bold 2px accent bar on the left, no full perimeter border.
     Hover drops a hard offset shadow; the transition animates it. */
  border-left: 2px solid var(--callout-color);
  padding: 0.15lh 1.25ch;
  margin-block: 1lh;
  transition: box-shadow 120ms ease-out;
}
.callout:hover {
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.55);
}
.callout summary {
  display: flex;
  align-items: baseline;
  color: var(--callout-color);
  font-weight: bold;
  line-height: 1lh;
}
/* +/x toggle pushed to the far right of the summary row */
.callout > summary::before {
  content: '+';
  order: 1;
  margin-inline-start: auto;
  padding-inline-start: 1ch;
}
.callout[open] > summary::before { content: 'x'; }
.callout[open]::details-content { padding-left: 0; }
.callout p { margin: 0; color: var(--foreground1); }
.callout-note { --callout-color: var(--blue, #118cc2); }
.callout-tip { --callout-color: var(--foreground2, #838383); }
.callout-important { --callout-color: var(--purple, var(--accent, #9a76ce)); }
.callout-warning { --callout-color: var(--orange, #ee8f24); }
.callout-error { --callout-color: var(--red, #e05560); }
.callout-success { --callout-color: var(--green, #1da811); }
</style>
<details is-="accordion" class="callout callout-note" open>
  <summary>Note</summary>
  <p>This is a note callout with useful information.</p>
</details>
<details is-="accordion" class="callout callout-tip" open>
  <summary>Tip</summary>
  <p>This is a tip callout with helpful advice.</p>
</details>
<details is-="accordion" class="callout callout-important" open>
  <summary>Important</summary>
  <p>This is an important callout you should pay attention to.</p>
</details>
<details is-="accordion" class="callout callout-warning" open>
  <summary>Warning</summary>
  <p>This is a warning callout about potential issues.</p>
</details>
<details is-="accordion" class="callout callout-error" open>
  <summary>Error</summary>
  <p>This is an error callout indicating something went wrong.</p>
</details>
<details is-="accordion" class="callout callout-success" open>
  <summary>Success</summary>
  <p>This is a success callout confirming things worked.</p>
</details>
`}
/>

### Inline callouts

Authored as `> [!TYPE|inline] <content>`, inline callouts collapse to a single
line: a per-type Nerd Font icon (in the callout's accent color) followed by the
content, with no spelled-out type label and no expand/collapse glyph. Handy for
compact label / link chips.

<Example
    stylesheets={[accordionStyle, customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<style>
@font-face {
  font-family: 'Symbols Nerd Font';
  src: local('SymbolsNerdFont-Regular'), url('/fonts/nerd/SymbolsNerdFont-Regular.woff2') format('woff2');
  font-display: swap;
}
.callout {
  --callout-color: var(--blue, #118cc2);
  --callout-bg: oklch(from var(--callout-color) calc(l * var(--oklch-scale, 1.12)) c h / 0.1);
  background-color: var(--callout-bg);
  color: var(--callout-color);
  border-left: 2px solid var(--callout-color);
  padding-left: 0.5ch;
}
.callout-note { --callout-color: var(--blue, #118cc2); }
.callout-tip { --callout-color: var(--foreground2, #838383); }
.callout-important { --callout-color: var(--purple, var(--accent, #9a76ce)); }
.callout-warning { --callout-color: var(--orange, #ee8f24); }
.callout-error { --callout-color: var(--red, #e05560); }
.callout-success { --callout-color: var(--green, #1da811); }
.callout-inline {
  display: flex; align-items: baseline; gap: 0;
  flex-wrap: nowrap; white-space: nowrap; margin-block: 0.25lh;
}
.callout-inline > summary { display: none; }
.callout-inline > :not(summary) { display: inline; margin: 0; color: var(--callout-color); }
.callout-inline::before {
  content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0;
  margin-inline-end: -0.3em;
  transform: translateY(0.12em); background-color: var(--callout-color);
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z'/%3E%3C/svg%3E");
}
.callout-inline[data-callout='tip']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z'/%3E%3C/svg%3E");
}
.callout-inline[data-callout='important']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z'/%3E%3C/svg%3E");
}
.callout-inline[data-callout='warning']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16'/%3E%3C/svg%3E");
}
.callout-inline[data-callout='error']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7'/%3E%3C/svg%3E");
}
.callout-inline[data-callout='success']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z'/%3E%3C/svg%3E");
}
</style>
<details is-="accordion" class="callout callout-note callout-inline" data-callout="note" open>
  <summary></summary>
  <p>A note, on one line.</p>
</details>
<details is-="accordion" class="callout callout-tip callout-inline" data-callout="tip" open>
  <summary></summary>
  <p>A handy tip.</p>
</details>
<details is-="accordion" class="callout callout-important callout-inline" data-callout="important" open>
  <summary></summary>
  <p><a href="#">a repo or link</a></p>
</details>
<details is-="accordion" class="callout callout-warning callout-inline" data-callout="warning" open>
  <summary></summary>
  <p>Heads up about something.</p>
</details>
<details is-="accordion" class="callout callout-error callout-inline" data-callout="error" open>
  <summary></summary>
  <p>Something went wrong.</p>
</details>
<details is-="accordion" class="callout callout-success callout-inline" data-callout="success" open>
  <summary></summary>
  <p>It worked.</p>
</details>
`}
/>

## Installation

Install the theme with your preferred package manager

```bash
bun i @webtui/theme-custom
npm i @webtui/theme-custom
yarn add @webtui/theme-custom
pnpm i @webtui/theme-custom
```

Ensure you import the theme **after** all the other stylesheets from `@webtui/css` or the styles will not be applied

```css
@layer base, utils, components;

@import '@webtui/css/base.css';
@import '@webtui/css/components/typography.css';
/* ... */

@import '@webtui/theme-custom';
```

Set the `data-webtui-theme` attribute to the `<html>` tag

```html
<html data-webtui-theme="custom-dark"></html>
```

To only apply the theme to a specific element, use the same attribute

```html
<html data-webtui-theme="catppuccin">
    <body>
        <div data-webtui-theme="custom-dark">
            <!-- ... -->
        </div>
    </body>
</html>
```

## Variants

Supports light and dark variants.

```html
<html data-webtui-theme="custom-light"></html>
<html data-webtui-theme="custom-dark"></html>
```

## Components

Components affected/modified by the theme

- [Typography](#typography)
- [Badge](#badge)
- [Button](#button)

## Text

- Colors headings from `h1` to `h6`
- inline `<a>` tags are underlined and colored to be `var(--url)`
- inline `<code>` tags are colored to be `var(--red)`

```html
<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>

<p><a href="https://example.com">Link</a> <code>Inline Code</code></p>
```

## Badge

Adds variants to badges matching all custom accent colors

```html
<!-- Shared across both variants -->
<span is-="badge" variant-="red">red</span>
<span is-="badge" variant-="green">green</span>
<span is-="badge" variant-="yellow">yellow</span>
<span is-="badge" variant-="blue">blue</span>
<span is-="badge" variant-="purple">purple</span>
<span is-="badge" variant-="aqua">aqua</span>
<span is-="badge" variant-="orange">orange</span>
<span is-="badge" variant-="pink">pink</span>
<span is-="badge" variant-="teal">teal</span>

<!-- Additional colors (custom-dark) -->
<span is-="badge" variant-="rosewater">rosewater</span>
<span is-="badge" variant-="flamingo">flamingo</span>
<span is-="badge" variant-="mauve">mauve</span>
<span is-="badge" variant-="maroon">maroon</span>
<span is-="badge" variant-="peach">peach</span>
<span is-="badge" variant-="sky">sky</span>
<span is-="badge" variant-="sapphire">sapphire</span>
<span is-="badge" variant-="lavender">lavender</span>
```

## Button

Adds variants to buttons matching all custom accent colors, plus `dim` and `bright`

```html
<button variant-="red">red</button>
<button variant-="green">green</button>
<button variant-="blue">blue</button>
<!-- ... all color variants ... -->
<button variant-="dim">dim</button>
<button variant-="bright">bright</button>
```

## CSS Variables

### Custom Light

```css
[data-webtui-theme='custom-light'] {
    --oklch-scale: 0.85;
    --text: oklch(from #333333 l c h);
    --base: oklch(from #eff1f5 l c h);
    --mantle: oklch(from #e6e9ef l c h);
    --crust: oklch(from #e4e4e4 l c h);

    /* Foreground / Background */
    --foreground0: oklch(from #000000 l c h);
    --foreground1: oklch(from #333333 l c h);
    --foreground2: oklch(from #888888 l c h);
    --foreground3: oklch(from #aaaaaa l c h);
    --background0: oklch(from #ffffff l c h);
    --background1: oklch(from #f8f8f8 l c h);
    --background2: oklch(from #cccccc l c h);
    --background3: oklch(from #999999 l c h);

    /* Accent Colors */
    --red: oklch(from #ff8a80 l c h);
    --green: oklch(from #05a551 l c h);
    --yellow: oklch(from #ff794e l c h);
    --blue: oklch(from #2196f3 l c h);
    --purple: oklch(from #8260cc l c h);
    --aqua: oklch(from #00b8d4 l c h);
    --orange: oklch(from #ff5722 l c h);
    --pink: oklch(from #ff3399 l c h);
    --teal: oklch(from #00838f l c h);
}
```

### Custom Dark

```css
[data-webtui-theme='custom-dark'] {
    --oklch-scale: 1.15;
    --text: #eeeeee;
    --base: oklch(from #1c1c1c l c h);
    --mantle: oklch(from #111111 l c h);
    --crust: oklch(from #101010 l c h);

    /* Foreground / Background */
    --foreground0: oklch(from #eeeeee l c h);
    --foreground1: oklch(from #cccccc l c h);
    --foreground2: oklch(from #888888 l c h);
    --foreground3: #999999;
    --background0: oklch(from #1c1c1c l c h);
    --background1: oklch(from #242424 l c h);
    --background2: oklch(from #333333 l c h);
    --background3: oklch(from #777777 l c h);

    /* Catppuccin Macchiato Accent Colors */
    --rosewater: #f4dbd6;
    --flamingo: #f0c6c6;
    --pink: #f5bde6;
    --mauve: #c6a0f6;
    --red: #ed8796;
    --maroon: #ee99a0;
    --peach: #f5a97f;
    --yellow: #eed49f;
    --green: #a6da95;
    --teal: #8bd5ca;
    --sky: #91d7e3;
    --sapphire: #7dc4e4;
    --blue: #8aadf4;
    --lavender: #b7bdf8;

    /* Additional Colors */
    --orange: #f2ab47;
    --aqua: #84d6eb;
    --purple: #ef7fff;
}
```

## Theme Colors

<Example
    stylesheets={[customStyle, catppuccinStyle]}
    themes={{
        'custom-light': 'Custom Light',
        'custom-dark': 'Custom Dark',
        'catppuccin-latte': 'Catppuccin Latte',
        'catppuccin': 'Catppuccin Mocha',
    }}
    data-initial-theme="custom-dark"
    html={`
<style>
.color-grid { display: flex; flex-direction: column; gap: 0.5rem; font-family: monospace; font-size: 0.8rem; }
.color-row { display: flex; gap: 0.25rem; align-items: center; }
.color-row-label { width: 7rem; opacity: 0.6; flex-shrink: 0; }
.swatch { width: 2.5rem; height: 1.5rem; border-radius: 3px; border: 1px solid var(--foreground2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--foreground2); }
</style>
<div class="color-grid">
  <div class="color-row">
    <span class="color-row-label">foreground</span>
    <span class="swatch" style="background:var(--foreground0)">0</span>
    <span class="swatch" style="background:var(--foreground1)">1</span>
    <span class="swatch" style="background:var(--foreground2)">2</span>
    <span class="swatch" style="background:var(--foreground3)">3</span>
  </div>
  <div class="color-row">
    <span class="color-row-label">background</span>
    <span class="swatch" style="background:var(--background0)">0</span>
    <span class="swatch" style="background:var(--background1)">1</span>
    <span class="swatch" style="background:var(--background2)">2</span>
    <span class="swatch" style="background:var(--background3)">3</span>
  </div>
  <div class="color-row">
    <span class="color-row-label">accents</span>
    <span class="swatch" style="background:var(--red)" title="red"></span>
    <span class="swatch" style="background:var(--orange)" title="orange"></span>
    <span class="swatch" style="background:var(--yellow)" title="yellow"></span>
    <span class="swatch" style="background:var(--green)" title="green"></span>
    <span class="swatch" style="background:var(--teal)" title="teal"></span>
    <span class="swatch" style="background:var(--blue)" title="blue"></span>
    <span class="swatch" style="background:var(--purple)" title="purple"></span>
    <span class="swatch" style="background:var(--pink)" title="pink"></span>
    <span class="swatch" style="background:var(--aqua)" title="aqua"></span>
    <span class="swatch" style="background:var(--accent)" title="accent"></span>
  </div>
  <div class="color-row">
    <span class="color-row-label">semantic</span>
    <span class="swatch" style="background:var(--text)" title="text"></span>
    <span class="swatch" style="background:var(--url)" title="url"></span>
    <span class="swatch" style="background:var(--base)" title="base"></span>
    <span class="swatch" style="background:var(--mantle)" title="mantle"></span>
    <span class="swatch" style="background:var(--crust)" title="crust"></span>
    <span class="swatch" style="background:var(--code-bg)" title="code-bg"></span>
    <span class="swatch" style="background:var(--code-fg)" title="code-fg"></span>
  </div>
</div>
`}
/>