Everforest Theme
A port of the Everforest color palette to WebTUI.
| 1 | |
| 2 | <h1>Heading</h1> |
| 3 | <p>Typography demo with <a>links</a> and <code>inline code</code></p> |
| 4 | <span is-="badge" variant-="red">Lots</span> |
| 5 | <span is-="badge" variant-="green">Of</span> |
| 6 | <span is-="badge" variant-="yellow">Colorful</span> |
| 7 | <span is-="badge" variant-="blue">And</span> |
| 8 | <span is-="badge" variant-="purple">Different</span> |
| 9 | <span is-="badge" variant-="aqua">Badge</span> |
| 10 | <span is-="badge" variant-="orange">Variants</span><br/> |
| 11 | <button variant-="green">And</button> |
| 12 | <button variant-="orange">Buttons</button> |
| 13 | <button variant-="yellow">Too</button> |
| 14 | |
| 15 |
Theme
Installation
Install the theme with your preferred package manager
bun i @webtui/theme-everforest
npm i @webtui/theme-everforest
yarn add @webtui/theme-everforest
pnpm i @webtui/theme-everforestEnsure 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-everforest";Set the data-webtui-theme attribute on the <html> tag or a container element.
<html data-webtui-theme="everforest-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="everforest-light-hard">
<!-- everforest light-hard styles applied here -->
</div>
<div data-webtui-theme="everforest-dark-soft">
<!-- everforest 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="everforest-dark-hard"></html>
<!-- Default: everforest-dark or everforest -->
<html data-webtui-theme="everforest-dark-medium"></html>
<html data-webtui-theme="everforest-dark-soft"></html>
<!-- Light Variants -->
<html data-webtui-theme="everforest-light-hard"></html>
<html data-webtui-theme="everforest-light-medium"></html>
<!-- Default: everforest-light -->
<html data-webtui-theme="everforest-light-soft"></html>Components
Components affected/modified by the theme:
Typography
- Colors headings from
h1toh6usingvar(--ef-green). - Inline
<a>tags are underlined and coloredvar(--ef-blue), changing tovar(--ef-aqua)on hover. - Inline
<code>tags are coloredvar(--ef-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 everforest accent colors.
<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 everforest accent colors.
<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="everforest-*-*"] {
--red: #e67e80;
--orange: #e69875;
--yellow: #dbbc7f;
--green: #a7c080;
--blue: #7fbbb3;
--aqua: #83c092;
--purple: #d699b6;
--fg: #d3c6aa;
--statusline1: #a7c080;
--statusline2: #d3c6aa;
--statusline3: #e67e80;
--gray0: #7a8478;
--gray1: #859289;
--gray2: #9da9a0;
--bg-dim: #232a2e;
--bg0: #2d353b;
--bg1: #343f44;
--bg2: #3d484d;
--bg3: #475258;
--bg4: #4f585e;
--bg5: #56635f;
--bg-red: #4c3743;
--bg-visual: #493b40;
--bg-yellow: #45443c;
--bg-green: #3c4841;
--bg-blue: #384b55;
}The base background/foreground colors use the following CSS variables from the Everforest palette
[data-webtui-theme="everforest-*-*"] {
--background0: var(--bg0);
--background1: var(--bg1);
--background2: var(--bg2);
--background3: var(--bg3);
--foreground0: var(--fg);
--foreground1: var(--gray2);
--foreground2: var(--gray1);
}