Theming

Personaliza la apariencia del widget para que coincida con tu marca. El widget usa CSS custom properties organizadas en categorías.

Temas predefinidos

<!-- Tema claro -->
<script data-theme="light" ...></script>

<!-- Tema oscuro -->
<script data-theme="dark" ...></script>

<!-- Automático (detecta preferencia del sistema) -->
<script data-theme="auto" ...></script>

Recomendación

El modo auto es ideal para la mayoría de sitios. Detecta automáticamente prefers-color-scheme del sistema operativo.

Todas las Variables CSS

El widget expone 50+ variables CSS que puedes personalizar:

Colores de Superficie

.neuroon-widget {
  --nrn-surface-base: 15 23 42;       /* Fondo principal */
  --nrn-surface-elevated: 30 41 59;   /* Cards, paneles */
  --nrn-surface-overlay: 51 65 85;    /* Dropdowns, modals */
  --nrn-surface-hover: 71 85 105;     /* Estados hover */
}

Variable	Dark Mode	Light Mode	Uso
`--nrn-surface-base`	`15 23 42` (#0f172a)	`255 255 255` (#ffffff)	Fondo principal
`--nrn-surface-elevated`	`30 41 59` (#1e293b)	`248 250 252` (#f8fafc)	Cards, paneles
`--nrn-surface-overlay`	`51 65 85` (#334155)	`241 245 249` (#f1f5f9)	Dropdowns
`--nrn-surface-hover`	`71 85 105` (#475569)	`226 232 240` (#e2e8f0)	Hover states

Colores de Texto

.neuroon-widget {
  --nrn-text-primary: 248 250 252;    /* Texto principal */
  --nrn-text-secondary: 226 232 240;  /* Texto secundario */
  --nrn-text-muted: 148 163 184;      /* Texto placeholder */
  --nrn-text-disabled: 100 116 139;   /* Texto inactivo */
}

Variable	Dark Mode	Light Mode	Uso
`--nrn-text-primary`	`248 250 252` (#f8fafc)	`15 23 42` (#0f172a)	Títulos, texto principal
`--nrn-text-secondary`	`226 232 240` (#e2e8f0)	`51 65 85` (#334155)	Descripciones
`--nrn-text-muted`	`148 163 184` (#94a3b8)	`100 116 139` (#64748b)	Placeholders
`--nrn-text-disabled`	`100 116 139` (#64748b)	`148 163 184` (#94a3b8)	Deshabilitado

Colores de Borde

.neuroon-widget {
  --nrn-border-default: 51 65 85;     /* Bordes normales */
  --nrn-border-emphasis: 71 85 105;   /* Bordes destacados */
  --nrn-border-subtle: 30 41 59;      /* Bordes sutiles */
}

Variable	Dark Mode	Light Mode	Uso
`--nrn-border-default`	`51 65 85` (#334155)	`226 232 240` (#e2e8f0)	Bordes normales
`--nrn-border-emphasis`	`71 85 105` (#475569)	`203 213 225` (#cbd5e1)	Bordes activos
`--nrn-border-subtle`	`30 41 59` (#1e293b)	`241 245 249` (#f1f5f9)	Separadores

Colores Semánticos

.neuroon-widget {
  --nrn-success: 16 185 129;          /* Verde (emerald-500) */
  --nrn-error: 239 68 68;             /* Rojo (red-500) */
  --nrn-warning: 251 191 36;          /* Ámbar (amber-400) */
}

Variable	Valor	Uso
`--nrn-success`	`16 185 129` (#10b981)	En stock, éxito
`--nrn-error`	`239 68 68` (#ef4444)	Sin stock, errores
`--nrn-warning`	`251 191 36` (#fbbf24)	Advertencias

Colores de Marca (Primary)

.neuroon-widget {
  --nrn-primary: 6 182 212;           /* Cyan principal (cyan-500) */
  --nrn-primary-light: 34 211 238;    /* Cyan claro (cyan-400) */
  --nrn-primary-dark: 8 145 178;      /* Cyan oscuro (cyan-600) */
}

Variable	Valor	Uso
`--nrn-primary`	`6 182 212` (#06b6d4)	Botones, links, acentos
`--nrn-primary-light`	`34 211 238` (#22d3ee)	Hover states
`--nrn-primary-dark`	`8 145 178` (#0891b2)	Active states

Colores Secundarios

.neuroon-widget {
  --nrn-secondary: 59 130 246;        /* Azul (blue-500) */
  --nrn-secondary-light: 96 165 250;  /* Azul claro (blue-400) */
  --nrn-secondary-dark: 30 64 175;    /* Azul oscuro (blue-700) */
}

Colores de Acento

.neuroon-widget {
  --nrn-accent-purple: 168 85 247;    /* Púrpura (IA) */
  --nrn-accent-emerald: 16 185 129;   /* Verde (éxito) */
  --nrn-accent-amber: 245 158 11;     /* Ámbar (destacado) */
}

Variable	Valor	Uso
`--nrn-accent-purple`	`168 85 247` (#a855f7)	Indicadores IA, confianza
`--nrn-accent-emerald`	`16 185 129` (#10b981)	Categorías, éxito
`--nrn-accent-amber`	`245 158 11` (#f59e0b)	Tags, destacados

Tipografía

.neuroon-widget {
  --nrn-font-family: system-ui, -apple-system, sans-serif;
  --nrn-font-size-xs: 0.75rem;        /* 12px */
  --nrn-font-size-sm: 0.875rem;       /* 14px */
  --nrn-font-size-base: 1rem;         /* 16px */
  --nrn-font-size-lg: 1.125rem;       /* 18px */
  --nrn-font-size-xl: 1.25rem;        /* 20px */
  --nrn-font-size-2xl: 1.5rem;        /* 24px */
}

Variable	Valor	Uso
`--nrn-font-family`	`system-ui, ...`	Fuente global
`--nrn-font-size-xs`	`0.75rem` (12px)	Labels pequeños
`--nrn-font-size-sm`	`0.875rem` (14px)	Texto secundario
`--nrn-font-size-base`	`1rem` (16px)	Texto normal
`--nrn-font-size-lg`	`1.125rem` (18px)	Subtítulos
`--nrn-font-size-xl`	`1.25rem` (20px)	Títulos pequeños
`--nrn-font-size-2xl`	`1.5rem` (24px)	Títulos

Espaciado

.neuroon-widget {
  --nrn-spacing-xs: 0.25rem;          /* 4px */
  --nrn-spacing-sm: 0.5rem;           /* 8px */
  --nrn-spacing-md: 1rem;             /* 16px */
  --nrn-spacing-lg: 1.5rem;           /* 24px */
  --nrn-spacing-xl: 2rem;             /* 32px */
}

Border Radius

.neuroon-widget {
  --nrn-radius-sm: 0.375rem;          /* 6px */
  --nrn-radius-md: 0.5rem;            /* 8px */
  --nrn-radius-lg: 0.75rem;           /* 12px */
  --nrn-radius-xl: 1rem;              /* 16px */
  --nrn-radius-2xl: 1.5rem;           /* 24px */
  --nrn-radius-full: 9999px;          /* Circular */
}

Sombras

.neuroon-widget {
  --nrn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --nrn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --nrn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --nrn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

Variable	Uso
`--nrn-shadow-sm`	Botones, inputs
`--nrn-shadow-md`	Cards
`--nrn-shadow-lg`	Dropdowns
`--nrn-shadow-xl`	Modals

Transiciones

.neuroon-widget {
  --nrn-transition-fast: 150ms ease-in-out;
  --nrn-transition-base: 200ms ease-in-out;
  --nrn-transition-slow: 300ms ease-in-out;
}

Z-Index

.neuroon-widget {
  --nrn-z-dropdown: 10;
  --nrn-z-sticky: 20;
  --nrn-z-modal-backdrop: 40;
  --nrn-z-modal: 50;
  --nrn-z-tooltip: 70;
}

Colores de Marca (Brand)

.neuroon-widget {
  --nrn-brand-cyan: #06b6d4;
  --nrn-brand-cyan-light: #22d3ee;
  --nrn-brand-cyan-dark: #0891b2;
  --nrn-brand-blue: #3b82f6;
  --nrn-brand-gradient: linear-gradient(135deg, #06b6d4, #3b82f6);
  --nrn-brand-gradient-hover: linear-gradient(135deg, #22d3ee, #60a5fa);
}

Variable	Valor	Uso
`--nrn-brand-cyan`	`#06b6d4`	Color principal de marca
`--nrn-brand-cyan-light`	`#22d3ee`	Hover states
`--nrn-brand-cyan-dark`	`#0891b2`	Active states
`--nrn-brand-blue`	`#3b82f6`	Color secundario de marca
`--nrn-brand-gradient`	`linear-gradient(...)`	Gradiente para botones principales
`--nrn-brand-gradient-hover`	`linear-gradient(...)`	Gradiente en hover

Efectos Glow

.neuroon-widget {
  --nrn-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.4);
  --nrn-glow-cyan-intense: 0 0 35px rgba(6, 182, 212, 0.6);
  --nrn-glow-blue: 0 0 20px rgba(59, 130, 246, 0.4);
  --nrn-glow-cyan-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

Variable	Uso
`--nrn-glow-cyan`	Glow sutil para elementos activos
`--nrn-glow-cyan-intense`	Glow intenso para focus
`--nrn-glow-blue`	Glow azul para elementos secundarios
`--nrn-glow-cyan-shadow`	Sombra con glow para elevación

Configuración via JavaScript

Usa el objeto styles para personalizar sin escribir CSS:

NeuroonWidget.init({
  // ...
  styles: {
    // Superficies (hex o RGB string)
    surfaceBase: '#0f172a',
    surfaceElevated: '#1e293b',
    surfaceOverlay: '#334155',
    surfaceHover: '#475569',

    // Texto
    textPrimary: '#f8fafc',
    textSecondary: '#cbd5e1',
    textMuted: '#94a3b8',
    textDisabled: '#64748b',

    // Bordes
    borderDefault: '#334155',
    borderEmphasis: '#475569',
    borderSubtle: '#1e293b',

    // Semánticos
    success: '#10b981',
    error: '#ef4444',
    warning: '#f59e0b',

    // Marca
    primary: '#06b6d4',
    primaryLight: '#22d3ee',
    primaryDark: '#0ea5e9',

    // Secundario
    secondary: '#3b82f6',
    secondaryLight: '#60a5fa',
    secondaryDark: '#2563eb',

    // Acentos
    accentPurple: '#a855f7',
    accentEmerald: '#10b981',
    accentAmber: '#f59e0b',

    // Tipografía
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSizeXs: '0.75rem',
    fontSizeSm: '0.875rem',
    fontSizeBase: '1rem',
    fontSizeLg: '1.125rem',
    fontSizeXl: '1.25rem',
    fontSize2xl: '1.5rem',

    // Espaciado
    spacingXs: '0.25rem',
    spacingSm: '0.5rem',
    spacingMd: '1rem',
    spacingLg: '1.5rem',
    spacingXl: '2rem',

    // Border Radius
    radiusSm: '0.375rem',
    radiusMd: '0.5rem',
    radiusLg: '0.75rem',
    radiusXl: '1rem',
    radius2xl: '1.5rem',
    radiusFull: '9999px',

    // Sombras
    shadowSm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    shadowMd: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    shadowLg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
    shadowXl: '0 20px 25px -5px rgb(0 0 0 / 0.1)',

    // Transiciones
    transitionFast: '150ms ease-in-out',
    transitionBase: '200ms ease-in-out',
    transitionSlow: '300ms ease-in-out',

    // Z-Index
    zDropdown: '10',
    zSticky: '20',
    zModalBackdrop: '40',
    zModal: '50',
    zTooltip: '70',
  },
});

Ejemplos de Temas Personalizados

Tema Cyan (Default Neuroon)

styles: {
  primary: '#06b6d4',
  primaryLight: '#22d3ee',
  primaryDark: '#0ea5e9',
}

Tema Púrpura

styles: {
  primary: '#8b5cf6',
  primaryLight: '#a78bfa',
  primaryDark: '#7c3aed',
}

Tema Verde

styles: {
  primary: '#10b981',
  primaryLight: '#34d399',
  primaryDark: '#059669',
}

Tema Rosa

styles: {
  primary: '#ec4899',
  primaryLight: '#f472b6',
  primaryDark: '#db2777',
}

Tema con CSS Externo

Puedes sobrescribir variables directamente en tu CSS:

/* Tu archivo styles.css */
.neuroon-widget {
  /* Tu marca */
  --nrn-primary: 236 72 153;  /* Rosa #ec4899 */
  --nrn-primary-light: 244 114 182;
  --nrn-primary-dark: 219 39 119;

  /* Fuente personalizada */
  --nrn-font-family: 'Poppins', sans-serif;

  /* Bordes más redondeados */
  --nrn-radius-lg: 1rem;
  --nrn-radius-xl: 1.5rem;
}

Formato de colores

Las variables CSS usan formato RGB sin comas: 6 182 212 (no #06b6d4 ni rgb(6, 182, 212)).

Esto permite usar rgb(var(--nrn-primary) / 0.5) para transparencias.

Tema por Página

Puedes cambiar el tema dinámicamente:

const widget = NeuroonWidget.init({ ... });

// Cambiar a tema oscuro
widget.setTheme('dark');

// Cambiar a tema claro
widget.setTheme('light');

// Volver a auto-detección
widget.setTheme('auto');

Shadow DOM

El widget usa Shadow DOM para encapsular estilos. Esto significa:

Los estilos del widget no afectan a tu página
Los estilos de tu página no afectan al widget (excepto las variables que sobrescribas)
No hay conflictos de CSS

Para sobrescribir estilos, usa las CSS variables o el objeto styles.

Accesibilidad de Colores

Asegúrate de mantener contraste adecuado:

Uso	Contraste mínimo
Texto normal	4.5:1
Texto grande (>18px)	3:1
Iconos, bordes	3:1

Herramientas

Usa WebAIM Contrast Checker para verificar tus colores personalizados.

Temas predefinidos​

Todas las Variables CSS​

Colores de Superficie​

Colores de Texto​

Colores de Borde​

Colores Semánticos​

Colores de Marca (Primary)​

Colores Secundarios​

Colores de Acento​

Tipografía​

Espaciado​

Border Radius​

Sombras​

Transiciones​

Z-Index​

Colores de Marca (Brand)​

Efectos Glow​

Configuración via JavaScript​

Ejemplos de Temas Personalizados​

Tema Cyan (Default Neuroon)​

Tema Púrpura​

Tema Verde​

Tema Rosa​

Tema con CSS Externo​

Tema por Página​

Shadow DOM​

Accesibilidad de Colores​