Temas | Neural UI v2

Empieza con los estilos por defecto

Cargar @neural-ui/core/styles proporciona los tokens por defecto de Core. No requiere preset ni provider. El modo por defecto es claro salvo que tu aplicación seleccione oscuro. El CSS de aplicación puede cambiar esos valores; el tema actual es el resultado de esa cascada.

@use '@neural-ui/core/styles' as *;

Elige claro u oscuro

Establece data-theme="dark" en el elemento raíz del documento para seleccionar los tokens oscuros de Core. La aplicación gobierna esta elección. Este control completo escribe el atributo cuando cambia el usuario; conserva el mismo modo inicial en servidor y navegador. Un preset no lo elige por ti.

import { DOCUMENT } from '@angular/common';
import { Component, inject, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/core/switch';

@Component({
  selector: 'app-theme-mode',
  imports: [NeuSwitchComponent],
  template:
    '<neu-switch label="Dark mode" [checked]="dark()" (checkedChange)="selectMode($event)" />',
})
export class ThemeMode {
  private readonly document = inject(DOCUMENT);
  readonly dark = signal(false);
  selectMode(dark: boolean): void {
    this.dark.set(dark);
    this.document.documentElement.setAttribute(
      'data-theme',
      dark ? 'dark' : 'light',
    );
  }
}

Observa ambos modos

Edita cualquiera de los Input: ambas superficies comparten el valor. La superficie oscura utiliza data-theme="dark". La clara recupera sus colores explícitamente para que la comparación funcione también dentro de una aplicación oscura; ese ajuste local aparece en Código.

Claro

Nombre

Oscuro

Nombre

Define un preset reutilizable

Guárdalo como src/app/product-preset.ts. defineNeuPreset comprueba los nombres públicos de tokens y agrupa cambios claros/oscuros independientes. Cambia juntos fondo, texto y hover relacionados y comprueba el contraste en ambos modos.

import { defineNeuPreset } from '@neural-ui/core';

export const productPreset = defineNeuPreset({
  name: 'product',
  light: {
    '--neu-primary': '#175d95',
    '--neu-primary-dark': '#124c7d',
    '--neu-primary-solid': '#175d95',
    '--neu-primary-solid-fg': '#ffffff',
    '--neu-primary-solid-hover': '#124c7d',
  },
  dark: {
    '--neu-primary': '#86c8ff',
    '--neu-primary-dark': '#124c7d',
    '--neu-primary-light': '#86c8ff',
    '--neu-primary-solid': '#175d95',
    '--neu-primary-solid-fg': '#ffffff',
    '--neu-primary-solid-hover': '#124c7d',
  },
});

Registra el preset

Importa productPreset en app.config.ts y añade provideNeuralUI junto a los providers existentes. Activa el preset con nombre; data-theme sigue eligiendo el modo. El preset global personaliza tokens de componentes, no el layout de aplicación.

import { ApplicationConfig } from '@angular/core';
import { provideNeuralUI } from '@neural-ui/core';
import { productPreset } from './product-preset';

export const appConfig: ApplicationConfig = {
  providers: [provideNeuralUI({ theme: { preset: productPreset } })],
};

Elige la densidad de controles

Aplica data-neu-density a un contenedor para elegir la densidad compact, comfortable o spacious. Los campos Input del ejemplo, con su tamaño predeterminado, utilizan alturas de 2.5rem, 2.75rem y 3rem, respectivamente (40, 44 y 48px con un tamaño de fuente raíz de 16px). En Button, el input size selecciona el tamaño del botón; la densidad ajusta la separación entre sus elementos.

Compacta

Cómoda

Amplia