deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-11-23 02:00:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
tabi/es/blog/customise-tabi/index.html
GitHub Actions f1040b2aa6 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-11-22 16:30:18 +00:00

36 lines
No EOL
43 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.

<!doctype html><html lang=es><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 • Personaliza el color de tabi y el tema predeterminado</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="Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único." name=description><meta content="Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único." property=og:description><meta content="Personaliza el color de tabi y el tema predeterminado" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/customise-tabi/social_cards/es_blog_customise_tabi.jpg?h=76cd354410c35b900d01" 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/es_blog_customise_tabi.jpg?h=76cd354410c35b900d01" 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/es/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><script defer src=https://welpo.github.io/tabi/js/lunr/lunrStemmerSupport.min.js></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunr.es.min.js></script><body><a href=#main-content id=skip-link>Saltar al contenido</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/es/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/archive/>archivo </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/tags/>etiquetas </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/projects/>proyectos </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Haz clic o usa $SHORTCUT para abrir la búsqueda" class="search-icon interactive-icon" title="Haz clic o usa $SHORTCUT para abrir la búsqueda" 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="Selección de idioma" title="Selección de idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Español<a aria-label=English href=https://welpo.github.io/tabi/blog/customise-tabi/ lang=en role=menuitem>English</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="Cambiar a modo oscuro" title="Cambiar a modo oscuro/claro" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restablecer modo a configuración predeterminada" class="theme-resetter arrow" title="Restablecer modo a configuración predeterminada" 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">Personaliza el color de tabi y el tema predeterminado</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/es/blog/customise-tabi/></a><ul class=meta><li><time class=dt-published datetime=2023-08-09>9 ago 2023</time><li title="965 palabras"><span aria-hidden=true class=separator>•</span>5 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetas: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/funcionalidad/>funcionalidad</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2024-09-12>Actualizado el 12 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.es.md>Ver cambios</a></ul><div class=toc-container><h3>Tabla de contenido</h3><ul><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#tema-predeterminado>Tema predeterminado</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#aguamarina>Aguamarina</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#lavanda>Lavanda</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#rojo>Rojo</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#menta>Menta</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#azul>Azul</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#lingote-indigo>Lingote índigo</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#monocromatico>Monocromático</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#naranja-bajo-contraste>Naranja (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#melocoton-bajo-contraste>Melocotón (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#rosa-bajo-contraste>Rosa (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#crea-tu-propia-skin>Crea tu propia skin</a></ul></ul></div><p class=p-summary hidden>Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único.<section class="e-content body"><p>tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminado (oscuro o claro) y eligiendo el color principal para el tema (“skin”).<h2 id=tema-predeterminado><a aria-label="Anchor link for: tema-predeterminado" class="header-anchor no-hover-padding" href=#tema-predeterminado><span aria-hidden=true class=link-icon></span></a> Tema predeterminado</h2><p>Usa <code>default_theme = "dark"</code> para establecer el tema oscuro como predeterminado, o <code>default_theme = "light"</code> para establecer el tema claro como predeterminado.<p>Establecer <code>default_theme = ""</code> (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro).<p>Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el <code>theme_switcher</code> en <code>config.toml</code> y establecer tu tema preferido (<code>light</code> o <code>dark</code>) como el <code>default_theme</code>.<p>Por ejemplo, para tener un tema oscuro permanente:<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 te gusta el aguamarina? ¡No hay problema! tabi tiene 12 skins (pieles) para elegir. Si ninguna de estas te convence, puedes <a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#crea-tu-propia-skin>crear tu propia skin</a>.<p>Una skin es un archivo CSS con dos variables: el color principal para el tema claro y el color principal para el tema oscuro.<p>Activar una skin es tan fácil como establecer la variable <code>skin</code> en tu <code>config.toml</code> con el nombre de la skin. Por ejemplo:<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>Echa un vistazo a las pieles disponibles a continuación.<p><strong>Haz clic en las imágenes</strong> para cambiar entre los temas oscuro y claro.<hr><h3 id=aguamarina><a aria-label="Anchor link for: aguamarina" class="header-anchor no-hover-padding" href=#aguamarina><span aria-hidden=true class=link-icon></span></a> Aguamarina</h3><p>La skin predeterminada. Si la variable <code>skin</code> no está configurada (o es igual a <code>"teal"</code>), este es el aspecto de tabi:<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-7992 type=checkbox><label class=image-label for=toggle-img-7992><div class=image-default><img alt="skin aguamarina en tema claro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/teal_light.webp?h=9dddca07a4e6fe20ef55" loading=lazy></div> <div class=image-toggled><img alt="skin aguamarina en tema oscuro" 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-70338 type=checkbox><label class=image-label for=toggle-img-70338><div class=image-default><img alt="skin lavanda en tema claro" 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 tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lavender_dark.webp?h=b3551cd0429844a258f9" loading=lazy></div></label></div><p>Aplica esta skin con <code>skin = "lavender"</code>.<hr><h3 id=rojo><a aria-label="Anchor link for: rojo" class="header-anchor no-hover-padding" href=#rojo><span aria-hidden=true class=link-icon></span></a> Rojo</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-4611 type=checkbox><label class=image-label for=toggle-img-4611><div class=image-default><img alt="skin rojo en tema claro" 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 rojo en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/red_dark.webp?h=073bc524a72ee107f29a" loading=lazy></div></label></div><p>Cambia a esta skin con la configuración <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 hecha por 🅿️.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-91050 type=checkbox><label class=image-label for=toggle-img-91050><div class=image-default><img alt="skin menta en tema claro" 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 en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/mint_dark.webp?h=e548695130d05dd897cb" loading=lazy></div></label></div><p>Actívala con <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>Inspirada en la temporada de florecimiento de los cerezos en Japón.<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-62710 type=checkbox><label class=image-label for=toggle-img-62710><div class=image-default><img alt="skin sakura en tema claro" 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 tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/sakura_dark.webp?h=e7030686bd18c70d76b7" loading=lazy></div></label></div><p>Para activar esta skin, ajusta <code>skin = "sakura"</code>.<hr><h3 id=azul><a aria-label="Anchor link for: azul" class="header-anchor no-hover-padding" href=#azul><span aria-hidden=true class=link-icon></span></a> Azul</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-26135 type=checkbox><label class=image-label for=toggle-img-26135><div class=image-default><img alt="skin azul en tema claro" 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 azul en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/blue_dark.webp?h=a43d11f5ae6b7577426d" loading=lazy></div></label></div><p>Para lograr esta apariencia, establece <code>skin = "blue"</code>.<hr><h3 id=lingote-indigo><a aria-label="Anchor link for: lingote-indigo" class="header-anchor no-hover-padding" href=#lingote-indigo><span aria-hidden=true class=link-icon></span></a> Lingote índigo</h3><p><em>Índigo</em> por el azul (en el tema claro) y <em>lingote</em> por el oro (en el tema oscuro).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-58550 type=checkbox><label class=image-label for=toggle-img-58550><div class=image-default><img alt="skin lingote índigo en tema claro" 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 lingote índigo en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/indigo_ingot_dark.webp?h=f0eacc0b166e6ea87133" loading=lazy></div></label></div><p>Para activar esta skin, usa <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>Inspirada en los colores de la Unidad-01 de Evangelion (en el tema oscuro) y el EVA-02 (en el tema claro).<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-39282 type=checkbox><label class=image-label for=toggle-img-39282><div class=image-default><img alt="skin evangelion en tema claro" 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 tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/evangelion_dark.webp?h=009583ef6e5234ef19bd" loading=lazy></div></label></div><p>Actívala con <code>skin = "evangelion"</code>.<hr><h3 id=monocromatico><a aria-label="Anchor link for: monocromatico" class="header-anchor no-hover-padding" href=#monocromatico><span aria-hidden=true class=link-icon></span></a> Monocromático</h3><div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-30794 type=checkbox><label class=image-label for=toggle-img-30794><div class=image-default><img alt="skin monocromático en tema claro" 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ático en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/monochrome_dark.webp?h=5cffd0a7cece0b18c999" loading=lazy></div></label></div><p>Si te gusta este look, usa <code>skin = "monochrome"</code>.<hr><h3 id=naranja-bajo-contraste><a aria-label="Anchor link for: naranja-bajo-contraste" class="header-anchor no-hover-padding" href=#naranja-bajo-contraste><span aria-hidden=true class=link-icon></span></a> Naranja (bajo contraste)</h3><p><strong>¡ADVERTENCIA!</strong> El tema claro de esta skin podría tener <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>poco contraste</a>, afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-48194 type=checkbox><label class=image-label for=toggle-img-48194><div class=image-default><img alt="skin naranja de bajo contraste en tema claro" 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 naranja de bajo contraste en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_orange_dark.webp?h=d4c5f19987fe7a08887c" loading=lazy></div></label></div><p>Para activarla, configura <code>skin = "lowcontrast_orange"</code>.<hr><h3 id=melocoton-bajo-contraste><a aria-label="Anchor link for: melocoton-bajo-contraste" class="header-anchor no-hover-padding" href=#melocoton-bajo-contraste><span aria-hidden=true class=link-icon></span></a> Melocotón (bajo contraste)</h3><p><strong>¡ADVERTENCIA!</strong> El tema claro de esta skin podría tener <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>poco contraste</a>, afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-18906 type=checkbox><label class=image-label for=toggle-img-18906><div class=image-default><img alt="skin melocotón de bajo contraste en tema claro" 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 melocotón de bajo contraste en tema oscuro" 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> para usar esta skin.<hr><h3 id=rosa-bajo-contraste><a aria-label="Anchor link for: rosa-bajo-contraste" class="header-anchor no-hover-padding" href=#rosa-bajo-contraste><span aria-hidden=true class=link-icon></span></a> Rosa (bajo contraste)</h3><p><strong>¡ADVERTENCIA!</strong> El tema claro de esta skin podría tener <a class=external href=https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html>poco contraste</a>, afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)<div class="image-toggler-container full-width"><input class=image-toggler-toggle id=toggle-img-64938 type=checkbox><label class=image-label for=toggle-img-64938><div class=image-default><img alt="skin rosa de bajo contraste en tema claro" 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 bajo contraste en tema oscuro" src="https://welpo.github.io/tabi/blog/customise-tabi/skins/lowcontrast_pink_dark.webp?h=8ad0c5e6e6052c0fb825" loading=lazy></div></label></div><p>Para usar estos colores, asigna <code>skin = "lowcontrast_pink"</code>.<hr><h3 id=crea-tu-propia-skin><a aria-label="Anchor link for: crea-tu-propia-skin" class="header-anchor no-hover-padding" href=#crea-tu-propia-skin><span aria-hidden=true class=link-icon></span></a> Crea tu propia skin</h3><p>No estás limitado a las skins predefinidas. ¿Por qué no diseñas un aspecto único que te represente?<p>Puedes guardar tu nueva skin en cualquiera de estos dos directorios:<ol><li>Dentro del directorio del tema: <code>themes/tabi/sass/skins</code><li>Dentro del directorio principal de tu sitio: <code>sass/skins</code> (necesitarás crear esta carpeta)</ol><p>Crea un nuevo archivo <code>.scss</code> (por ejemplo, <code>tu_skin.scss</code>) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es 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-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>Modifica los colores a tu gusto. Una vez que estés satisfecho, actualiza la variable <code>skin</code> para que coincida con el nombre de tu archivo.<p>Recuerda tener en cuenta la accesibilidad de los colores que elijas. Aquí tienes un enlace que te puede ayudar: <a class=external href=https://webaim.org/resources/contrastchecker/>WebAIM: Contrast Checker</a>. El fondo del tema claro es <code>#fff</code>, y el del tema oscuro <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="Me gusta esta publicación" title="Me gusta esta publicación" 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=Siguiente href=https://welpo.github.io/tabi/es/blog/faq-languages/><span class=arrow>←</span> Siguiente</a><p aria-hidden=true id=left_title>¿Lost in Translation? Explora las capacidades multilingües de tabi</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/es/blog/comments/>Anterior <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Añade comentarios a tus publicaciones con estas 4 plataformas</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 tabla de contenidos" 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/es/blog/customise-tabi/#tema-predeterminado>Tema predeterminado</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#skins>Skins</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#aguamarina>Aguamarina</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#lavanda>Lavanda</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#rojo>Rojo</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#menta>Menta</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#sakura>Sakura</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#azul>Azul</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#lingote-indigo>Lingote índigo</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#evangelion>Evangelion</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#monocromatico>Monocromático</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#naranja-bajo-contraste>Naranja (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#melocoton-bajo-contraste>Melocotón (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#rosa-bajo-contraste>Rosa (bajo contraste)</a><li><a href=https://welpo.github.io/tabi/es/blog/customise-tabi/#crea-tu-propia-skin>Crea tu propia skin</a></ul></ul></div></div></div><a title="Ir al inicio 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> Copiado! </span><span class=hidden id=copy-init> Copiar código al portapapeles </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/es/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/es/about/> sobre mí </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/privacy/> política de privacidad </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadísticas del sitio </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del sitio </a></ul> </small></nav><div class=credits><small> Impulsado por <a href=https://www.getzola.org>Zola</a> y <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Código del sitio </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>Buscar</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=Buscar… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Borrar búsqueda" 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 hay resultados</span><span id=one_results> $NUMBER resultado</span><span id=many_results> $NUMBER resultados</span><span id=two_results> $NUMBER resultados</span><span id=few_results> $NUMBER resultados</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink