Design with the same tokens your app runs on

In the kit

• Every DWC component as it looks in webforJ 26 and later, with its themes, expanses and states.
• The color palettes, typography, spacing and shadow tokens as Figma variables and styles.
• Light and dark mode for the components and the tokens.
• Precise spacing and accessible color contrast, for interfaces with predictable component behavior.

In the app

Set the brand once as a seed. Buttons, links and focus rings pick it up because they use the primary palette.

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

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

Register a light and a dark theme and let webforJ follow the user's operating system.

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