deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-11 07:46:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/ca/blog/customise-tabi/index.html
GitHub Actions bf8da8a99d Deploy welpo/tabi to welpo/tabi:gh-pages
2025-10-04 11:14:46 +00:00

35 lines
No EOL
40 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=ca><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 • Personalitza el color de tabi i el tema per defecte</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=3716ab3457d2dd050b3c" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic." name=description><meta content="Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic." property=og:description><meta content="Personalitza el color de tabi i el tema per defecte" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/customise-tabi/social_cards/ca_blog_customise_tabi.jpg?h=668a89f17127e7598bbc" 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/ca_blog_customise_tabi.jpg?h=668a89f17127e7598bbc" 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=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/customise-tabi/ hreflang=ca 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=https://welpo.github.io/tabi/ca/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><body><a href=#main-content id=skip-link>Saltar al contingut</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/ca/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/archive/>arxiu </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/tags/>etiquetes </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/projects/>projectes </a><li class=menu-icons-container><ul class=menu-icons-group><li class=language-switcher><details class=dropdown><summary aria-label="Selecció d'idioma" title="Selecció d'idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Català<a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/customise-tabi/ lang=ar role=menuitem>العربية</a><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=English href=https://welpo.github.io/tabi/blog/customise-tabi/ lang=en role=menuitem>English</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Canvia el mode obscur" title="Canvia el mode obscur/clar" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restableix el mode al valor predeterminat" class="theme-resetter arrow" title="Restableix el mode al valor predeterminat" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Personalitza el color de tabi i el tema per defecte</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/ca/blog/customise-tabi/></a><ul class=meta><li><time class=dt-published datetime=2023-08-09>9 d’ag. 2023</time><li title="945 paraules"><span aria-hidden=true class=separator>•</span>5 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetes: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/funcionalitat/>funcionalitat</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2024-09-12>Actualitzat el 12 de set. 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.ca.md>Veure canvis</a></ul><div class=toc-container><h3>Taula de contingut</h3><ul><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#tema-per-defecte>Tema per defecte</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#aiguamarina>Aiguamarina</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#lavanda>Lavanda</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#vermell>Vermell</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#menta>Menta</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#blau>Blau</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#lingot-indigo>Lingot indigo</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#monocromatic>Monocromàtic</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#taronja-baix-contrast>Taronja (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#pressec-baix-contrast>Préssec (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#rosa-baix-contrast>Rosa (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#crea-la-teva-propia-skin>Crea la teva pròpia skin</a></ul></ul></div><p class=p-summary hidden>Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic.<section class="e-content body"><p>tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema (“skin”).<h2 id=tema-per-defecte><a aria-label="Anchor link for: tema-per-defecte" class="header-anchor no-hover-padding" href=#tema-per-defecte><span aria-hidden=true class=link-icon></span></a> Tema per defecte</h2><p>Utilitza <code>default_theme = "dark"</code> per establir el tema fosc com a predeterminat, o <code>default_theme = "light"</code> per establir el tema clar com a predeterminat.<p>Establir <code>default_theme = ""</code> (o comentar la variable) seguirà la preferència del sistema de l’usuari (mode clar o fosc).<p>Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el <code>theme_switcher</code> a <code>config.toml</code> i establir el teu tema preferit (<code>light</code> o <code>dark</code>) a <code>default_theme</code>.<p>Per exemple, per tenir un tema fosc permanent:<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>No t’agrada l’aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d’aquestes t’agrada, pots <a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#crea-la-teva-propia-skin>crear la teva pròpia skin</a>.<p>Una skin és un arxiu CSS amb dues variables: el color principal per al tema clar i el color principal per al tema fosc.<p>Activar una skin és tan fàcil com establir la variable <code>skin</code> a la teva <code>config.toml</code> amb el nom de la skin. Per exemple:<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>Fes una ullada a les skins disponibles a continuació.<p><strong>Fes clic a les imatges</strong> per canviar entre els temes fosc i clar.<hr><h3 id=aiguamarina><a aria-label="Anchor link for: aiguamarina" class="header-anchor no-hover-padding" href=#aiguamarina><span aria-hidden=true class=link-icon></span></a> Aiguamarina</h3><p>La skin per defecte. Si la variable <code>skin</code> no està configurada (o és igual a <code>"teal"</code>), aquest és l’aspecte de tabi:<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-60998 type=checkbox><label class=image-label for=toggle-img-60998><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=lavanda><a aria-label="Anchor link for: lavanda" class="header-anchor no-hover-padding" href=#lavanda><span aria-hidden=true class=link-icon></span></a> Lavanda</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-44499 type=checkbox><label class=image-label for=toggle-img-44499><div class=image-default><img alt="skin lavanda en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_light.webp?h=bc19bff6623d41e30062" loading=lazy></div> <div class=image-toggled><img alt="skin lavanda en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_dark.webp?h=b3551cd0429844a258f9" loading=lazy></div></label></div><p>Per aplicar-la, utilitza <code>skin = "lavender"</code>.<hr><h3 id=vermell><a aria-label="Anchor link for: vermell" class="header-anchor no-hover-padding" href=#vermell><span aria-hidden=true class=link-icon></span></a> Vermell</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-59176 type=checkbox><label class=image-label for=toggle-img-59176><div class=image-default><img alt="skin vermell en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/red_light.webp?h=72be070e9ca15d0a0d25" loading=lazy></div> <div class=image-toggled><img alt="skin vermell en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/red_dark.webp?h=073bc524a72ee107f29a" loading=lazy></div></label></div><p>Canvia a aquesta skin establint <code>skin = "red"</code>.<hr><h3 id=menta><a aria-label="Anchor link for: menta" class="header-anchor no-hover-padding" href=#menta><span aria-hidden=true class=link-icon></span></a> Menta</h3><p>Una skin dissenyada per 🅿️.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-74887 type=checkbox><label class=image-label for=toggle-img-74887><div class=image-default><img alt="skin menta amb tema clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/mint_light.webp?h=d5560108b93f338b3edf" loading=lazy></div> <div class=image-toggled><img alt="skin menta amb tema fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/mint_dark.webp?h=e548695130d05dd897cb" loading=lazy></div></label></div><p>Activa-la amb <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>Inspirat per la temporada de floració dels cirerers al Japó.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-39950 type=checkbox><label class=image-label for=toggle-img-39950><div class=image-default><img alt="skin sakura en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/sakura_light.webp?h=72be070e9ca15d0a0d25" loading=lazy></div> <div class=image-toggled><img alt="skin sakura en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/sakura_dark.webp?h=e7030686bd18c70d76b7" loading=lazy></div></label></div><p>Per habilitar aquesta skin, ajusta <code>skin = "sakura"</code>.<hr><h3 id=blau><a aria-label="Anchor link for: blau" class="header-anchor no-hover-padding" href=#blau><span aria-hidden=true class=link-icon></span></a> Blau</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-70424 type=checkbox><label class=image-label for=toggle-img-70424><div class=image-default><img alt="skin blau en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/blue_light.webp?h=db641150bb52083af3d6" loading=lazy></div> <div class=image-toggled><img alt="skin blau en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/blue_dark.webp?h=a43d11f5ae6b7577426d" loading=lazy></div></label></div><p>Per activar aquesta aparença, estableix <code>skin = "blue"</code>.<hr><h3 id=lingot-indigo><a aria-label="Anchor link for: lingot-indigo" class="header-anchor no-hover-padding" href=#lingot-indigo><span aria-hidden=true class=link-icon></span></a> Lingot indigo</h3><p><em>Indigo</em> pel blau (en el tema clar) i <em>lingot</em> pel daurat (en el tema fosc).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-40116 type=checkbox><label class=image-label for=toggle-img-40116><div class=image-default><img alt="skin lingot indigo en mode clar" 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="skin lingot indigo en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/indigo_ingot_dark.webp?h=f0eacc0b166e6ea87133" loading=lazy></div></label></div><p>Per activar aquest tema, utilitza <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>Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-61873 type=checkbox><label class=image-label for=toggle-img-61873><div class=image-default><img alt="skin evangelion en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/evangelion_light.webp?h=a9278b6a7c6997efafd2" loading=lazy></div> <div class=image-toggled><img alt="skin evangelion en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/evangelion_dark.webp?h=009583ef6e5234ef19bd" loading=lazy></div></label></div><hr><h3 id=monocromatic><a aria-label="Anchor link for: monocromatic" class="header-anchor no-hover-padding" href=#monocromatic><span aria-hidden=true class=link-icon></span></a> Monocromàtic</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-13039 type=checkbox><label class=image-label for=toggle-img-13039><div class=image-default><img alt="skin monocromàtic en mode clar" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/monochrome_light.webp?h=fe19d069545a1e11a770" loading=lazy></div> <div class=image-toggled><img alt="skin monocromàtic en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/monochrome_dark.webp?h=5cffd0a7cece0b18c999" loading=lazy></div></label></div><p>Per aconseguir aquesta aparença, estableix <code>skin = "monochrome"</code>.<hr><h3 id=taronja-baix-contrast><a aria-label="Anchor link for: taronja-baix-contrast" class="header-anchor no-hover-padding" href=#taronja-baix-contrast><span aria-hidden=true class=link-icon></span></a> Taronja (baix contrast)</h3><p><strong>AVÍS!</strong> Aquesta skin en mode clar pot tenir <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>baix contrast</a>, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-54186 type=checkbox><label class=image-label for=toggle-img-54186><div class=image-default><img alt="skin taronja de baix contrast en mode clar" 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="skin taronja de baix contrast en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_orange_dark.webp?h=d4c5f19987fe7a08887c" loading=lazy></div></label></div><p>Per utilitzar-la, estableix <code>skin = "lowcontrast_orange"</code>.<hr><h3 id=pressec-baix-contrast><a aria-label="Anchor link for: pressec-baix-contrast" class="header-anchor no-hover-padding" href=#pressec-baix-contrast><span aria-hidden=true class=link-icon></span></a> Préssec (baix contrast)</h3><p><strong>AVÍS!</strong> Aquesta skin en mode clar pot tenir <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>baix contrast</a>, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-74359 type=checkbox><label class=image-label for=toggle-img-74359><div class=image-default><img alt="skin préssec de baix contrast en mode clar" 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="skin préssec de baix contrast en mode fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_peach_dark.webp?h=538835da12b3a4b03e45" loading=lazy></div></label></div><p>Especifica <code>skin = "lowcontrast_peach"</code> per utilitzar aquesta skin.<hr><h3 id=rosa-baix-contrast><a aria-label="Anchor link for: rosa-baix-contrast" class="header-anchor no-hover-padding" href=#rosa-baix-contrast><span aria-hidden=true class=link-icon></span></a> Rosa (baix contrast)</h3><p><strong>AVÍS!</strong> Aquesta skin en mode clar pot tenir <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>baix contrast</a>, afectant l’accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-73001 type=checkbox><label class=image-label for=toggle-img-73001><div class=image-default><img alt="skin rosa de baix contrast en tema clar" 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="skin rosa de baix contrast en tema fosc" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_pink_dark.webp?h=8ad0c5e6e6052c0fb825" loading=lazy></div></label></div><p>Per utilitzar aquests colors, assigna <code>skin = "lowcontrast_pink"</code>.<hr><h3 id=crea-la-teva-propia-skin><a aria-label="Anchor link for: crea-la-teva-propia-skin" class="header-anchor no-hover-padding" href=#crea-la-teva-propia-skin><span aria-hidden=true class=link-icon></span></a> Crea la teva pròpia skin</h3><p>No estàs limitat a les skins predefinides. Per què no crees un disseny únic que et representi?<p>Pots guardar la teva nova skin en qualsevol d’aquests dos directoris:<ol><li>Dins del directori del tema: <code>themes/tabi/sass/skins</code><li>Dins del directori principal del teu lloc: <code>sass/skins</code> (necessitaràs crear aquesta carpeta)</ol><p>Crea un nou arxiu <code>.scss</code> (per exemple, <code>la_teva_skin.scss</code>) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, “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-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>Modifica els colors al teu gust. Una vegada estiguis satisfet, actualitza la variable <code>skin</code> perquè coincideixi amb el nom del teu arxiu.<p>Recorda tenir en compte l’accesibilitat dels colors que triis. Aquí tens un enllaç que et pot ajudar: <a class=external href=https://webaim.org/resources/contrastchecker/>WebAIM: Contrast Checker</a>. El fondo del tema clar és <code>#fff</code>, i el del tema fosc <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="M'agrada aquesta publicació" title="M'agrada aquesta publicació" 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=Següent href=https://welpo.github.io/tabi/ca/blog/faq-languages/><span class=arrow>←</span> Següent</a><p aria-hidden=true id=left_title>Lost in Translation? Explora les capacitats multilingües de tabi</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/ca/blog/comments/>Anterior <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Afegeix comentaris a les teves publicacions amb aquestes 4 plataformes</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="Mostrar/ocultar la taula de continguts" 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/ca/blog/customise-tabi/#tema-per-defecte>Tema per defecte</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#aiguamarina>Aiguamarina</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#lavanda>Lavanda</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#vermell>Vermell</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#menta>Menta</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#blau>Blau</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#lingot-indigo>Lingot indigo</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#monocromatic>Monocromàtic</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#taronja-baix-contrast>Taronja (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#pressec-baix-contrast>Préssec (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#rosa-baix-contrast>Rosa (baix contrast)</a><li><a href=https://welpo.github.io/tabi/ca/blog/customise-tabi/#crea-la-teva-propia-skin>Crea la teva pròpia skin</a></ul></ul></div></div></div><a title="Vés a l'inici de la pàgina" 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> Copiat! </span><span class=hidden id=copy-init> Copia el codi al porta-retalls </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/ca/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/ca/about/> sobre mi </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/privacy/> política de privadesa </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadístiques del lloc </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del lloc </a></ul> </small></nav><div class=credits><small> Propulsat per <a href=https://www.getzola.org>Zola</a> i <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Codi del lloc </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script></footer>
Reference in a new issue View git blame Copy permalink