Saltar al contenido principal

Theming

Personaliza la apariencia del widget para que coincida con tu marca.

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>

Variables CSS​

El widget usa CSS custom properties que puedes sobrescribir:

.neuroon-widget {
  /* Colores de superficie */
  --surface-base: 15 23 42;
  --surface-elevated: 30 41 59;
  --surface-overlay: 51 65 85;
  --surface-hover: 71 85 105;

  /* Colores de texto */
  --text-primary: 248 250 252;
  --text-secondary: 226 232 240;
  --text-muted: 148 163 184;

  /* Bordes */
  --border-default: 51 65 85;
  --border-emphasis: 71 85 105;

  /* Tipografía */
  --font-family: system-ui, -apple-system, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;

  /* Espaciado */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;

  /* Border radius */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

Configuración via JavaScript​

NeuroonWidget.init({
  // ...
  styles: {
    // Colores de superficie
    surfaceBase: '#0f172a',
    surfaceElevated: '#1e293b',

    // Colores de texto
    textPrimary: '#f8fafc',
    textSecondary: '#e2e8f0',

    // Bordes
    borderDefault: '#334155',

    // Tipografía
    fontFamily: 'Inter, system-ui, sans-serif',

    // Border radius
    radiusLg: '12px',
  },
});

Ejemplo: Tema personalizado​

/* Tu archivo CSS */
.neuroon-widget[data-theme="custom"] {
  /* Fondo azul oscuro */
  --surface-base: 15 23 42;
  --surface-elevated: 30 41 59;

  /* Texto blanco */
  --text-primary: 255 255 255;

  /* Bordes cyan */
  --border-emphasis: 6 182 212;

  /* Fuente personalizada */
  --font-family: 'Poppins', sans-serif;
}
<script data-theme="custom" ...></script>

Colores semánticos​

Para estados especiales:

.neuroon-widget {
  /* Éxito (en stock) */
  --success: 34 197 94;

  /* Error (sin stock) */
  --error: 239 68 68;

  /* Advertencia */
  --warning: 251 191 36;
}