WebTUI

A port of the Gruvbox color palette to WebTUI.

<h1>Headings</h1>
<h2>Are</h2>
<h3>Colored</h3>
<span is-="badge" variant-="red">So</span>
<span is-="badge" variant-="green">Are</span>
<span is-="badge" variant-="yellow">All</span>
<span is-="badge" variant-="blue">The</span>
<span is-="badge" variant-="purple">Different</span>
<span is-="badge" variant-="aqua">Badge</span>
<span is-="badge" variant-="orange">Variants</span><br/>
<button variant-="green">And</button>
<button variant-="orange">The</button>
<button variant-="yellow">Buttons</button>

Installation

Install the theme with your preferred package manager

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

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

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

<html data-webtui-theme="gruvbox-dark-medium"></html>

To only apply the theme to a specific element:

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

Variants

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

<!-- Dark Variants -->
<html data-webtui-theme="gruvbox-dark-hard">
  <html data-webtui-theme="gruvbox-dark-medium">
    <!-- Default: gruvbox-dark or gruvbox -->
    <html data-webtui-theme="gruvbox-dark-soft">
      <!-- Light Variants -->
      <html data-webtui-theme="gruvbox-light-hard">
        <html data-webtui-theme="gruvbox-light-medium">
          <!-- Default: gruvbox-light -->
          <html data-webtui-theme="gruvbox-light-soft"></html>
        </html>
      </html>
    </html>
  </html>
</html>

Components

Components affected/modified by the theme:

Typography
Badge
Button

Typography

Colors headings from h1 to h6 using var(--gb-green).
Inline <a> tags are underlined and colored var(--gb-blue), changing to var(--gb-aqua) on hover.
Inline <code> tags are colored var(--gb-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 Gruvbox 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 Gruvbox 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|="gruvbox-dark"] {
    /* ... raw dark vars ... */
    --gb-orange: #fe8019; /* Bright Orange */

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

  /* Dark Contrast Specific bg0 */
  [data-webtui-theme="gruvbox-dark-hard"] {
    --gb-dark-bg0: #1d2021;
  }
  [data-webtui-theme="gruvbox-dark-medium"] {
    --gb-dark-bg0: #282828;
  }
  [data-webtui-theme="gruvbox-dark-soft"] {
    --gb-dark-bg0: #32302f;
  }

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

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

  /* Light Contrast Specific bg0 */
  [data-webtui-theme="gruvbox-light-hard"] {
    --gb-light-bg0: #f9f5d7;
  }
  [data-webtui-theme="gruvbox-light-medium"] {
    --gb-light-bg0: #fbf1c7;
  }
  [data-webtui-theme="gruvbox-light-soft"] {
    --gb-light-bg0: #f2e5bc;
  }
}

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

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

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

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

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

← <C-p> Previous

plugins/Catppuccin Theme Next <C-n> → plugins/Nord Theme