mirror of
https://github.com/welpo/tabi.git
synced 2025-12-15 04:08:43 +01:00
⚡️ refactor: co-locate images (#200)
This commit is contained in:
Óscar Fernández
GitHub
parent
c0a07cb467
commit
8aabeaecc3
173 changed files with 205 additions and 205 deletions
192
content/blog/customise-tabi/index.md
Normal file
192
content/blog/customise-tabi/index.md
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
+++
|
||||
title = "Customise tabi with skins and a default theme"
|
||||
date = 2023-08-09
|
||||
updated = 2023-10-07
|
||||
description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["showcase", "tutorial"]
|
||||
|
||||
[extra]
|
||||
toc = true
|
||||
quick_navigation_buttons = true
|
||||
social_media_card = "social_cards/blog_customise_tabi.jpg"
|
||||
+++
|
||||
|
||||
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
|
||||
|
||||
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:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
theme_switcher = false
|
||||
default_theme = "dark"
|
||||
```
|
||||
|
||||
If your theme switcher is enabled, the `default_theme` will only be used as fallback, in case a visitor has JavaScript disabled.
|
||||
|
||||
## 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](#create-your-own-skin).
|
||||
|
||||
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:
|
||||
|
||||
```toml
|
||||
[extra]
|
||||
skin = "sakura"
|
||||
```
|
||||
|
||||
Take a look below at the available skins below.
|
||||
|
||||
**Click on the images** to switch between dark and light themes.
|
||||
|
||||
<hr>
|
||||
|
||||
### Teal
|
||||
|
||||
The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like:
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
|
||||
|
||||
<hr>
|
||||
|
||||
### Lavender
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
|
||||
|
||||
To apply, use `skin = "lavender"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Red
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }}
|
||||
|
||||
Switch to this by setting `skin = "red"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Mint
|
||||
|
||||
A skin designed by 🅿️.
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }}
|
||||
|
||||
Activate it with `skin = "mint"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Sakura
|
||||
|
||||
Inspired by the Japanese cherry blossom season.
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }}
|
||||
|
||||
To enable this skin, adjust `skin = "sakura"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Blue
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }}
|
||||
|
||||
For this appearance, set `skin = "blue"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Indigo Ingot
|
||||
|
||||
*Indigo* for blue (in light theme) and *ingot* for gold (in dark theme).
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }}
|
||||
|
||||
To activate this skin, use `skin = "indigo_ingot"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Evangelion
|
||||
|
||||
Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Monochrome
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }}
|
||||
|
||||
To achieve this look, set `skin = "monochrome"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Low contrast orange
|
||||
|
||||
**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }}
|
||||
|
||||
To use, set `skin = "lowcontrast_orange"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Low contrast peach
|
||||
|
||||
**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }}
|
||||
|
||||
To enable it, specify `skin = "lowcontrast_peach"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### Low contrast pink
|
||||
|
||||
**WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
|
||||
|
||||
{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }}
|
||||
|
||||
For this colourscheme, choose `skin = "lowcontrast_pink"`.
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
### 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"):
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--primary-color: #087e96;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #91e0ee;
|
||||
}
|
||||
```
|
||||
|
||||
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](https://webaim.org/resources/contrastchecker/). The background of the light theme is `#fff`, and the dark one is `#1f1f1f`.
|
||||
Loading…
Add table
Add a link
Reference in a new issue