onyx supports a dark and a light theme as well as custom color themes. The options how to set up the theme for your application are described on this page.
To learn more about the theming concept of onyx, take a look at our colors documentation
warning Schwarz internal themes onyx includes build-in themes for brands of the Schwarz group(opens in a new tab) that are only accessible for internal employees.
If you are an Schwarz employee and want to access one the following themes, please refer to the Vue Blueprint documentation(opens in a new tab):
- Schwarz Digits
- Kaufland
- Lidl
- PreZero
- Schwarz group and Schwarz corporate solutions
- Tailwind
If you have any other questions or need support, please get in touch with the team.
Copy link to headline:Themes
To use a different theme, add the corresponding imports to your main.ts file (example a theme called "my-theme"):
or if you are using Nuxt, then import them in your nuxt.config.ts:
Copy link to headline:Dark mode
Per default, onyx will be displayed in light mode. In order to use the dark mode, simply set the class dark once on the root of your application, e.g. on <html> or <body>.
Copy link to headline:Let the user decide
In order to let the user switch between light, dark and auto mode, we recommend to use the pre-built OnyxColorSchemeMenuItem(opens in a new tab) component inside the nav bar(opens in a new tab) together with the @vueuse/core(opens in a new tab) library.
Additionally, to enable a smooth transition when switching between color modes, you can use the useThemeTransition composable. This ensures a visually appealing effect during theme changes.
Below is an example implementation:
Alternatively, you can use the OnyxColorSchemeDialog(opens in a new tab) component to build your own custom component.