> ## Content Index > Fetch the complete content index at: https://vanta-es.planethemes.com/llms.txt > Use this file to discover other available public pages before exploring further. # Lo que aprendimos convirtiendo un tema de Ghost en un producto - URL: https://vanta-es.planethemes.com/ghost-theme-into-a-product/ - Published: 2026-09-25T21:34:39.000Z - Updated: 2026-09-25T21:34:39.000Z - Description: Dark mode con tokens, cada texto traducido, 18 ajustes en Admin y un bug de CSS de una línea: lo que nos enseñó lanzar Vanta como tema pago de Ghost. - Author: Planet Themes - Tags: Novedades Un tema que hace andar tu propio blog y un tema por el que paga gente que no conocés son productos distintos. Construyendo Vanta, el tema de Ghost sobre el que corre este sitio, el diseño terminó siendo la parte más chica del trabajo. Lo que más pesó fue lo que no luce: un dark mode armado sobre tokens, cada texto traducible, cada opción en Ghost Admin y un bug de CSS que sobrevivió dos versiones. ## El dark mode es un problema de tokens, no un filtro El dark mode más rápido es un filtro o una segunda hoja de estilos. Las dos cosas se rompen en cuanto el que publica cambia el color de acento o mete una captura de pantalla. Vanta, en cambio, declara cada color de superficie y de texto como una custom property de CSS y después redefine solo esas propiedades en cada modo: ```css html[data-theme="dark"], html:not([data-theme="light"]) { --color-bg-site: #090d16; --color-text-primary: #f8fafc; --color-text-secondary: #94a3b8; } html[data-theme="light"] { --color-bg-site: #ffffff; --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-accent-cyan-text: #0e7490; } ``` Los componentes nunca hablan de oscuro o claro; solo usan `var(--color-text-secondary)`. La última línea muestra por qué importa. Nuestro acento cian pasa el contraste sobre fondo oscuro pero no sobre blanco, así que el modo claro usa un cian más oscuro solo para texto, y no hubo que tocar ningún componente. Si querés la versión larga de esta idea, escribimos aparte sobre [design tokens en tres niveles](https://vanta-es.planethemes.com/design-tokens-at-scale/). La otra mitad es el timing. Un script inline mínimo en el `` elige el modo antes del primer pintado, así nadie ve un flash con los colores equivocados. Si el lector eligió con el toggle, gana esa elección y queda guardada en el navegador. Si no, Vanta sigue la configuración del sistema. ## Traducir un tema es encontrar cada texto Los temas de Ghost se traducen con el helper `{{t}}` y archivos de idioma en JSON. Envolver el texto visible es la parte fácil. Vanta 1.0.2 salió con la interfaz traducida a 13 idiomas, y aun así en la 1.0.3 encontramos 20 textos en inglés. Eran todos invisibles: atributos `aria-label` en las herramientas de lectura y los botones para compartir, y los tooltips `title` del lightbox de imágenes. Alguien con lector de pantalla en un sitio en español habría escuchado inglés. Los encontró una búsqueda bien aburrida de labels que empiezan con mayúscula y no están envueltos en `{{t}}`: ```bash grep -rn 'aria-label="[A-Z]' partials/*.hbs *.hbs ``` Dos hábitos lo vuelven manejable. Las traducciones fuente viven en una sola carpeta y el build las combina con las traducciones compartidas de temas de Ghost, así nadie edita archivos generados a mano. Y cada label nuevo pasa por `{{t}}` desde el primer commit, no en una pasada de limpieza. ## Cada opción va en Ghost Admin Un comprador que tiene que editar un archivo `.hbs` para cambiar el título de la home le va a escribir a soporte o va a pedir el reembolso. Vanta expone 18 ajustes en Ghost Admin: texto del hero, layout del feed, textos del newsletter, el toggle de tema, el logo para dark mode y cada herramienta de lectura. Ghost le permite a un tema 20 ajustes personalizados, así que el límite obliga a elegir. Dejamos interruptores para lo que el que publica prende o apaga, y el estilo fino quedó para Code Injection. ## El bug de CSS de una línea que sobrevivió dos versiones De este es del que menos orgullosos estamos. El contenedor principal del contenido usaba un shorthand de padding: ```css .site-main { flex-grow: 1; padding: 40px 0 80px; } ``` Ese `0` también ponía en cero el margen horizontal que se suponía que aportaba otra clase. En desktop no lo notás nunca, porque el contenido va en una columna centrada. En el celular, el texto iba de borde a borde en cada post y cada página. Salió en la 1.0.1 y la 1.0.2, y recién lo vimos sacando capturas de 390 píxeles de ancho para una ficha de marketplace. El fix define solo lo que le corresponde a esa regla: ```css .site-main { flex-grow: 1; padding-top: 40px; padding-bottom: 80px; } ``` La lección no es sobre los shorthands de CSS. Mirá contenido real en ancho de celular antes de cada release, no solo la home. ## La parte que no luce: licencia, créditos y documentación El zip del tema salió primero con el archivo de licencia MIT heredado del repositorio del que se hizo el fork. Ese archivo decía que los compradores podían redistribuir el tema, mientras que nuestros términos decían que no. La versión 1.0.3 lo corrigió: una licencia comercial alineada con los términos, un `CREDITS.md` que conserva los avisos de los scripts open source que incluimos, y documentación dentro de la descarga y online. Nada de eso se ve en una captura, y todo es parte del producto. Si querés ver cómo queda en la práctica, lo estás leyendo: este blog corre sobre Vanta, el primer tema de PlanetThemes. El tema cuesta USD 69, pago único, en [planethemes.com/vanta](https://planethemes.com/es/vanta/?ref=vanta.planethemes.com) e incluye 6 meses de soporte por email y actualizaciones gratis durante toda la serie 1.x. La [documentación](https://planethemes.com/vanta/docs/?ref=vanta.planethemes.com) es pública. ## Preguntas frecuentes ### ¿Vanta respeta el dark mode del sistema del lector? Sí. En la primera visita, Vanta sigue la configuración clara u oscura del sistema del lector. Si elige con el toggle del header, esa elección tiene prioridad y queda guardada en el navegador. ### ¿Cuántos idiomas soporta Vanta? La interfaz está traducida a 13 idiomas, entre ellos español, alemán, francés, portugués de Brasil y chino. Vanta usa el idioma configurado en los ajustes generales de Ghost. ### ¿Puedo cambiar los ajustes de Vanta sin editar código? Sí. Vanta tiene 18 ajustes en Ghost Admin, en Settings, Design and branding, Customize. Cubren el hero, el layout del feed, los textos del newsletter, el toggle de tema y las herramientas de lectura. ### ¿Cuánto cuesta Vanta? Vanta cuesta USD 69, pago único. Incluye 6 meses de soporte por email y actualizaciones gratis durante toda la serie 1.x.