Diseña con los mismos tokens Tu aplicación se ejecuta en

En el kit

• Cada componente DWC tal como se muestra en webforJ 26 y versiones posteriores, con sus temas, dimensiones y estados.
• Paletas de colores, tipografía, espaciado y tokens de sombra como variables y estilos de Figma.
• Modo claro y oscuro para los componentes y los tokens.
• Espaciado preciso y contraste de color accesible para interfaces con un comportamiento predecible de los componentes.

En la app

Define la marca una sola vez como base. Los botones, enlaces y contornos de enfoque la heredan porque usan la paleta principal.

:root {
  --dwc-color-primary-seed: #2563eb;
}

html[data-app-theme="dark"] {
  --dwc-color-primary-seed: #a855f7;
}

Registra un tema claro y otro oscuro y haz que webforJ siga el sistema operativo del usuario.

@AppTheme("system")
@AppLightTheme("light")
@AppDarkTheme("dark")
class MyApp extends App {
  // app code
}