Temas

Personaliza el aspecto de tu aplicación con temas integrados, colores y soporte de modo oscuro.

Temas disponibles

Volt UI viene con varios temas de color preconstruidos. Cada tema aporta una paleta propia para los colores primario, secundario, de acento y semánticos.

Volt

Tema azul por defecto

Ember

Tema naranja cálido

Sage

Tema verde natural

Dusk

Tema violeta crepuscular

Glacier

Tema cian frío

Configuración del tema

Añade el proveedor de tema a la configuración de tu aplicación:

import { provideVoltTheme } from '@voltui/components'; export const appConfig: ApplicationConfig = { providers: [ provideVoltTheme({ color: 'volt', style: 'soft', dark: false }) ] };

Opciones de color

Colores del tema

Elige tu paleta de color principal

'volt' — Azul (por defecto)
'ember' — Naranja/rojo
'sage' — Verde
'dusk' — Violeta
'glacier' — Cian

Variantes de estilo

Elige el estilo de tus componentes

'sharp' — Radio pequeño, sombras planas (por defecto)
'soft' — Radio grande, sombras difusas
'brutal' — Sin radio, sombras duras desplazadas, bordes gruesos
'ghost' — Sin bordes, sin sombras
'retro' — Estética Y2K

API en tiempo de ejecución

Dos funciones de @voltui/components controlan el tema en tiempo de ejecución. Ambas se limitan a fijar data-color , data-style y una clase .dark en <html> : no hay estado oculto, así que puedes inspeccionar o sobrescribir el resultado con las API del DOM en cualquier momento.

provideVoltTheme(options)

Proveedor de entorno. Llámalo una vez en appConfig.providers para fijar el tema en el arranque, tanto en servidor como en cliente.

Seguro con SSR. Lee el token de inyección DOCUMENT de Angular en vez del document global, así que los atributos del tema ya están en el HTML renderizado en servidor: sin parpadeo del tema por defecto mientras hidrata el bundle del cliente.

applyVoltTheme(options, doc?)

Función normal. Llámala desde un manejador de clic, un effect o donde necesites cambiar el tema después del arranque (por ejemplo, un selector de tema).

Solo navegador por defecto (no hace nada si document es undefined). Pasa un argumento doc explícito para actuar sobre otro documento, por ejemplo en un test.

// app.config.ts — set the theme at bootstrap

import { provideVoltTheme } from '@voltui/components';

export const appConfig: ApplicationConfig = {

providers: [provideVoltTheme({ color: 'ember', style: 'soft' })],

};

Estrategia de modo oscuro

El modo oscuro se basa en una clase: añadir .dark a <html> cambia todos los componentes a sus valores de token oscuros (mira @custom-variant dark en core.css ). Volt no lee prefers-color-scheme automáticamente: dark es claro salvo que pases dark: true o llames tú a applyVoltTheme , de modo que la decisión siempre es explícita y no cambia sin avisar si cambia el tema del sistema del visitante.

// Static: dark by default

provideVoltTheme({ color: 'volt', dark: true })

// Dynamic: toggle from a button, a signal, etc.

import { applyVoltTheme } from '@voltui/components';

applyVoltTheme({ dark: true });

// Opt in to following the OS preference yourself

const media = matchMedia('(prefers-color-scheme: dark)');

applyVoltTheme({ dark: media.matches });

media.addEventListener('change', e => applyVoltTheme({ dark: e.matches }));

La propia web de documentación guarda la elección del visitante en localStorage y la aplica desde un pequeño script en línea dentro del <head> de index.html , antes de que cargue ninguna hoja de estilos; mira src/app/components/theme-switcher.ts como implementación de referencia si quieres el mismo comportamiento sin parpadeo en cliente.

Variables CSS

Cada preset define el mismo conjunto de tokens semánticos como valores oklch() . Los componentes los consumen mediante utilidades de Tailwind ( bg-primary , text-muted-foreground ) mapeadas con @theme inline en core.css , nunca con un var(--primary) crudo. Esta es la lista completa que puede definir un preset; mira las dos guías de abajo para plantillas listas para copiar.

/* Color tokens — one block per data-color, one per .dark[data-color] */
--background / --foreground
--surface / --surface-foreground        /* cards, popovers, dropdowns */
--muted / --muted-foreground
--border / --input / --ring             /* --input is the form-control border */
--primary / --primary-foreground
--secondary / --secondary-foreground
--destructive / --destructive-foreground /* shared by all colors, only in core.css */
--success / --success-foreground
--warning / --warning-foreground
--error / --error-foreground
--info / --info-foreground

/* Style tokens — one block per data-style */
--radius
--border-width / --border-style
--ring-width / --ring-offset-width
--volt-shadow-sm / --volt-shadow / --volt-shadow-md / --volt-shadow-lg
--spacing-component / --spacing-gap
--volt-font-weight-base / --volt-font-weight-heading / --volt-font-weight-label

Crear un preset de color propio

Un preset de color no es más que un par de selectores indexados por data-color . Copia esta plantilla, sustituye 'mytheme' y los valores, y luego importa el archivo después de @voltui/components/themes.css en tu hoja de estilos global.

:root[data-color='mytheme'] {
  --primary: oklch(0.58 0.2 265);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.96 0.01 265);
  --secondary-foreground: oklch(0.15 0.01 265);
  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0.01 265);
  --surface: oklch(1 0 0);
  --surface-foreground: oklch(0.15 0.01 265);
  --muted: oklch(0.96 0.005 265);
  --muted-foreground: oklch(0.5 0.02 265);
  --border: oklch(0.9 0.01 265);
  --input: oklch(0.65 0.02 265);
  --ring: oklch(0.58 0.2 265);
  --success: oklch(0.5 0.14 150);
  --success-foreground: oklch(0.98 0 0);
  --warning: oklch(0.7 0.16 70);
  --warning-foreground: oklch(0.2 0.05 70);
  --error: oklch(0.55 0.22 25);
  --error-foreground: oklch(0.98 0 0);
  --info: oklch(0.55 0.14 240);
  --info-foreground: oklch(0.98 0 0);
}

.dark[data-color='mytheme'] {
  /* same tokens, tuned for a dark --background/--surface */
}

Mantén cada par de primer plano y fondo con un contraste de 4,5:1 o mejor (3:1 para --ring y --input frente a --background ); mira scripts/contrast-audit.mjs en el repositorio para la comprobación exacta que este proyecto ejecuta sobre sus propios presets. La herramienta Crear tema genera un punto de partida a partir de un solo color de acento si prefieres no elegir once tokens a mano.

Crear un preset de estilo propio

Un preset de estilo no toca el color, solo la forma. Se indexa por data-style y se aplica a todos los colores a la vez.

:root[data-style='mystyle'] {
  --radius: 0.5rem;
  --border-width: 1px;
  --border-style: solid;
  --ring-width: 2px;
  --ring-offset-width: 2px;

  --volt-shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --volt-shadow: 0 1px 3px 0 oklch(0 0 0 / 0.1);
  --volt-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
  --volt-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1);

  --spacing-component: 1;
  --spacing-gap: 0.5rem;

  --volt-font-weight-base: 400;
  --volt-font-weight-heading: 600;
  --volt-font-weight-label: 500;
}

El registro es igual que el de un preset de color: ponlo en tu hoja de estilos global después de @voltui/components/themes.css y luego fija data-style="mystyle" con provideVoltTheme o applyVoltTheme .