Nord Theme
A port of the Nord color palette to WebTUI
| 1 | |
| 2 | <h1>Headings</h1> |
| 3 | <h2>Are</h2> |
| 4 | <h3>Colored</h3> |
| 5 | <span is-="badge" variant-="nord7">As</span> |
| 6 | <span is-="badge" variant-="nord8">Are</span> |
| 7 | <span is-="badge" variant-="nord9">The</span> |
| 8 | <span is-="badge" variant-="nord10">Badge</span> |
| 9 | <span is-="badge" variant-="nord11">Colors</span><br/> |
| 10 | <span is-="badge" variant-="nord12">And</span><br/> |
| 11 | <button variant-="nord13">All</button> |
| 12 | <button variant-="nord14">The</button> |
| 13 | <button variant-="nord15">Buttons</button> |
| 14 |
Theme
Installation
Install the theme with your preferred package manager
bun i @webtui/theme-nord
npm i @webtui/theme-nord
yarn add @webtui/theme-nord
pnpm i @webtui/theme-nordEnsure you import the theme after all the other stylesheets from @webtui/css
@layer base, utils, components;
@import '@webtui/css/base.css';
@import '@webtui/css/components/typography.css';
/* ... */
@import '@webtui/theme-nord';Set the data-webtui-theme attribute to the <html> tag
<html data-webtui-theme="nord"></html>To only apply the theme to a specific element, use the same attribute
<html data-webtui-theme="dark">
<body>
<div data-webtui-theme="nord">
<!-- ... -->
</div>
</body>
</html>Components
Components affected/modified by the theme
Typography
- Colors headings from
h1toh6 - inline
<a>tags are underlined and colored to bevar(--nord7) - inline
<code>tags are colored to bevar(--nord12)
<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 all custom accent colors
<span is-="badge" variant-="nord0">nord0</span>
<span is-="badge" variant-="nord1">nord1</span>
<!-- ... -->
<span is-="badge" variant-="nord14">nord14</span>
<span is-="badge" variant-="nord15">nord15</span>Button
Adds additional variants to buttons matching all custom accent colors
<button variant-="nord0">nord0</button>
<button variant-="nord1">nord1</button>
<!-- ... -->
<button variant-="nord14">nord14</button>
<button variant-="nord15">nord15</button>CSS Variables
Adds the following CSS variables to the base layer
:root {
/* Polar Night */
--nord0: #2e3440;
--nord1: #3b4252;
--nord2: #434c5e;
--nord3: #4c566a;
/* Snow Storm */
--nord4: #d8dee9;
--nord5: #e5e9f0;
--nord6: #eceff4;
/* Frost */
--nord7: #8fbcbb;
--nord8: #88c0d0;
--nord9: #81a1c1;
--nord10: #5e81ac;
/* Aurora */
--nord11: #bf616a;
--nord12: #d08770;
--nord13: #ebcb8b;
--nord14: #a3be8c;
--nord15: #b48ead;
}The base background/foreground colors use the following CSS variables from the Nord palette
:root {
--background0: var(--nord0);
--background1: var(--nord1);
--background2: var(--nord2);
--background3: var(--nord3);
--foreground0: var(--nord6);
--foreground1: var(--nord5);
--foreground2: var(--nord4);
}