Catppuccin Theme
A port of the Catppuccin color palette to WebTUI
| 1 | |
| 2 | <h1>Lots</h1> |
| 3 | <h2>Of</h2> |
| 4 | <h3>Colored</h3> |
| 5 | <h4>Headings</h4> |
| 6 | <h5>And</h5> |
| 7 | <h6>Stuff</h6> |
| 8 | <p>And links are <a href="https://example.com">blue</a> now and <code>code</code> is red</p> |
| 9 | <span is-="badge" variant-="red">Many</span> |
| 10 | <span is-="badge" variant-="teal">Colorful</span> |
| 11 | <span is-="badge" variant-="mauve">Badge</span> |
| 12 | <span is-="badge" variant-="flamingo">Variants</span><br/> |
| 13 | <span is-="badge" variant-="peach">And</span><br/> |
| 14 | <button variant-="maroon">Sick</button> |
| 15 | <button variant-="rosewater">Button</button> |
| 16 | <button variant-="sky">Variants</button> |
| 17 |
Theme
Installation
Install the theme with your preferred package manager
bun i @webtui/theme-catppuccin
npm i @webtui/theme-catppuccin
yarn add @webtui/theme-catppuccin
pnpm i @webtui/theme-catppuccinEnsure 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-catppuccin';Set the data-webtui-theme attribute to the <html> tag
<html data-webtui-theme="catppuccin-mocha"></html>To only apply the theme to a specific element, use the same attribute
<html data-webtui-theme="dark">
<body>
<div data-webtui-theme="catppuccin-mocha">
<!-- ... -->
</div>
</body>
</html>Flavors
Supports all four Catppuccin theme flavors.
<!-- `catppuccin` defaults to `catppuccin-mocha` -->
<html data-webtui-theme="catppuccin">
<html data-webtui-theme="catppuccin-mocha">
<html data-webtui-theme="catppuccin-macchiato">
<html data-webtui-theme="catppuccin-frappe">
<html data-webtui-theme="catppuccin-latte"></html>
</html>
</html>
</html>
</html>Components
Components affected/modified by the theme
Typography
- Colors headings from
h1toh6 - inline
<a>tags are underlined and colored to bevar(--sky) - inline
<code>tags are colored to bevar(--red)
<h1>Heading 1</h1>
<!-- ... -->
<h6>Heading 6</h6>
<p><a href="https://example.com">Link</a> <code>Inline Code</code></p>Badge
Adds additional variants to badges matching all custom accent colors
<span is-="badge" variant-="rosewater">rosewater</span>
<span is-="badge" variant-="flamingo">flamingo</span>
<!-- ... -->
<span is-="badge" variant-="blue">blue</span>
<span is-="badge" variant-="lavender">lavender</span>Button
Adds additional variants to buttons matching all custom accent colors
<button variant-="rosewater">rosewater</button>
<button variant-="flamingo">flamingo</button>
<!-- ... -->
<button variant-="blue">blue</button>
<button variant-="lavender">lavender</button>CSS Variables
Adds the following CSS variables to the base layer
[data-webtui-theme='catppuccin-*'] {
/* Accent Colors */
--rosewater: #f5e0dc;
--flamingo: #f2cdcd;
--pink: #f5c2e7;
--mauve: #cba6f7;
--red: #f38ba8;
--maroon: #eba0ac;
--peach: #fab387;
--yellow: #f9e2af;
--green: #a6e3a1;
--teal: #94e2d5;
--sky: #89dceb;
--sapphire: #74c7ec;
--blue: #89b4fa;
--lavender: #b4befe;
/* Background / Foreground Colors */
--text: #cdd6f4;
--subtext1: #bac2de;
--subtext0: #a6adc8;
--overlay2: #9399b2;
--overlay1: #7f849c;
--overlay0: #6c7086;
--surface2: #585b70;
--surface1: #45475a;
--surface0: #313244;
--base: #1e1e2e;
--mantle: #181825;
--crust: #11111b;
}The base background/foreground colors use the following CSS variables from the Catppuccin palette
[data-webtui-theme='catppuccin-*'] {
--background0: var(--base);
--background1: var(--surface0);
--background2: var(--surface1);
--background3: var(--surface2);
--foreground0: var(--text);
--foreground1: var(--subtext1);
--foreground2: var(--overlay2);
}