Theming | Angular Components

Theming

Customize NeuralUI by overriding CSS variables. No build configuration needed.

NeuralUI is built on a Design Token system implemented as native CSS variables. To customize any visual aspect, simply override the variables in your global stylesheet.

How to apply a theme

Add these variables to your styles.scss or any CSS selector. Changes are applied instantly without recompiling the library.

/* In your Angular project's styles.scss */
@use '@neural-ui/core/styles';  /* imports tokens + base styles */

/* Then override below */
:root {
  --neu-primary: #your-color;
}

Brand color

Add these variables to your styles.scss or any CSS selector. Changes are applied instantly without recompiling the library.

/* styles.scss — override NeuralUI tokens */
:root {
  /* Primary brand color */
  --neu-primary:       #7c3aed;   /* Purple */
  --neu-primary-dark:  #5b21b6;
  --neu-primary-light: #a78bfa;
  --neu-primary-fg:    #ffffff;

  /* Border radius */
  --neu-radius:    4px;
  --neu-radius-lg: 8px;
  --neu-radius-xl: 12px;
}

Default

Primary

Rounded

Primary

Sharp

Primary