feat: add transition for dark/light theme change (#2233)

- Add theme change transition
- Info: .transition-active required the !important attribute, otherwise
it didn't work.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: ChristianBusshoff <[email protected]>

.changeset/tame-frogs-pump.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": minor
+"docs": minor
+---
+
+- added light/dark mode transition
+- created the useThemeTransition composable, which observes changes between light and dark mode and dynamically adds the onyx-transition-active class during the transition for a smooth visual effect. See our [docs](https://onyx.schwarz/development/typography.html) on how to use it.

apps/demo-app/src/App.vue

@@ -10,6 +10,7 @@ import {
   OnyxNavButton,
   OnyxToast,
   OnyxUserMenu,
+  useThemeTransition,
   type OnyxNavButtonProps,
 } from "sit-onyx";
 import { ref, watch, type ComponentInstance } from "vue";
@@ -29,7 +30,8 @@ const navItems = [
   { label: "Data-Grid Demo", href: "/data-grid" },
 ] satisfies OnyxNavButtonProps[];
 
-const { store: colorScheme } = useColorMode();
+const { store: colorScheme } = useColorMode({ disableTransition: false });
+useThemeTransition(colorScheme);
 
 const navBarRef = ref<ComponentInstance<typeof OnyxNavBar>>();
 

apps/docs/src/.vitepress/theme/TheLayout.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { OnyxToast } from "sit-onyx";
+import { OnyxToast, useThemeTransition } from "sit-onyx";
+import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 
 const { Layout } = DefaultTheme;
+const { isDark } = useData();
+useThemeTransition(isDark);
 </script>
 
 <template>

apps/docs/src/.vitepress/theme/theme.scss

@@ -25,3 +25,9 @@
   grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
   gap: 1rem;
 }
+
+html.onyx-transition-active * {
+  transition-duration: 0.2s !important;
+  transition-property: color, background-color, border-color !important;
+  transition-timing-function: ease-in-out;
+}

apps/docs/src/development/theming.md

@@ -45,15 +45,19 @@ Per default, onyx will be displayed in light mode. In order to use the dark mode
 
 ### 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](https://storybook.onyx.schwarz/?path=/docs/navigation-modules-colorschememenuitem--docs) component inside the [nav bar](https://storybook.onyx.schwarz/?path=/story/navigation-navbar--with-context-area) together with the [@vueuse/core](https://vueuse.org/core/useColorMode) library as shown in the example below.
+In order to let the user switch between light, dark and auto mode, we recommend to use the pre-built [OnyxColorSchemeMenuItem](https://storybook.onyx.schwarz/?path=/docs/navigation-modules-colorschememenuitem--docs) component inside the [nav bar](https://storybook.onyx.schwarz/?path=/story/navigation-navbar--with-context-area) together with the [@vueuse/core](https://vueuse.org/core/useColorMode) 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:
 
 ```vue
 <script setup lang="ts">
 import { useColorMode } from "@vueuse/core";
 import { OnyxNavBar, OnyxUserMenu, OnyxColorSchemeMenuItem } from "sit-onyx";
 import { ref } from "vue";
 
-const { store: colorScheme } = useColorMode();
+const { store: colorScheme } = useColorMode({ disableTransition: false });
+useThemeTransition(colorScheme);
 </script>
 
 <template>

packages/sit-onyx/src/composables/themeTransition.ts

@@ -0,0 +1,19 @@
+import type { ColorSchemeValue } from "src/components/OnyxNavBar/modules";
+import { onMounted, watch, type Ref } from "vue";
+
+export const useThemeTransition = (theme: Ref<ColorSchemeValue>) => {
+  //onMounted because of Server-Side-Rendering
+  onMounted(() => {
+    watch([theme], () => {
+      const root = document.documentElement;
+
+      const className = "onyx-transition-active";
+
+      const handleTransitionEnd = () => {
+        root.classList.remove(className);
+      };
+      root.addEventListener("transitionend", handleTransitionEnd, { once: true });
+      root.classList.add(className);
+    });
+  });
+};

packages/sit-onyx/src/index.ts

@@ -150,3 +150,5 @@ export type { OnyxTranslations, ProvideI18nOptions } from "./i18n";
 export * from "./types";
 export { createOnyx } from "./utils/plugin";
 export { normalizedIncludes } from "./utils/strings";
+
+export * from "./composables/themeTransition";

packages/sit-onyx/src/styles/root.scss

@@ -41,7 +41,11 @@
     --onyx-color-backdrop: rgba(0, 0, 0, 0.6);
   }
 }
-
+:where(html.onyx-transition-active *) {
+  transition-duration: 0.2s;
+  transition-property: color, background-color, border-color;
+  transition-timing-function: ease-in-out;
+}
 @layer onyx.reset {
   .onyx-component {
     @include normalize.apply;