Custom Theme — Sam Foreman

A custom theme for WebTUI with light and dark variants

Theme

Theme example

1
2	<h1>Heading 1</h1>
3	<h2>Heading 2</h2>
4	<h3>Heading 3</h3>
5	<h4>Heading 4</h4>
6	<h5>Heading 5</h5>
7	<h6>Heading 6</h6>
8	<p>Body text with <a href="https://example.com">a link</a> and <code>inline code</code> styling.</p>
9

Badges

1
2	<span is-="badge" variant-="red">red</span>
3	<span is-="badge" variant-="orange">orange</span>
4	<span is-="badge" variant-="yellow">yellow</span>
5	<span is-="badge" variant-="green">green</span>
6	<span is-="badge" variant-="teal">teal</span>
7	<span is-="badge" variant-="aqua">aqua</span>
8	<span is-="badge" variant-="blue">blue</span>
9	<span is-="badge" variant-="purple">purple</span>
10	<span is-="badge" variant-="pink">pink</span>
11	<span is-="badge" variant-="sky">sky</span>
12	<span is-="badge" variant-="rosewater">rosewater</span>
13	<span is-="badge" variant-="flamingo">flamingo</span>
14	<span is-="badge" variant-="mauve">mauve</span>
15	<span is-="badge" variant-="maroon">maroon</span>
16	<span is-="badge" variant-="peach">peach</span>
17	<span is-="badge" variant-="sapphire">sapphire</span>
18	<span is-="badge" variant-="lavender">lavender</span>
19

Buttons

1
2	<button variant-="red">red</button>
3	<button variant-="orange">orange</button>
4	<button variant-="yellow">yellow</button>
5	<button variant-="green">green</button>
6	<button variant-="teal">teal</button>
7	<button variant-="aqua">aqua</button>
8	<button variant-="blue">blue</button>
9	<button variant-="purple">purple</button>
10	<button variant-="pink">pink</button>
11	<button variant-="sky">sky</button>
12	<button variant-="dim">dim</button>
13	<button variant-="bright">bright</button>
14

Callouts

1
2	<style>
3	.callout {
4	--callout-color: var(--blue, #118cc2);
5	--callout-bg: oklch(from var(--callout-color) calc(l * var(--oklch-scale, 1.12)) c h / 0.1);
6	--callout-summary-bg: oklch(from var(--callout-color) calc(l * var(--oklch-scale, 1.08)) c h / 0.025);
7	background-color: var(--callout-bg);
8	color: var(--callout-color);
9	margin-block: 0.5rem;
10	}
11	.callout > :not(summary) { margin-inline-start: -1ch; }
12	.callout summary {
13	background-color: var(--callout-summary-bg);
14	color: var(--callout-color);
15	font-weight: bold;
16	}
17	.callout > summary::before { content: '+'; }
18	.callout[open] > summary::before { content: 'x'; }
19	.callout p { margin: 0; color: var(--foreground1); }
20	.callout-note { --callout-color: var(--blue, #118cc2); }
21	.callout-tip { --callout-color: var(--foreground3, #838383); }
22	.callout-important { --callout-color: var(--purple, var(--accent, #9a76ce)); }
23	.callout-warning { --callout-color: var(--orange, #ee8f24); }
24	.callout-error { --callout-color: var(--red, #e05560); }
25	.callout-success { --callout-color: var(--green, #1da811); }
26	</style>
27	<details is-="accordion" class="callout callout-note" open>
28	<summary>Note</summary>
29	<p>This is a note callout with useful information.</p>
30	</details>
31	<details is-="accordion" class="callout callout-tip" open>
32	<summary>Tip</summary>
33	<p>This is a tip callout with helpful advice.</p>
34	</details>
35	<details is-="accordion" class="callout callout-important" open>
36	<summary>Important</summary>
37	<p>This is an important callout you should pay attention to.</p>
38	</details>
39	<details is-="accordion" class="callout callout-warning" open>
40	<summary>Warning</summary>
41	<p>This is a warning callout about potential issues.</p>
42	</details>
43	<details is-="accordion" class="callout callout-error" open>
44	<summary>Error</summary>
45	<p>This is an error callout indicating something went wrong.</p>
46	</details>
47	<details is-="accordion" class="callout callout-success" open>
48	<summary>Success</summary>
49	<p>This is a success callout confirming things worked.</p>
50	</details>
51

Installation

Install the theme with your preferred package manager

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

@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 data-webtui-theme="custom-dark"></html>

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

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

Variants

Supports light and dark variants.

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

Components

Components affected/modified by the theme

Typography
Badge
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)

<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

<!-- 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

<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

[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

[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

1
2	<style>
3	.color-grid { display: flex; flex-direction: column; gap: 0.5rem; font-family: monospace; font-size: 0.8rem; }
4	.color-row { display: flex; gap: 0.25rem; align-items: center; }
5	.color-row-label { width: 7rem; opacity: 0.6; flex-shrink: 0; }
6	.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); }
7	</style>
8	<div class="color-grid">
9	<div class="color-row">
10	<span class="color-row-label">foreground</span>
11	<span class="swatch" style="background:var(--foreground0)">0</span>
12	<span class="swatch" style="background:var(--foreground1)">1</span>
13	<span class="swatch" style="background:var(--foreground2)">2</span>
14	<span class="swatch" style="background:var(--foreground3)">3</span>
15	</div>
16	<div class="color-row">
17	<span class="color-row-label">background</span>
18	<span class="swatch" style="background:var(--background0)">0</span>
19	<span class="swatch" style="background:var(--background1)">1</span>
20	<span class="swatch" style="background:var(--background2)">2</span>
21	<span class="swatch" style="background:var(--background3)">3</span>
22	</div>
23	<div class="color-row">
24	<span class="color-row-label">accents</span>
25	<span class="swatch" style="background:var(--red)" title="red"></span>
26	<span class="swatch" style="background:var(--orange)" title="orange"></span>
27	<span class="swatch" style="background:var(--yellow)" title="yellow"></span>
28	<span class="swatch" style="background:var(--green)" title="green"></span>
29	<span class="swatch" style="background:var(--teal)" title="teal"></span>
30	<span class="swatch" style="background:var(--blue)" title="blue"></span>
31	<span class="swatch" style="background:var(--purple)" title="purple"></span>
32	<span class="swatch" style="background:var(--pink)" title="pink"></span>
33	<span class="swatch" style="background:var(--aqua)" title="aqua"></span>
34	<span class="swatch" style="background:var(--accent)" title="accent"></span>
35	</div>
36	<div class="color-row">
37	<span class="color-row-label">semantic</span>
38	<span class="swatch" style="background:var(--text)" title="text"></span>
39	<span class="swatch" style="background:var(--url)" title="url"></span>
40	<span class="swatch" style="background:var(--base)" title="base"></span>
41	<span class="swatch" style="background:var(--mantle)" title="mantle"></span>
42	<span class="swatch" style="background:var(--crust)" title="crust"></span>
43	<span class="swatch" style="background:var(--code-bg)" title="code-bg"></span>
44	<span class="swatch" style="background:var(--code-fg)" title="code-fg"></span>
45	</div>
46	</div>
47

← [b]ack

webtui/ Catppuccin Theme [n]ext → webtui/ Developing Plugins