---
title: "Modo Oscuro en Carrd: Cómo Añadir un Alternador de Tema (Guía 2026)"
description: "Añade un alternador de modo oscuro en Carrd con CSS y JS para copiar y pegar. Evita el destello blanco, sigue el tema del sistema y recuerda la elección del usuario. Guía paso a paso."
date: 2026-01-21
categories: ["web-development"]
tags: ["carrd","css","dark-mode"]
---
import Button from "@components/widgets/Button.astro";
import Notice from "@components/widgets/Notice.astro";
import ListCheck from "@components/widgets/ListCheck.astro";
import Accordion from "@components/widgets/Accordion.astro";
import Tabs from "@components/widgets/Tabs.astro";
import Tab from "@components/widgets/Tab.astro";
import { Picture } from "astro:assets";
import imag1 from "@assets/images/24/02/carrd-back-to-top-embed.png";
El modo oscuro pasó de ser una preferencia minoritaria a una expectativa generalizada. Muchos visitantes navegan de noche con el móvil ya en modo oscuro, y una web blanca y brillante les golpea como una linterna en la cara.
Añadir un alternador de **modo oscuro en Carrd** da a los visitantes el control sobre su experiencia. Cambian a lo que resulte más cómodo para sus ojos, y el sitio recuerda su elección para la próxima vez. Esta guía trae CSS y JS listos para copiar y pegar que además evitan el destello blanco al cargar y siguen el tema del sistema hasta que el visitante toma partido.
Algunos tutoriales de Carrd:
- [Añadir un Modal Emergente a Carrd](https://www.bitdoze.com/carrd-popup-modal/)
- [Añadir Scroll Suave a Carrd](https://www.bitdoze.com/carrd-smooth-scroll/)
- [Añadir un Slider de Testimonios a Carrd](https://www.bitdoze.com/carrd-testimonial-slider/)
- [Añadir un Menú Flotante a Carrd](https://www.bitdoze.com/carrd-floating-menu/)
- [Añadir un Menú Lateral a Carrd](https://www.bitdoze.com/carrd-sidebar-menu/)
- [Análisis de Carrd.co](https://www.bitdoze.com/carrd-review/)
> Encontrarás la lista completa de plugins, temas y tutoriales de Carrd en mi web **[carrdme.com](https://carrdme.com/)**, incluidos un [widget de pestañas](https://go.carrdme.com/tabs) y un [widget de acordeón](https://go.carrdme.com/accordion) ya listos para usar.
## Por Qué Añadir Modo Oscuro a tu Sitio Carrd
Cinco razones, una línea cada una:
1. Menos fatiga visual: las interfaces oscuras son más cómodas con poca luz.
2. Ahorro de batería: en pantallas OLED los píxeles oscuros consumen menos energía.
3. Preferencia del usuario: mucha gente simplemente prefiere una interfaz oscura. Ofrecer la opción es un gesto de respeto barato.
4. Sensibilidad a la luz: algunos visitantes necesitan de verdad interfaces más oscuras, y para ellos el modo oscuro es una función de accesibilidad.
5. Expectativa moderna: todas las grandes apps ya traen un tema oscuro.
El modo oscuro ya no es una novedad. Los visitantes buscan el interruptor, y cuando no lo encuentran se van a un sitio que sí lo tenga.
## Requisitos Previos: Necesitas Carrd Pro Standard para los Embeds
Todo este tutorial funciona con el elemento Embed de Carrd. Dos cosas lo dejan resuelto antes de pegar código.
Cuenta Carrd Pro Standard o superior (los Embeds no están en el plan gratis ni en Pro Lite)
Un sitio publicado, o listo para publicar (los embeds no se renderizan en el editor)
Unos 10 minutos
Sin otras herramientas, sin paso de compilación, sin archivos externos
El elemento Embed requiere Pro Standard o superior. Pro Lite cuesta 9 $/año para 3 sitios y **no** incluye embeds. Pro Standard cuesta 19 $/año para 10 sitios (39 $/año para 25 sitios) y añade embeds, formularios, dominios personalizados y analítica. Pro Plus cuesta 49 $/año para 25 sitios con ajustes avanzados. Si solo quieres seguir la guía, [inicia la prueba Pro de 7 días](https://go.bitdoze.com/carrd). Sin tarjeta. Precios comprobados en carrd.co/pro en septiembre de 2026; revísalos antes de comprar.
La documentación de Carrd lo dice sin rodeos: el elemento Embed no muestra nada en el editor, así que tienes que publicar el sitio para verlo en acción. Si tu editor parece vacío después de pegar el código de abajo, nada está roto. Publica y luego prueba.
Para añadir un embed, haz clic en el signo `+` y elige Embed. En una página muy cargada también puedes usar el Panel de Elementos (More Actions → Elements…), añadido en agosto de 2026, para encontrar y gestionar elementos sin tener que buscarlos por todo el diseño.
Es el mismo patrón de embed con código personalizado que se usa en la guía para [añadir un aviso de cookies a tu sitio Carrd](https://www.bitdoze.com/add-cookie-notice-carrd/). Una vez has hecho un embed, el resto son trabajos de copiar y pegar.
## Cómo Funciona el Modo Oscuro en Carrd
Carrd no tiene modo oscuro integrado. Revisé de nuevo la documentación y el changelog en septiembre de 2026: sigue sin existir una función de cambio de tema. El código personalizado es el único camino.
El enfoque es el de siempre:
1. Un atributo `data-theme` en la raíz de la página (`light` o `dark`)
2. Variables CSS para los colores, intercambiadas por `[data-theme="dark"]`
3. Un botón alternador que invierte el atributo
4. `localStorage` para que la elección sobreviva a las recargas
5. `prefers-color-scheme` como valor por defecto antes de que el visitante elija nada
La mejora frente a un snippet ingenuo es el **patrón de dos embeds**. El Embed n.º 1 es un pequeño bootstrap en un embed Hidden → Head que establece `data-theme` antes de que la página se pinte. El Embed n.º 2 contiene la interfaz del alternador y el manejador del clic (Inline o Hidden → Body End).
Un embed Inline único aplica el tema desde JavaScript después del primer pintado. Los usuarios con el sistema en oscuro ven un destello blanco en cada carga. El bootstrap del head se ejecuta antes del pintado, así que el primer frame ya lleva el tema correcto.
Dos cronologías comparadas. La fila A es el enfoque de un solo embed. La fila B es el enfoque de dos embeds que usa esta guía:
Orden de resolución del tema, de mayor a menor prioridad:
1. Una elección guardada en `localStorage` bajo la clave `theme` (el visitante pulsó el alternador en algún momento)
2. La preferencia del SO/navegador vía `prefers-color-scheme: dark`
3. El modo claro como valor por defecto fijo
Las páginas más grandes aguantan bien. Los sitios con varias secciones construidos con el elemento Page de Carrd mantienen el tema automáticamente. Todo es un único documento, así que `data-theme` y `localStorage` persisten entre secciones.
Los scripts del head se ejecutan antes del pintado por especificación, así que la solución es sólida en principio. El orden exacto de inyección de Carrd aun así merece una confirmación en tu propio sitio publicado. Mira la checklist de pruebas más abajo.
## Cómo Añadir Modo Oscuro a Carrd (Paso a Paso)
Dos embeds y luego eliges uno de los tres estilos de alternador. Cada bloque de abajo se puede copiar y pegar.
### Paso 1: Añade un Embed en Head para Evitar el Destello Blanco
Haz clic en el signo `+` (o More Actions → Elements…) y añade un elemento Embed. Pon Type en Code, Style en Hidden y Location en Head.
La corrección del destello blanco necesita un embed Hidden dirigido al Head. Una configuración solo Inline lo hace imposible, porque el código Inline se renderiza en el cuerpo de la página después del pintado. Usaremos ambos estilos: Hidden → Head para el bootstrap, e Inline (o Hidden → Body End) para el alternador.
Pega esto en el campo Code:
```html
```
Qué hace:
- Lee `localStorage.theme` dentro de `try/catch`, de modo que los modos privados que lanzan error al acceder al almacenamiento no rompan la página
- Recurre a `prefers-color-scheme: dark` cuando el visitante nunca eligió un tema
- Establece `data-theme` en la raíz del documento antes del primer pintado
- Emite `color-scheme: light|dark` para que los controles de formulario nativos, las barras de scroll y el autocompletado sigan el tema (`color-scheme` está soportado en Chrome/Edge 81+, Firefox 96+, Safari 13+)
Carrd no inyecta ninguna pista de `color-scheme` en los sitios publicados. Revisé el HTML en bruto de un ejemplo publicado en septiembre de 2026: no hay nada. El snippet lo establece por sí mismo. No des por hecho que la plataforma lo hace por ti.
**Comprueba:** publica y abre el sitio en una ventana de incógnito en un equipo o móvil configurado en modo oscuro. La página debería cargar oscura sin destello blanco. Si aún ves un destello, el embed de head falta, está mal ubicado, o estás viendo una página en caché (fuerza la recarga).
### Paso 2: Añade el Embed del Alternador de Modo Oscuro
Añade un segundo elemento Embed. Pon Type en Code. Para Style, elige Inline (para ver dónde queda en el diseño) o Hidden con Location: Body End (el alternador es `position: fixed`, así que acaba en el mismo sitio de todos modos).
La captura muestra la ubicación Head del Paso 1. Para este segundo embed, elige Inline, o mantén Hidden y cambia la ubicación a Body End.
En el editor el embed sigue invisible. Publica para verlo. Luego elige uno de los tres estilos de alternador de abajo y pégalo en este segundo embed.
El bloque `` de tu opción elegida y pégala en el embed de Head del Paso 1, debajo del código existente. El botón y el `
```
Notas sobre las partes clave:
- Las transiciones solo se aplican después de que `data-theme-ready` se establezca en la raíz, así que el tema inicial no se anima.
- `document.startViewTransition` es una mejora progresiva (Chrome/Edge 111+, Firefox 144+, Safari 18+). Los navegadores sin soporte simplemente cambian al instante.
- El listener de cambio del sistema solo actúa cuando el visitante no tiene elección guardada. Una vez que pulsa el alternador, su elección manda hasta que la borre.
- Los emoji se renderizan de forma distinta en Windows y en Android antiguos. Si quieres iconos con píxeles consistentes, sustituye los caracteres `☀️` / `🌙` por formas SVG en línea de sol y luna.
**Comprueba:** pulsa el alternador y los colores deberían fundirse. Recarga y el tema debería mantenerse (`localStorage.theme` contiene `light` o `dark`). Navega con Tab hasta el botón y deberías ver el anillo de foco, con `aria-pressed` cambiando en DevTools → Elements.
### Opción 2: Interruptor en la Cabecera
Un interruptor tipo píldora que puedes colocar cerca de la cabecera. Las mismas correcciones compartidas de la Opción 1: tratamiento del texto `a:not(.button)`, transiciones limitadas a `[data-theme-ready]`, `try/catch` alrededor del almacenamiento y un listener de cambio del sistema.
Una trampa común en snippets antiguos de este patrón: `*, *::before, *::after { transition: … }`. Eso anima toda la página en el primer pintado y lastra los diseños pesados. La regla de abajo está limitada a propósito. Si toda tu página se anima al cargar, dejaste la regla de transición global.
```html
☀️🌙
```
El checkbox oculto lleva `role="switch"` y `aria-label="Toggle dark mode"`, con `aria-checked` sincronizado. Sin esa etiqueta no tiene nombre accesible.
### Opción 3: Alternador de Icono Minimalista
Un pequeño círculo con borde que intercambia sol y luna. Variables de paleta con nombres más ligeros si prefieres ese estilo. Las mismas correcciones compartidas que las otras dos.
```html
```
**Comprueba (las tres opciones):** el Tab del teclado debería llegar al alternador con un anillo de foco visible. Es la parte que la mayoría de snippets se saltan y la que hace el control usable sin ratón.
## Personalizar los Colores del Modo Oscuro en Carrd
Las variables CSS de la parte superior de la Opción 1 (y el conjunto `--page-*` de la Opción 3) son los únicos colores que necesitas tocar.
Dos bloques. Valores claros en `:root`, valores oscuros en `[data-theme="dark"]`:
```css
:root {
--dm-bg-primary: #ffffff; /* Main background */
--dm-bg-secondary: #f8fafc; /* Secondary background (cards, inputs) */
--dm-text-primary: #1e293b; /* Main text color */
--dm-text-secondary: #64748b; /* Muted text */
--dm-border: #e2e8f0; /* Border color */
--dm-accent: #3b82f6; /* Accent/link color */
}
[data-theme="dark"] {
--dm-bg-primary: #0f172a; /* Dark background */
--dm-bg-secondary: #1e293b; /* Slightly lighter dark */
--dm-text-primary: #f1f5f9; /* Light text */
--dm-text-secondary: #94a3b8; /* Muted light text */
--dm-border: #334155; /* Dark border */
--dm-accent: #60a5fa; /* Lighter accent for contrast */
}
```
Funciona en todas partes y te da control total sobre cada tema. El resto de la guía asume esta configuración.
Define cada color una vez y deja que `color-scheme` elija el ganador:
```css
:root {
--dm-bg-primary: light-dark(#ffffff, #0f172a);
--dm-bg-secondary: light-dark(#f8fafc, #1e293b);
--dm-text-primary: light-dark(#1e293b, #f1f5f9);
--dm-accent: light-dark(#3b82f6, #60a5fa);
}
```
Menos CSS, pero solo en navegadores nuevos. El alternador igualmente tiene que invertir `color-scheme` (el Paso 1 ya lo establece). Usa esto si no te importan las versiones antiguas de Safari.
Chrome 123+, Firefox 120+, Safari 17.5+ (Baseline 2024, comprobado en septiembre de 2026). Se puede usar ahora que el Paso 1 establece `color-scheme`. Mantén la versión de variables CSS si necesitas Safari antiguo.
Para más personalización CSS de copiar y pegar en Carrd, mira los [diseños personalizados de temporizador de cuenta regresiva en Carrd](https://www.bitdoze.com/es/estilos-cuenta-regresiva-carrd/).
### Consejos de Diseño para el Modo Oscuro
Prueba el contraste. El texto debe seguir siendo legible sobre el fondo oscuro. Pasa la paleta por un comprobador de contraste cuando tengas dudas.
No uses negro puro. `#000000` es duro a la vista. Usa grises oscuros como `#0f172a` o `#1e293b` en su lugar.
Aclara tu color de acento. Los colores que funcionan sobre blanco suelen verse apagados sobre oscuro. `#3b82f6` se convierte en `#60a5fa` en la paleta de arriba por exactamente esa razón.
Revisa cada sección. Recorre toda la página en ambos temas. Algunos elementos necesitarán selectores extra (siguiente sección).
Ten en cuenta las imágenes. Los logos y gráficos diseñados para fondos blancos pueden necesitar una segunda versión, un filtro o un marco sutil.
## Elementos e Imágenes Específicos de Carrd
Carrd genera selectores estructurales estables: `#wrapper`, `#main` y `.inner` están presentes en los sitios publicados (verificado en el HTML en bruto de un ejemplo publicado en septiembre de 2026). Los nombres de clase específicos de cada plantilla varían, así que los elementos rebeldes necesitan un apuntado extra.
```css
/* Target specific Carrd elements */
[data-theme="dark"] .inner,
[data-theme="dark"] .container,
[data-theme="dark"] [class*="style1"],
[data-theme="dark"] [class*="style2"] {
background-color: var(--dm-bg-primary) !important;
color: var(--dm-text-primary) !important;
}
/* Target Carrd buttons (ul.buttons > li > a.button); a:not(.button) above only covers text links */
[data-theme="dark"] .buttons .button {
background-color: var(--dm-accent) !important;
}
/* Target Carrd icons (ul.icons > li > a > svg) */
[data-theme="dark"] .icons svg {
filter: brightness(0) invert(1);
}
```
Los nombres de clase `style1`…`style5` difieren según la plantilla, y trucos como `[data-theme="dark"] .inner > * { background: transparent !important }` pueden borrar los fondos de botones y tarjetas en algunas plantillas. Prueba en la tuya. Si los botones pierden su fondo en modo oscuro, quita esa regla primero. Nada de esto es universal. Verifica cada override en tu página publicada.
Las imágenes de fondo no responden a los overrides de `background-color`. Si una sección se niega a oscurecer, la culpable es probablemente una imagen de fondo. Cámbiala, o atenúala con una capa superpuesta:
```css
[data-theme="dark"] img {
opacity: 0.9;
filter: brightness(0.95);
}
/* Or give images a subtle frame */
[data-theme="dark"] img {
border: 1px solid var(--dm-border);
border-radius: 8px;
}
```
Si tienes una cabecera sticky, espera un choque: una barra de cabecera todavía clara en una página por lo demás oscura. La guía del [sticky header para Carrd](https://www.bitdoze.com/add-stickey-header-carrd/) muestra qué selectores tocar para que la barra se oscurezca con el resto.
## Posicionar el Botón Alternador
Cambia la posición editando estas propiedades CSS en tu clase del alternador:
Abajo a la izquierda (por defecto en la Opción 1):
```css
bottom: 25px;
left: 25px;
```
Arriba a la derecha:
```css
top: 25px;
right: 25px;
```
Abajo a la derecha:
```css
bottom: 25px;
right: 25px;
```
Sobre el z-index: los snippets usan `z-index: 9999` para que el alternador flote sobre el contenido. Eso puede chocar con el botón de menú móvil y los iconos sociales de Carrd. Si el alternador tapa algo pulsable, baja el z-index o mueve el botón a la esquina opuesta. Lo mismo si además tienes un control fijo de volver arriba. Mira [nuestra guía para añadir un botón de volver arriba en Carrd](https://www.bitdoze.com/carrd-back-to-top-button/) y evita que los dos se apilen en una esquina. En diseños móviles en particular, comprueba dos veces que nada quede bajo el alternador después de [crear una barra de navegación responsive en Carrd](https://www.bitdoze.com/carrd-mobile-navbar/).
## Probar y Solucionar Problemas del Alternador de Modo Oscuro en Carrd
Los embeds no renderizan nada en el editor, así que cada comprobación de abajo se hace en el sitio publicado.
Publica y luego abre el sitio en una ventana de incógnito en un sistema configurado en oscuro: el tema se aplica sin destello blanco
Pulsa el alternador y recarga: la elección persiste en `localStorage` (clave `theme`)
La consola de DevTools está limpia (sin `Uncaught SecurityError` de `localStorage` en modo privado)
El Tab del teclado llega al alternador y el anillo de foco es visible
`aria-pressed` (o `aria-checked` en la Opción 2) cambia en el panel Elements al alternar
Sin elección guardada, cambia el tema del SO en vivo: la página lo sigue
Si algo se comporta mal:
El bootstrap del head falta, está en la ubicación equivocada (debe ser Style: Hidden, Location: Head), o estás viendo una copia en caché. Confirma que el embed existe con el estilo y la ubicación correctos, luego fuerza la recarga o prueba en una ventana privada. Verifica también una vez en tu propio sitio publicado que el código del head se ejecuta antes del pintado. El orden de inyección de Carrd merece una única comprobación de extremo a extremo, ya que el editor no te lo muestra. Si el embed de head está bien y queda un destello corto, mueve el bloque `