Theming
onyx supports a dark and a light theme as well as multiple built-in 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
Themes
The following color themes are built-in to onyx:
- onyx (default)
- digits
- kaufland
- lidl
- schwarz
To use a different theme, add the corresponding imports to your main.ts file (example for the lidl theme):
INFO
Make sure to import both the light and dark variants of the theme.
// import "sit-onyx/styles.css";
// make sure to import the theme AFTER the general "sit-onyx/styles.css" file!
import "sit-onyx/themes/lidl-light.css";
import "sit-onyx/themes/lidl-dark.css";INFO
Importing the styles for the theme manually is not necessary when using the nuxt module. See: Nuxt
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>.
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 component inside the nav bar together with the @vueuse/core 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:
<script setup lang="ts">
import { useColorMode } from "@vueuse/core";
import { OnyxNavBar, OnyxUserMenu, OnyxColorSchemeMenuItem } from "sit-onyx";
import { ref } from "vue";
const { store: colorScheme } = useColorMode({ disableTransition: false });
useThemeTransition(colorScheme);
</script>
<template>
<OnyxNavBar app-name="Example app">
<template #contextArea>
<OnyxUserMenu full-name="John Doe">
<OnyxColorSchemeMenuItem v-model="colorScheme" />
</OnyxUserMenu>
</template>
</OnyxNavBar>
</template>Alternatively, you can use the OnyxColorSchemeDialog component to build your own custom component.