Concevoir avec les mêmes tokens votre application s’exécute sur

Dans le kit

• Chaque composant DWC tel qu’il apparaît dans webforJ 26 et les versions ultérieures, avec ses thèmes, dimensions et états.
• Les palettes de couleurs, la typographie, les espacements et les tokens d’ombre sous forme de variables et de styles Figma.
• Mode clair et sombre pour les composants et les jetons.
• Espacement précis et contraste des couleurs respectueux de l’accessibilité, pour des interfaces au comportement prévisible.

Dans l’application

Définissez la marque une seule fois comme base. Les boutons, les liens et les contours de focus la reprennent, car ils utilisent la palette principale.

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

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

Enregistrez un thème clair et un thème sombre, puis laissez webforJ suivre le système d’exploitation de l’utilisateur.

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