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 |
Theme
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-gruvboxEnsure 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
h1toh6usingvar(--gb-green). - Inline
<a>tags are underlined and coloredvar(--gb-blue), changing tovar(--gb-aqua)on hover. - Inline
<code>tags are coloredvar(--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);
}