Customise tabi with skins and a default theme (reprinted)
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.
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:
[]
= false
= "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:
[]
= "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:
- Inside the theme’s directory:
themes/tabi/sass/skins
- 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”):
{
:;
}
{
:;
}
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
.