Temas

Un tema raíz que heredan los componentes hijos

El contenedor neu-theme distribuye la paleta mediante la inyección de dependencias y expone las variables --neu-* para los estilos nativos. Añádelo una vez en la raíz; las pantallas y los controles descendientes heredan ese tema.

Importa NeuThemeComponent desde @neural-ui/native/theme y añádelo a imports en el componente raíz. No necesitas un proveedor global de inicialización del tema ni importar una hoja de estilos. Conserva los componentes de área segura alrededor del contenido de la pantalla como en el ejemplo raíz.

Claro, oscuro y sistema

El tema de la documentación cambia el preview web; una captura estática de Android o iOS conserva la apariencia registrada. Elegir el tema de la biblioteca no configura todas las superficies del sistema operativo, la barra de estado ni las opciones de apariencia de Expo.

Define una paleta de marca para ambos modos

Crea src/app/theme-tokens.ts. Un objeto parcial de tokens cambia únicamente las propiedades indicadas; las demás proceden de la paleta clara u oscura seleccionada de la biblioteca. Mantén accent y onAccent como una pareja legible. Si personalizas el color de acento, revisa también los fondos tonales.

import type { NeuTokens } from '@neural-ui/native/foundation';

export const brandLight = {
  accent: '#3B5BDB',
  accentText: '#3048A5',
  onAccent: '#FFFFFF',
  tonal: '#EBEFFF',
  surfaceBorder: '#D8DEEB',
  divider: '#E8ECF3',
  surfaceSecondary: '#F0F3FA',
  mediaCanvas: '#101828',
  mediaText: '#F1F5F9',
  mediaBarStyle: 'light',
  radius: 16,
} satisfies Partial<NeuTokens>;

export const brandDark = {
  accent: '#B8C6FF',
  accentText: '#C6D0FF',
  onAccent: '#172955',
  tonal: '#293756',
  surfaceBorder: '#3B4863',
  divider: '#33405A',
  surfaceSecondary: '#263249',
  mediaCanvas: '#101828',
  mediaText: '#F1F5F9',
  mediaBarStyle: 'light',
  radius: 16,
} satisfies Partial<NeuTokens>;

Aplica la paleta y cambia el tema de forma reactiva

Este src/app/app.ts completo utiliza PreferencesComponent de Principios de diseño y el archivo de tokens anterior. La signal scheme selecciona el modo. Los tokens computed siguen esa selección y, en modo system, el servicio ColorScheme del dispositivo. Los botones cambian el modo sin reconstruir la pantalla.

import { Component, computed, inject, signal } from '@angular/core';
import { SafeAreaProvider, SafeAreaView } from '@ng-native/components';
import { ColorScheme } from '@ng-native/device';
import { NeuThemeComponent } from '@neural-ui/native/theme';
import { NeuButtonComponent } from '@neural-ui/native/button';
import type { NeuColorScheme } from '@neural-ui/native/foundation';
import { brandLight, brandDark } from './theme-tokens';
import { PreferencesComponent } from './preferences.component';

@Component({
  selector: 'app-root',
  imports: [SafeAreaProvider, SafeAreaView, NeuThemeComponent, NeuButtonComponent, PreferencesComponent],
  template: `
    <safe-area-provider>
      <neu-theme [scheme]="scheme()" [tokens]="tokens()">
        <safe-area-view class="screen">
          <app-preferences />
          <neu-button label="Use light theme" variant="text" (pressed)="scheme.set('light')" />
          <neu-button label="Use dark theme" variant="text" (pressed)="scheme.set('dark')" />
          <neu-button label="Follow device" variant="text" (pressed)="scheme.set('system')" />
        </safe-area-view>
      </neu-theme>
    </safe-area-provider>
  `,
  styles: `
    :host, .screen { flex: 1; }
  `,
})
export class App {
  readonly scheme = signal<NeuColorScheme>('system');
  private readonly deviceScheme = inject(ColorScheme);
  readonly tokens = computed(() => {
    const mode = this.scheme() === 'system' ? this.deviceScheme.current() : this.scheme();
    return mode === 'dark' ? brandDark : brandLight;
  });
}

Un objeto tokens fijo se aplica sin cambios tanto en claro como en oscuro. Usa un objeto computed dependiente del modo cuando tu marca necesite colores distintos en cada uno. Si solo sobrescribes radius o spacing, la paleta de colores predeterminada puede seguir al sistema sin calcular colores específicos.

Temas locales y su alcance

Añade un neu-theme anidado solo para una apariencia local intencionada, como una zona promocional oscura en una app clara. Los controles descendientes utilizan el tema más cercano. Cada neu-theme parte de su paleta integrada seleccionada y combina sus propios tokens; no combina automáticamente las personalizaciones de marca del padre.

<neu-theme scheme="dark" [tokens]="brandDark">
  <neu-button label="Explore membership" />
</neu-theme>

Este es un fragmento de plantilla para una sección independiente. Importa allí NeuThemeComponent y NeuButtonComponent y expón brandDark desde el archivo de tokens. El contenedor del tema tiene flex: 1, por lo que debes definir su layout exterior de forma intencionada en lugar de añadir contenedores anidados para controles normales.