WebTUI

A port of the Vitesse color palette to WebTUI.

1
2	<h1>Headings</h1>
3	<h2>Are</h2>
4	<h3>Colored</h3>
5	<span is-="badge" variant-="red">So</span>
6	<span is-="badge" variant-="green">Are</span>
7	<span is-="badge" variant-="yellow">All</span>
8	<span is-="badge" variant-="blue">The</span>
9	<span is-="badge" variant-="purple">Different</span>
10	<span is-="badge" variant-="aqua">Badge</span>
11	<span is-="badge" variant-="orange">Variants</span><br/>
12	<button variant-="green">And</button>
13	<button variant-="orange">The</button>
14	<button variant-="yellow">Buttons</button>
15

Installation

Install the theme with your preferred package manager

bun i @webtui/theme-vitesse
npm i @webtui/theme-vitesse
yarn add @webtui/theme-vitesse
pnpm i @webtui/theme-vitesse

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-vitesse";

Set the data-webtui-theme attribute on the <html> tag or a container element.

<html data-webtui-theme="vitesse-dark"></html>

To only apply the theme to a specific element:

<html data-webtui-theme="dark">
  <!-- Example base theme -->
  <body>
    <div data-webtui-theme="vitesse-light">
      <!-- Vitesse light styles applied here -->
    </div>
    <div data-webtui-theme="vitesse-dark-soft">
      <!-- Vitesse dark-soft styles applied here -->
    </div>
  </body>
</html>

Variants

Supports dark and light modes, each with normal and soft contrast levels.

<!-- defaults to vitesse-dark -->
<html data-webtui-theme="vitesse-black">
<html data-webtui-theme="vitesse-dark-soft">
<html data-webtui-theme="vitesse-dark">
<html data-webtui-theme="vitesse-light">
<html data-webtui-theme="vitesse-light-soft">

Components

Components affected/modified by the theme:

Typography
Badge
Button

Typography

Colors headings from h1 to h6 using var(--green).
Inline <a> tags are underlined and colored var(--blue), changing to var(--aqua) on hover.
Inline <code> tags are colored var(--orange).

<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 Vitesse accent colors.

<span is-="badge" variant-="gray">gray</span>
<span is-="badge" variant-="red">red</span>
<!-- ... -->
<span is-="badge" variant-="aqua">aqua</span>
<span is-="badge" variant-="orange">orange</span>

Button

Adds additional variants to buttons matching Vitesse accent colors.

<button variant-="gray">gray</button>
<button variant-="red">red</button>
<!-- ... -->
<button variant-="aqua">aqua</button>
<button variant-="orange">orange</button>

CSS Variables

Adds the following CSS variables within the base layer.

Raw color tokens and base semantic variables (--background*, --foreground*) are defined within theme-specific variant blocks. Dark mode uses bright accents, Light mode uses standard/faded accents.

@layer base {
  /* Common Dark Variables & Semantic Mapping */
  [data-webtui-theme|="vitesse-dark"] {
    /* ... raw dark vars ... */
    --orange: #d4976c; /* Dim Orange */

    /* Semantic Mapping (Dark) */
    --background0: var(--bg0);
    --background1: var(--bg1);
    --background2: var(--bg2);
    --background3: var(--bg3);
    --foreground0: var(--fg1);
    --foreground1: var(--fg2);
    --foreground2: var(--fg3);
  }

  /* Dark Contrast Specific bg0 */
  [data-webtui-theme="vitesse-dark"] {
    --bg0: #121212;
  }
  [data-webtui-theme="vitesse-dark-soft"] {
    --bg0: #222;
  }
  [data-webtui-theme="vitesse-black"] {
    --bg0: #000000;
  }

  /* Common Light Variables & Semantic Mapping */
  [data-webtui-theme|="vitesse-light"] {
    /* ... raw light vars ... */
    --orange: #a65e2b; /* Faded Orange */

    /* Semantic Mapping (Light) */
    --background0: var(--bg0);
    --background1: var(--bg1);
    --background2: var(--bg2);
    --background3: var(--bg3);
    --foreground0: var(--fg1);
    --foreground1: var(--fg2);
    --foreground2: var(--fg3);
  }

  /* Light Contrast Specific bg0 */
  [data-webtui-theme="vitesse-light"] {
    --bg0: #ffffff;
  }
  [data-webtui-theme="vitesse-light-soft"] {
    --bg0: #f1f0e9;
  }
}

The base WebTUI background/foreground variables are mapped like this:

[data-webtui-theme|="vitesse"] {
  /* Defaults to dark values */
  --background0: var(--bg0);
  --background1: var(--bg1);
  --background2: var(--bg2);
  --background3: var(--bg3);

  --foreground0: var(--fg1);
  --foreground1: var(--fg2);
  --foreground2: var(--fg3);

  /* Override for any light variant */
  [data-webtui-theme|="vitesse-light"] & {
    --background0: var(--bg0);
    --background1: var(--bg1);
    --background2: var(--bg2);
    --background3: var(--bg3);

    --foreground0: var(--fg1);
    --foreground1: var(--fg2);
    --foreground2: var(--fg3);
  }
}

← <C-p> Previous

plugins/Nord Theme Next <C-n> → plugins/Developing Plugins