 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/pre: Pre components/radio: Radio components/range: Range components/separator: Separator components/spinner: Spinner components/switch: Switch components/table: Table components/textarea: Textarea components/tooltip: Tooltip components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-everforest: Everforest Theme plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme plugins/theme-vitesse: Vitesse Theme start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins start/intro: Introduction start/intro: ## Features contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/theming: ### Using Multiple Theme Accents installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN

Gruvbox Theme

A port of the Gruvbox 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-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

  • 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, each of which change based on the theme variant

[data-webtui-theme='gruvbox-*-*'] {
    --gb-dark-bg1: #3c3836;
    --gb-dark-bg2: #504945;
    --gb-dark-bg3: #665c54;
    --gb-dark-bg4: #7c6f64;
    --gb-dark-fg0: #fbf1c7;
    --gb-dark-fg1: #ebdbb2;
    --gb-dark-fg2: #d5c4a1;
    --gb-dark-fg3: #bdae93;
    --gb-dark-fg4: #a89984;
    --gb-dark-gray: #928374;
    --gb-red: #fb4934;
    --gb-green: #b8bb26;
    --gb-yellow: #fabd2f;
    --gb-blue: #83a598;
    --gb-purple: #d3869b;
    --gb-aqua: #8ec07c;
    --gb-orange: #fe8019;

    --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);
}

The base background/foreground colors use the following CSS variables from the Gruvbox palette

[data-webtui-theme='gruvbox-*-*'] {
    --background0: var(--gb-dark-bg0);
    --background1: var(--gb-dark-bg1);
    --background2: var(--gb-dark-bg2);
    --background3: var(--gb-dark-bg3);

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