deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-10 23:38:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/blog/customise-tabi/index.html
GitHub Actions 8396d01817 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-09-20 08:31:31 +00:00

36 lines
No EOL
41 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Customise tabi with skins and a default theme</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours." name=description><meta content="Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours." property=og:description><meta content="Customise tabi with skins and a default theme" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/customise-tabi/social_cards/blog_customise_tabi.jpg?h=7f8d0c86b6350d74f491" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/customise-tabi/social_cards/blog_customise_tabi.jpg?h=7f8d0c86b6350d74f491" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/customise-tabi/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/customise-tabi/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/customise-tabi/ hreflang=ca rel=alternate><meta content=https://welpo.github.io/tabi/blog/customise-tabi/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Español href=https://welpo.github.io/tabi/es/blog/customise-tabi/ lang=es role=menuitem>Español</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/customise-tabi/ lang=ca role=menuitem>Català</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/customise-tabi/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">Customise tabi with skins and a default theme</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/customise-tabi/></a><ul class=meta><li><time class=dt-published datetime=2023-08-09>9th Aug 2023</time><li title="911 words"><span aria-hidden=true class=separator>•</span>5 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2024-09-12>Updated on 12th Sep 2024</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/customise-tabi/index.md>See changes</a></ul><div class=toc-container><h3>Table of Contents</h3><ul><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#default-theme>Default theme</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#teal>Teal</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#lavender>Lavender</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#red>Red</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#mint>Mint</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#blue>Blue</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#indigo-ingot>Indigo Ingot</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#monochrome>Monochrome</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-orange>Low contrast orange</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-peach>Low contrast peach</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-pink>Low contrast pink</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#create-your-own-skin>Create your own skin</a></ul></ul></div><p class=p-summary hidden>Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours.<section class="e-content body"><p>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).<h2 id=default-theme><a aria-label="Anchor link for: default-theme" class="header-anchor no-hover-padding" href=#default-theme><span aria-hidden=true class=link-icon></span></a> Default theme</h2><p>Use <code>default_theme = "dark"</code> to set the dark theme as the default, or <code>default_theme = "light"</code> to set the light theme as the default.<p>Setting <code>default_theme = ""</code> (or commenting out the variable) will follow the user’s system preference (light or dark mode).<p>To permanently set your site to either the dark or light theme, you need to disable the theme switcher in <code>config.toml</code> and set your preferred theme as the <code>default_theme</code>.<p>For example, to have a permanent dark theme:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">theme_switcher</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">default_theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>dark<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><h2 id=skins><a aria-label="Anchor link for: skins" class="header-anchor no-hover-padding" href=#skins><span aria-hidden=true class=link-icon></span></a> Skins</h2><p>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 <a href=https://welpo.github.io/tabi/blog/customise-tabi/#create-your-own-skin>create your own</a>.<p>A skin is a CSS file with two variables: the primary colour for the light theme, and the primary colour for the dark theme.<p>Enabling a skin is as easy as setting the <code>skin</code> variable in your <code>config.toml</code> with the name of the skin. For example:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">skin</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>sakura<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><p>Take a look below at the available skins below.<p><strong>Click on the images</strong> to switch between dark and light themes.<hr><h3 id=teal><a aria-label="Anchor link for: teal" class="header-anchor no-hover-padding" href=#teal><span aria-hidden=true class=link-icon></span></a> Teal</h3><p>The default skin. If the <code>skin</code> variable is unset (or set to <code>"teal"</code>), this is what tabi looks like:<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-58556 type=checkbox><label class=image-label for=toggle-img-58556><div class=image-default><img alt="teal skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/teal_light.webp?h=9dddca07a4e6fe20ef55" loading=lazy></div> <div class=image-toggled><img alt="teal skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/teal_dark.webp?h=c7507c0b5a2b01b62bf6" loading=lazy></div></label></div><hr><h3 id=lavender><a aria-label="Anchor link for: lavender" class="header-anchor no-hover-padding" href=#lavender><span aria-hidden=true class=link-icon></span></a> Lavender</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-14424 type=checkbox><label class=image-label for=toggle-img-14424><div class=image-default><img alt="lavender skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_light.webp?h=bc19bff6623d41e30062" loading=lazy></div> <div class=image-toggled><img alt="lavender skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_dark.webp?h=b3551cd0429844a258f9" loading=lazy></div></label></div><p>To apply, use <code>skin = "lavender"</code>.<hr><h3 id=red><a aria-label="Anchor link for: red" class="header-anchor no-hover-padding" href=#red><span aria-hidden=true class=link-icon></span></a> Red</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-8913 type=checkbox><label class=image-label for=toggle-img-8913><div class=image-default><img alt="red skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/red_light.webp?h=72be070e9ca15d0a0d25" loading=lazy></div> <div class=image-toggled><img alt="red skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/red_dark.webp?h=073bc524a72ee107f29a" loading=lazy></div></label></div><p>Switch to this by setting <code>skin = "red"</code>.<hr><h3 id=mint><a aria-label="Anchor link for: mint" class="header-anchor no-hover-padding" href=#mint><span aria-hidden=true class=link-icon></span></a> Mint</h3><p>A skin designed by 🅿️.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-76590 type=checkbox><label class=image-label for=toggle-img-76590><div class=image-default><img alt="mint skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/mint_light.webp?h=d5560108b93f338b3edf" loading=lazy></div> <div class=image-toggled><img alt="mint skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/mint_dark.webp?h=e548695130d05dd897cb" loading=lazy></div></label></div><p>Activate it with <code>skin = "mint"</code>.<hr><h3 id=sakura><a aria-label="Anchor link for: sakura" class="header-anchor no-hover-padding" href=#sakura><span aria-hidden=true class=link-icon></span></a> Sakura</h3><p>Inspired by the Japanese cherry blossom season.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-17450 type=checkbox><label class=image-label for=toggle-img-17450><div class=image-default><img alt="sakura skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/sakura_light.webp?h=72be070e9ca15d0a0d25" loading=lazy></div> <div class=image-toggled><img alt="sakura skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/sakura_dark.webp?h=e7030686bd18c70d76b7" loading=lazy></div></label></div><p>To enable this skin, adjust <code>skin = "sakura"</code>.<hr><h3 id=blue><a aria-label="Anchor link for: blue" class="header-anchor no-hover-padding" href=#blue><span aria-hidden=true class=link-icon></span></a> Blue</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-54211 type=checkbox><label class=image-label for=toggle-img-54211><div class=image-default><img alt="blue skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/blue_light.webp?h=db641150bb52083af3d6" loading=lazy></div> <div class=image-toggled><img alt="blue skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/blue_dark.webp?h=a43d11f5ae6b7577426d" loading=lazy></div></label></div><p>For this appearance, set <code>skin = "blue"</code>.<hr><h3 id=indigo-ingot><a aria-label="Anchor link for: indigo-ingot" class="header-anchor no-hover-padding" href=#indigo-ingot><span aria-hidden=true class=link-icon></span></a> Indigo Ingot</h3><p><em>Indigo</em> for blue (in light theme) and <em>ingot</em> for gold (in dark theme).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-7641 type=checkbox><label class=image-label for=toggle-img-7641><div class=image-default><img alt="indigo ingot skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/indigo_ingot_light.webp?h=328936168cfff006b948" loading=lazy></div> <div class=image-toggled><img alt="indigo ingot skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/indigo_ingot_dark.webp?h=f0eacc0b166e6ea87133" loading=lazy></div></label></div><p>To activate this skin, use <code>skin = "indigo_ingot"</code>.<hr><h3 id=evangelion><a aria-label="Anchor link for: evangelion" class="header-anchor no-hover-padding" href=#evangelion><span aria-hidden=true class=link-icon></span></a> Evangelion</h3><p>Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-5876 type=checkbox><label class=image-label for=toggle-img-5876><div class=image-default><img alt="evangelion skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/evangelion_light.webp?h=a9278b6a7c6997efafd2" loading=lazy></div> <div class=image-toggled><img alt="evangelion skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/evangelion_dark.webp?h=009583ef6e5234ef19bd" loading=lazy></div></label></div><hr><h3 id=monochrome><a aria-label="Anchor link for: monochrome" class="header-anchor no-hover-padding" href=#monochrome><span aria-hidden=true class=link-icon></span></a> Monochrome</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-326 type=checkbox><label class=image-label for=toggle-img-326><div class=image-default><img alt="monochrome skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/monochrome_light.webp?h=fe19d069545a1e11a770" loading=lazy></div> <div class=image-toggled><img alt="monochrome skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/monochrome_dark.webp?h=5cffd0a7cece0b18c999" loading=lazy></div></label></div><p>To achieve this look, set <code>skin = "monochrome"</code>.<hr><h3 id=low-contrast-orange><a aria-label="Anchor link for: low-contrast-orange" class="header-anchor no-hover-padding" href=#low-contrast-orange><span aria-hidden=true class=link-icon></span></a> Low contrast orange</h3><p><strong>WARNING!</strong> This skin’s light theme may have <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>low contrast</a>, affecting accessibility and Lighthouse rating. (Dark theme is fine.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-39594 type=checkbox><label class=image-label for=toggle-img-39594><div class=image-default><img alt="low contrast orange skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_orange_light.webp?h=bfdcbdcdbb5c85fb17dc" loading=lazy></div> <div class=image-toggled><img alt="low contrast orange skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_orange_dark.webp?h=d4c5f19987fe7a08887c" loading=lazy></div></label></div><p>To use, set <code>skin = "lowcontrast_orange"</code>.<hr><h3 id=low-contrast-peach><a aria-label="Anchor link for: low-contrast-peach" class="header-anchor no-hover-padding" href=#low-contrast-peach><span aria-hidden=true class=link-icon></span></a> Low contrast peach</h3><p><strong>WARNING!</strong> This skin’s light theme may have <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>low contrast</a>, affecting accessibility and Lighthouse rating. (Dark theme is fine.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-69 type=checkbox><label class=image-label for=toggle-img-69><div class=image-default><img alt="low contrast peach skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_peach_light.webp?h=6cdcbab282fb1fa34b1a" loading=lazy></div> <div class=image-toggled><img alt="low contrast peach skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_peach_dark.webp?h=538835da12b3a4b03e45" loading=lazy></div></label></div><p>To enable it, specify <code>skin = "lowcontrast_peach"</code>.<hr><h3 id=low-contrast-pink><a aria-label="Anchor link for: low-contrast-pink" class="header-anchor no-hover-padding" href=#low-contrast-pink><span aria-hidden=true class=link-icon></span></a> Low contrast pink</h3><p><strong>WARNING!</strong> This skin’s light theme may have <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>low contrast</a>, affecting accessibility and Lighthouse rating. (Dark theme is fine.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-77071 type=checkbox><label class=image-label for=toggle-img-77071><div class=image-default><img alt="low contrast pink skin in light mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_pink_light.webp?h=57db9649475c4b81f08f" loading=lazy></div> <div class=image-toggled><img alt="low contrast pink skin in dark mode" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_pink_dark.webp?h=8ad0c5e6e6052c0fb825" loading=lazy></div></label></div><p>For this colourscheme, choose <code>skin = "lowcontrast_pink"</code>.<hr><h3 id=create-your-own-skin><a aria-label="Anchor link for: create-your-own-skin" class="header-anchor no-hover-padding" href=#create-your-own-skin><span aria-hidden=true class=link-icon></span></a> Create your own skin</h3><p>You’re not just limited to predefined skins. Why not create a look that’s distinctively tailored to your preferences?<p>You can save your new skin it in either of these two directories:<ol><li>Inside the theme’s directory: <code>themes/tabi/sass/skins</code><li>Inside your main site’s directory: <code>sass/skins</code> (you’ll need to create this folder)</ol><p>Create a new <code>.scss</code> file (for example, <code>your_skin.scss</code>) in your preferred location. This file needs to have these two variables (this is the default skin, “teal”):<pre class="language-scss z-code" data-lang=scss><code class=language-scss data-lang=scss><span class="z-source z-scss"><span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> This defines theme-specific variables.
</span></span><span class="z-source z-scss"><span class="z-meta z-function z-declaration z-sass"><span class="z-keyword z-control z-at-rule z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>mixin</span> <span class="z-entity z-name z-function z-sass">theme-variables</span><span class="z-meta z-function z-parameters z-sass"><span class="z-punctuation z-definition z-group z-begin z-sass">(</span><span class="z-variable z-parameter z-sass"><span class="z-punctuation z-definition z-variable z-sass">$</span>theme</span><span class="z-punctuation z-definition z-group z-end z-sass">)</span></span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-meta z-at-rule z-sass"><span class="z-keyword z-control z-flow z-conditional z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>if</span> <span class="z-variable z-other z-sass"><span class="z-punctuation z-definition z-variable z-sass">$</span>theme</span> <span class="z-keyword z-operator z-sass">==</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>light<span class="z-punctuation z-definition z-string z-end z-css">'</span></span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Light theme colours.
</span></span><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-custom-property z-css"><span class="z-punctuation z-definition z-custom-property z-css">--</span><span class="z-support z-type z-custom-property z-name z-css">primary-color</span></span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-constant z-other z-color z-rgb-value z-css"><span class="z-punctuation z-definition z-constant z-css">#</span>087e96</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> <span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Contrast ratio: 4.73:1
</span></span><span class="z-source z-scss"> <span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss"> <span class="z-meta z-at-rule z-sass"><span class="z-keyword z-control z-flow z-conditional z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>else if</span> <span class="z-variable z-other z-sass"><span class="z-punctuation z-definition z-variable z-sass">$</span>theme</span> <span class="z-keyword z-operator z-sass">==</span> <span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>dark<span class="z-punctuation z-definition z-string z-end z-css">'</span></span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Dark theme colours.
</span></span><span class="z-source z-scss"> <span class="z-meta z-property-name z-css"><span class="z-support z-type z-custom-property z-css"><span class="z-punctuation z-definition z-custom-property z-css">--</span><span class="z-support z-type z-custom-property z-name z-css">primary-color</span></span></span><span class="z-punctuation z-separator z-key-value z-css">:</span><span class="z-meta z-property-value z-css"> <span class="z-constant z-other z-color z-rgb-value z-css"><span class="z-punctuation z-definition z-constant z-css">#</span>91e0ee</span></span><span class="z-punctuation z-terminator z-rule z-css">;</span> <span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Contrast ratio: 11.06:1
</span></span><span class="z-source z-scss"> <span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss">
</span><span class="z-source z-scss"><span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Apply light theme variables by default.
</span></span><span class="z-source z-scss"><span class="z-meta z-selector z-css"><span class="z-entity z-other z-pseudo-class z-css"><span class="z-punctuation z-definition z-entity z-css">:</span>root</span></span> <span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-meta z-function-call z-sass"><span class="z-variable z-function z-sass"><span class="z-keyword z-control z-at-rule z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>include</span> theme-variables</span><span class="z-meta z-function-call z-arguments z-sass"><span class="z-punctuation z-definition z-group z-begin z-sass">(</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>light<span class="z-punctuation z-definition z-string z-end z-css">'</span></span><span class="z-punctuation z-definition z-group z-end z-sass">)</span></span><span class="z-punctuation z-terminator z-rule z-sass">;</span></span>
</span><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss">
</span><span class="z-source z-scss"><span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Apply dark theme variables when dark theme is explicitly set.
</span></span><span class="z-source z-scss"><span class="z-meta z-selector z-css"><span class="z-meta z-attribute-selector z-css"><span class="z-punctuation z-definition z-entity z-css">[</span><span class="z-entity z-other z-attribute-name z-css">data-theme</span><span class="z-keyword z-operator z-attribute-selector z-css">=</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>dark<span class="z-punctuation z-definition z-string z-end z-css">'</span></span><span class="z-punctuation z-definition z-entity z-css">]</span></span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-meta z-function-call z-sass"><span class="z-variable z-function z-sass"><span class="z-keyword z-control z-at-rule z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>include</span> theme-variables</span><span class="z-meta z-function-call z-arguments z-sass"><span class="z-punctuation z-definition z-group z-begin z-sass">(</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>dark<span class="z-punctuation z-definition z-string z-end z-css">'</span></span><span class="z-punctuation z-definition z-group z-end z-sass">)</span></span><span class="z-punctuation z-terminator z-rule z-sass">;</span></span>
</span><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss">
</span><span class="z-source z-scss"><span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> Apply dark theme variables when user's system prefers dark mode
</span></span><span class="z-source z-scss"><span class="z-comment z-line z-double-slash z-sass"><span class="z-punctuation z-definition z-comment z-css">//</span> and the theme is not explicitly set to light.
</span></span><span class="z-source z-scss"><span class="z-meta z-at-rule z-media z-css"><span class="z-keyword z-control z-at-rule z-media z-css"><span class="z-punctuation z-definition z-keyword z-css">@</span>media</span> <span class="z-punctuation z-definition z-group z-begin z-css">(</span>prefers<span class="z-keyword z-operator z-sass">-</span><span class="z-support z-type z-property-name z-media z-css">color</span>-scheme<span class="z-punctuation z-separator z-key-value z-css">:</span> dark<span class="z-punctuation z-definition z-group z-end z-css">)</span> </span><span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"><span class="z-meta z-selector z-css"><span class="z-entity z-other z-pseudo-class z-css"> <span class="z-punctuation z-definition z-entity z-css">:</span>root</span></span><span class="z-meta z-selector z-css"><span class="z-meta z-function-call z-css"><span class="z-entity z-other z-pseudo-class z-css"><span class="z-punctuation z-definition z-entity z-css">:</span>not</span><span class="z-meta z-group z-css"><span class="z-punctuation z-definition z-group z-begin z-css">(</span><span class="z-meta z-selector z-css"><span class="z-meta z-attribute-selector z-css"><span class="z-punctuation z-definition z-entity z-css">[</span><span class="z-entity z-other z-attribute-name z-css">data-theme</span><span class="z-keyword z-operator z-attribute-selector z-css">=</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>light<span class="z-punctuation z-definition z-string z-end z-css">'</span></span><span class="z-punctuation z-definition z-entity z-css">]</span></span></span><span class="z-punctuation z-definition z-group z-end z-css">)</span></span></span></span> <span class="z-punctuation z-section z-property-list z-begin z-css">{</span>
</span><span class="z-source z-scss"> <span class="z-meta z-function-call z-sass"><span class="z-variable z-function z-sass"><span class="z-keyword z-control z-at-rule z-sass"><span class="z-punctuation z-definition z-keyword z-sass">@</span>include</span> theme-variables</span><span class="z-meta z-function-call z-arguments z-sass"><span class="z-punctuation z-definition z-group z-begin z-sass">(</span><span class="z-string z-quoted z-single z-css"><span class="z-punctuation z-definition z-string z-begin z-css">'</span>dark<span class="z-punctuation z-definition z-string z-end z-css">'</span></span><span class="z-punctuation z-definition z-group z-end z-sass">)</span></span><span class="z-punctuation z-terminator z-rule z-sass">;</span></span>
</span><span class="z-source z-scss"> <span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span><span class="z-source z-scss"><span class="z-punctuation z-section z-property-list z-end z-css">}</span>
</span></code></pre><p>Modify the colours to your taste. Once you’re satisfied, update the <code>skin</code> variable to match your filename.<p>Remember to consider the accessibility of the colours you choose. Here’s a link that can help you: <a class=external href=https://webaim.org/resources/contrastchecker/>WebAIM: Contrast Checker</a>. The background of the light theme is <code>#fff</code>, and the dark one is <code>#1f1f1f</code>.</section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/customise-tabi/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/customise-tabi/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/faq-languages/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Lost in Translation? Not with tabi’s Multilingual Capabilities</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/comments/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Add comments to your posts with these 4 comment systems</div></nav></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Toggle Table of Contents" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#default-theme>Default theme</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#teal>Teal</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#lavender>Lavender</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#red>Red</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#mint>Mint</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#blue>Blue</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#indigo-ingot>Indigo Ingot</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#monochrome>Monochrome</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-orange>Low contrast orange</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-peach>Low contrast peach</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#low-contrast-pink>Low contrast pink</a><li><a href=https://welpo.github.io/tabi/blog/customise-tabi/#create-your-own-skin>Create your own skin</a></ul></ul></div></div></div><a title="Go to the top of the page" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink