'/%3e%3clinearGradient%20xlink:href='%23a'%20id='b'%20x1='46.31'%20x2='68.33'%20y1='44.32'%20y2='66.34'%20gradientTransform='translate(-27.79%20-23.492)'%20gradientUnits='userSpaceOnUse'/%3e%3c/defs%3e%3cpath%20fill='url(%23b)'%20d='M56.36%2028.438c-3.08-17.5-7.7-25.81-17.56-27.9l-16.48%2016.49h8.7c4.92%200%208.9%203.99%208.9%208.9v18.98l-20.94%2020.95c4.16.88%209.26.65%2015.58-.47%2021.26-3.75%2026.14-12.22%2021.78-36.96z'/%3e%3cpath%20fill='url(%23c)'%20d='M35.48%2049.368h-8.7c-4.92%200-8.9-3.99-8.9-8.9v-18.98L38.82.538c-4.16-.88-9.26-.65-15.58.47C1.98%204.758-2.9%2013.228%201.46%2037.968c3.08%2017.5%207.7%2025.81%2017.56%2027.9l16.48-16.49z'/%3e%3c/svg%3e){kind=small}
Colors & Themes
Semantic colors and themes for light and dark mode, ensuring accessible and consistent visual experiences.
Colors convey hierarchy, communicate state, and provide visual structure. A consistent palette guides users, highlights actions, and ensures cohesive UI behavior across applications.
Copy link to headline:Themes
We include a free and Open Source theme with light and dark mode out of the box, applied automatically without manual configuration.
Light mode
Dark mode
Protected content
Additional content is available for Schwarz Group employees.
Copy link to headline:Colors
Predefined color palettes adapt automatically between light and dark mode.
Variables vs. hardcoded colors
Always use CSS or Figma variables instead of hardcoded hex values. This ensures components adapt properly when switching between light and dark modes. For details, see the variables documentation.
Copy link to headline:Brand colors
Use brand colors as functional identifiers rather than purely decorative accents.
Copy link to headline:Primary
The primary color serves as the core brand identifier across every theme.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
- States
Dedicated state tokens maintain consistent borders, outlines, and focus rings.
Copy link to headline:Secondary
Use secondary brand colors sparingly for predefined accents to maintain visual balance.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
Copy link to headline:Neutral
Neutral colors are used for backgrounds, borders, and secondary actions, providing contrast that helps primary colors stand out.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
- States
Dedicated state tokens maintain consistent borders, outlines, and focus rings.
Copy link to headline:System colors
System colors convey functional status and semantic feedback. Reserved for system states, they should not be used as decorative brand colors.
Copy link to headline:Danger
Danger colors signal urgent attention, destructive actions, or critical errors.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
- States
Dedicated state tokens maintain consistent borders, outlines, and focus rings.
Copy link to headline:Warning
Warning colors indicate caution, non-blocking errors, or potential risks.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
Copy link to headline:Success
Success colors indicate completed actions, successful operations, or healthy system status.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
- States
Dedicated state tokens maintain consistent borders, outlines, and focus rings.
Copy link to headline:Info
Info colors present objective information, helpful tips, and non-critical guidance.
- Base
Base colors provide the core palette for custom UI styling.
- Text & Icons
Apply text and icon colors exclusively to typography and icon elements.
Copy link to headline:Quantitative colors
The quantitative palette is designed specifically for charts and data visualization.
- Application
Use in infographics, charts, and dashboards to distinguish between data series.
- Constraint
Do not use quantitative colors for UI elements (buttons, inputs, borders). They are decoupled from brand colors to avoid semantic ambiguity.
- Goal
High-contrast hues ensure clear visual distinction across complex datasets.
Copy link to headline:Backgrounds
The tinted background should be applied to the page root, while individual UI containers and components use a blank background. See the layout guide for page structure examples.
Copy link to headline:Backdrops
Backdrops are overlays rendered behind modals and dialogs. Use the OnyxModal component for automatic backdrop support.
Copy link to headline:Usage
To toggle between light and dark mode, set the color-scheme(opens in a new tab) CSS property on the root or on a specific container:
For compatibility with older tooling, Onyx also supports the .dark class, though color-scheme is preferred.
Copy link to headline:Automatic light/dark mode
To adapt automatically to system preferences, use the approaches below for Vue or Nuxt. You can also integrate OnyxColorSchemeMenuItem or OnyxColorSchemeDialog to allow manual theme switching.
- Install VueUse
Install the VueUse(opens in a new tab) package:
- Enable automatic light/dark mode
Use the useColorMode()(opens in a new tab) composable from VueUse: