Theming | Componentes Angular

Tematización

Personaliza NeuralUI sobreescribiendo variables CSS. Sin configuración de build.

NeuralUI está construido sobre un sistema de Design Tokens implementados como variables CSS nativas. Para personalizar cualquier aspecto visual basta con sobreescribir las variables en tu hoja de estilos global.

Cómo aplicar un tema

Añade estas variables en tu styles.scss o en cualquier selector CSS. Los cambios se aplican de forma instantánea sin recompilar la librería.

/* En el styles.scss de tu proyecto Angular */
@use '@neural-ui/core/styles';  /* importa tokens + estilos base */

/* Luego sobreescribe aquí */
:root {
  --neu-primary: #your-color;
}

Color de marca

Añade estas variables en tu styles.scss o en cualquier selector CSS. Los cambios se aplican de forma instantánea sin recompilar la librería.

/* styles.scss — sobreescribir tokens de NeuralUI */
:root {
  /* Color de marca principal */
  --neu-primary:       #7c3aed;   /* Morado */
  --neu-primary-dark:  #5b21b6;
  --neu-primary-light: #a78bfa;
  --neu-primary-fg:    #ffffff;

  /* Radio de borde */
  --neu-radius:    4px;
  --neu-radius-lg: 8px;
  --neu-radius-xl: 12px;
}

Default

Primario

Redondeado

Primario

Recto

Primario