Customise tabi with skins and a default theme

Table of Contents

tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins).

Default theme

Use default_theme = "dark" to set the dark theme as the default, or default_theme = "light" to set the light theme as the default.

Setting default_theme = "" (or commenting out the variable) will follow the user’s system preference (light or dark mode).

To permanently set your site to either the dark or light theme, you need to disable the theme switcher in config.toml and set your preferred theme as the default_theme.

For example, to have a permanent dark theme:

[extra]
theme_switcher = false
default_theme = "dark"

Skins

Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can create your own.

A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme.

Enabling a skin is as easy as setting the skin variable in your config.toml with the name of the skin. For example:

[extra]
skin = "sakura"

Take a look below at the available skins below.

Click on the images to switch between dark and light themes.

Teal

The default skin. If the skin variable is unset (or set to "teal"), this is what tabi looks like:

Lavender

To apply, use skin = "lavender".

Red

Switch to this by setting skin = "red".

Mint

A skin designed by 🅿️.

Activate it with skin = "mint".

Sakura

Inspired by the Japanese cherry blossom season.

To enable this skin, adjust skin = "sakura".

Blue

For this appearance, set skin = "blue".

Indigo Ingot

Indigo for blue (in light theme) and ingot for gold (in dark theme).

To activate this skin, use skin = "indigo_ingot".

Evangelion

Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).

Monochrome

To achieve this look, set skin = "monochrome".

Low contrast orange

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

To use, set skin = "lowcontrast_orange".

Low contrast peach

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

To enable it, specify skin = "lowcontrast_peach".

Low contrast pink

WARNING! This skin’s light theme may have low contrast, affecting accessibility and Lighthouse rating. (Dark theme is fine.)

For this colourscheme, choose skin = "lowcontrast_pink".

Create your own skin

You’re not just limited to predefined skins. Why not create a look that’s distinctively tailored to your preferences?

You can save your new skin it in either of these two directories:

  1. Inside the theme’s directory: themes/tabi/sass/skins
  2. Inside your main site’s directory: sass/skins (you’ll need to create this folder)

Create a new .scss file (for example, your_skin.scss) in your preferred location. This file needs to have these two variables (this is the default skin, “teal”):

// This defines theme-specific variables.
@mixin theme-variables($theme) {
    @if $theme =='light' {
        // Light theme colours.
        --primary-color: #087e96; // Contrast ratio: 4.73:1
    }
    @else if $theme == 'dark' {
        // Dark theme colours.
        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
    }
}

// Apply light theme variables by default.
:root {
    @include theme-variables('light');
}

// Apply dark theme variables when dark theme is explicitly set.
[data-theme='dark'] {
    @include theme-variables('dark');
}

// Apply dark theme variables when user's system prefers dark mode
// and the theme is not explicitly set to light.
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        @include theme-variables('dark');
    }
}

Modify the colours to your taste. Once you’re satisfied, update the skin variable to match your filename.

Remember to consider the accessibility of the colours you choose. Here’s a link that can help you: WebAIM: Contrast Checker. The background of the light theme is #fff, and the dark one is #1f1f1f.