Themes

DÁP design system components can be styled via design tokens. The package provides a set of predefined themes that can be used to style the components.

Available Themes Core Themes

The design system includes three core themes with different visual modes:

  • light - Default light theme with indigo brand color
  • dark - Dark mode variant
  • high-contrast - High contrast accessibility theme
  • oklch - OKLCH color space variant, supports P3/wide-gamut displays, this is has the same visual mode as the light theme, but uses the OKLCH color space for the color values
Color Variant Themes

In addition to the core themes, the design system provides four color palette variants that use different brand colors:

  • teal - Teal brand color (#027671)
  • cold-grey - Cold grey brand color (#606b7a)
  • azure - Azure brand color (#01719d)
  • violet - Violet brand color (#8445db)

These color variants provide alternative brand color options while maintaining the same semantic color system for states (informative, positive, warning, negative).

Token Architecture

The DÁP Design System uses a 3-tier token inheritance structure to provide flexibility and maintainability. This architecture allows themes to be created by simply remapping brand tokens to different foundation palettes, while all component tokens automatically inherit the new colors.

🎨TIER 1Foundation Colors
Raw color palettes with hex values. These are the base colors used throughout the system.
Reference Pattern: Direct hex color values (e.g., #647aff)
Token NameValuePreviewindigo.100#f1f3ff
indigo.800#647aff
indigo.1000#4258ed
cold grey.1000#606b7a
semantic green.1000#00ac5a
semantic red.1000#dd0041
white.100#ffffff
▼
References
🎯TIER 2Brand & Theme Tokens
Semantic color names that reference foundation colors. Themes can remap these to different palettes.
Reference Pattern: Token references using {palette.shade} syntax
Token NameValueResolutionPreviewbrand.100{indigo.100}{indigo.100} → #f1f3ff
brand.800{indigo.800}{indigo.800} → #647aff
brand.1000{indigo.1000}{indigo.1000} → #4258ed
neutral.1000{cold grey.1000}{cold grey.1000} → #606b7a
positive.1000{semantic green.1000}{semantic green.1000} → #00ac5a
negative.1000{semantic red.1000}{semantic red.1000} → #dd0041
▼
References
🧩TIER 3Application Tokens
Component and semantic tokens used directly in the design system. These reference Tier 2 tokens.
Reference Pattern: Nested token references using {semantic.token} syntax
Token NameValueResolutionPreviewfocus.outer-ring{brand.800}{brand.800} → {indigo.800} → #647aff
focus.inner-ring{white.100}{white.100} → #ffffff
button-primary.background.enabled{brand.1000}{brand.1000} → {indigo.1000} → #4258ed
background.neutral.subtle{white.100}{white.100} → #ffffff
text.positive.base{positive.1000}{positive.1000} → {semantic green.1000} → #00ac5a
text.negative.base{negative.1000}{negative.1000} → {semantic red.1000} → #dd0041

This 3-tier architecture allows themes to be created by simply remapping Tier 2 tokens to different foundation palettes. For example, the teal theme changes brand.* to reference the teal palette instead of indigo, while all component tokens automatically inherit the new colors.

💡 Tip: Click any token name to copy it to your clipboard. Click tier headers to expand and see examples.

Using Themes

These are simple CSS files with all the CSS variables defined for the components. You can import these files in your project and use the variables to style the components.

The default theme is the light theme. These variables exist in the :root block of the stylesheet.

Light Theme (Default) 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/light.theme.css" />
Dark Theme 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/dark.theme.css" />
Color Variant Themes 
<!-- Teal variant -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/teal.theme.css" />

<!-- Cold Grey variant -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/cold-grey.theme.css" />

<!-- Azure variant -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/azure.theme.css" />

<!-- Violet variant -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/violet.theme.css" />
Theme Scoping

It is important that the dark-theme and high-contrast themes are scoped to the .dark-theme and .high-contrast-theme classes respectively. This is to ensure that the themes are applied only to the components that are wrapped in the respective classes.

The easiest way to apply the dark or high-contrast theme is to add the dark-theme or high-contrast-theme class to the body tag of your application.

<body class="dark-theme">

Color variant themes (teal, cold-grey, azure, violet) use the :root selector similar to the light theme, so they can be imported directly without additional scoping.

Customization

These files are minified and can be imported directly from the CDN. You can also download the files from the dist folder in the package and import them in your project.

If you want to customize the themes, you can create your own CSS file and override the variables defined in the default themes. The unminified versions of the themes are available in the dist/variables folder in the package. You can use these files as a reference to create your own custom themes.