Skip to content

# Customise tabi with skins and a default theme

- 9th Aug 2023
- •5 min read
- •Tags:
- showcase,
- tutorial

- Updated on 12th Sep 2024
- •See changes

### Table of Contents

- Default theme
- Skins
  - Teal
  - Lavender
  - Red
  - Mint
  - Sakura
  - Blue
  - Indigo Ingot
  - Evangelion
  - Monochrome
  - Low contrast orange
  - Low contrast peach
  - Low contrast pink
  - Create your own skin

Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours.

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`.

- Default theme
- Skins
  - Teal
  - Lavender
  - Red
  - Mint
  - Sakura
  - Blue
  - Indigo Ingot
  - Evangelion
  - Monochrome
  - Low contrast orange
  - Low contrast peach
  - Low contrast pink
  - Create your own skin

Copied! Copy code to clipboard