Catppuccin Theme
A port of the Catppuccin color palette to WebTUI
<h1>Lots</h1>
<h2>Of</h2>
<h3>Colored</h3>
<h4>Headings</h4>
<h5>And</h5>
<h6>Stuff</h6>
<p>And links are <a href="https://example.com">blue</a> now and <code>code</code> is red</p>
<span is-="badge" variant-="red">Many</span>
<span is-="badge" variant-="teal">Colorful</span>
<span is-="badge" variant-="mauve">Badge</span>
<span is-="badge" variant-="flamingo">Variants</span><br/>
<span is-="badge" variant-="peach">And</span><br/>
<button variant-="maroon">Sick</button>
<button variant-="rosewater">Button</button>
<button variant-="sky">Variants</button> 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">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">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
:root {
/* 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
:root {
--background0: var(--base);
--background1: var(--surface0);
--background2: var(--surface1);
--background3: var(--surface2);
--foreground0: var(--text);
--foreground1: var(--subtext1);
--foreground2: var(--overlay2);
}