Saltar al contenido principal

Modo oscuro

OmniBuy soporta modo oscuro nativo en toda la tienda. El visitante activa el tema oscuro desde el interruptor del header, y la tienda respeta automáticamente la preferencia prefers-color-scheme del dispositivo.

Cómo funciona​

  • El interruptor del header agrega la clase .dark a <html> (vía el store de tema) y persiste la preferencia; también respeta prefers-color-scheme en la primera visita.
  • El tema define su paleta oscura en un bloque de tokens .dark { --color-*: … }. Los componentes consumen esos tokens con var(--color-*), así que la mayoría del tema se voltea automáticamente al activar dark.
  • Cada sección puede además definir colores específicos para modo oscuro (bg_color_dark, text_color_dark, etc.).
  • Si no se configuran colores oscuros, la sección usa los colores por defecto del tema activo.
  • El logo puede cambiar: configura logo_dark en el header para usar un logo alternativo.

Dark por tema​

Cada tema declara su propia paleta oscura:

  • dawn: dark de tono slate/azul (base #0F172A).
  • olive-luxe: dark cálido propio (base casi-negra cálida + off-white, acento olive aclarado), pensado para alto contraste.

Un tema habilita dark definiendo el bloque .dark con sus tokens. Si un tema no lo define, el interruptor no tiene efecto visual sobre los tokens (solo lo hardcodeado por componentes).

Configuración por sección​

Muchas secciones aceptan campos con sufijo _dark para personalizar colores en modo oscuro:

CampoDescripción
bg_color_darkColor de fondo en modo oscuro
text_color_darkColor de texto en modo oscuro
content_background_darkFondo del contenedor interno (dark)
logo_darkLogo alternativo para el header en modo oscuro

Configuración del header​

CampoTipoDefaultDescripción
logoimage—Logo modo claro
logo_darkimage—Logo modo oscuro (si está vacío usa el logo normal con filtro invertido)
bg_colorcolor#FFFFFFFondo header claro
fg_colorcolor#0F172ATexto header claro

Ejemplo​

{
  "header": {
    "logo": "/uploads/logo-light.svg",
    "logo_dark": "/uploads/logo-dark.svg",
    "bg_color": "#FFFFFF",
    "fg_color": "#0F172A"
  },
  "newsletter": {
    "background_color": "#0F172A",
    "background_color_dark": "#1E293B",
    "text_color": "#FFFFFF"
  }
}