WebTUI

Theming can be done by editing the CSS variables in the base stylesheet, or if you install a theme plugin

CSS Variables

@webtui/css ships with a set of CSS variables that control font styles and background/foreground colors

These can be customized with the CSS :root selector on the base layer

@layer base {
    :root {
        --font-size: 18px;
        --font-family: "JetBrainsMono", monospace;
    }
}

Font Styles

@layer base {
    :root {
        --font-size: 16px;
        --line-height: 1.3;
        /* Font weight for bold text */
        --font-weight-bold: 700;
        /* Font weight for regular text */
        --font-weight-normal: 400;
        --font-family: monospace;
    }
}

Colors

The base theme consists of four background levels and three foreground levels

Additional color accents/variants can be added to components individually with CSS or by importing a theme plugin

@layer base {
    :root {
        /* Default background color */
        --background0: #fff;
        /* Background levels 1-3 */
        --background1: #ddd;
        --background2: #bbb;
        --background3: #999;

        /* Default foreground color */
        --foreground0: #000;        
        /* Foreground levels 1-2 */
        --foreground1: #444;
        --foreground2: #888;
    }
}

Shown below is a screenshot showing the background and foreground colors of a basic light theme, dark theme, Nord, and Catppuccin

 theme-pallettes.png

Light & Dark

@webtui/css ships with a basic light and dark theme

To enable the dark theme, simply add data-webtui-theme="dark" to the <html> tag, or any element that should inherit the theme colors

<html data-webtui-theme="dark">

Theme Plugins

Theme plugins change the base colors and often include additional color variants and styles for individual components

 catppuccin-badges.png

Check out the Plugins page for a list of available themes

← <C-p> Previous

start/ASCII Boxes Next <C-n> → start/Plugins