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)
- kaufland
- lidl
- twogo
To use a different theme, add the corresponding import to your main.ts
file (example for the lidl 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.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 as shown in the example below.
<script setup lang="ts">
import { useColorMode } from "@vueuse/core";
import { OnyxNavBar, OnyxUserMenu, OnyxColorSchemeMenuItem } from "sit-onyx";
import { ref } from "vue";
const { store: colorScheme } = useColorMode();
</script>
<template>
<OnyxNavBar app-name="Example app">
<template #contextArea>
<OnyxUserMenu username="John Doe">
<OnyxColorSchemeMenuItem v-model="colorScheme" />
</OnyxUserMenu>
</template>
</OnyxNavBar>
</template>
Alternatively, you can use the OnyxColorSchemeDialog component to build your own custom component.