diff --git a/.changeset/tame-frogs-pump.md b/.changeset/tame-frogs-pump.md
new file mode 100644
index 0000000000..f268ffcf42
--- /dev/null
+++ b/.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.
diff --git a/apps/demo-app/src/App.vue b/apps/demo-app/src/App.vue
index bd13c5c3da..fbab0d65dd 100644
--- a/apps/demo-app/src/App.vue
+++ b/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>>();
 
diff --git a/apps/docs/playwright/snapshots/development-theming-edge-linux.png b/apps/docs/playwright/snapshots/development-theming-edge-linux.png
index 060b544817..eb45f83222 100644
Binary files a/apps/docs/playwright/snapshots/development-theming-edge-linux.png and b/apps/docs/playwright/snapshots/development-theming-edge-linux.png differ
diff --git a/apps/docs/playwright/snapshots/development-theming-firefox-linux.png b/apps/docs/playwright/snapshots/development-theming-firefox-linux.png
index 415de99130..466efbaa9f 100644
Binary files a/apps/docs/playwright/snapshots/development-theming-firefox-linux.png and b/apps/docs/playwright/snapshots/development-theming-firefox-linux.png differ
diff --git a/apps/docs/playwright/snapshots/development-theming-webkit-linux.png b/apps/docs/playwright/snapshots/development-theming-webkit-linux.png
index 0d26a1c29d..e04a898299 100644
Binary files a/apps/docs/playwright/snapshots/development-theming-webkit-linux.png and b/apps/docs/playwright/snapshots/development-theming-webkit-linux.png differ
diff --git a/apps/docs/src/.vitepress/theme/TheLayout.vue b/apps/docs/src/.vitepress/theme/TheLayout.vue
index 884efb9e93..3232bb0d16 100644
--- a/apps/docs/src/.vitepress/theme/TheLayout.vue
+++ b/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>
diff --git a/apps/docs/src/.vitepress/theme/theme.scss b/apps/docs/src/.vitepress/theme/theme.scss
index 80dcb8661a..5edebb2316 100644
--- a/apps/docs/src/.vitepress/theme/theme.scss
+++ b/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;
+}
diff --git a/apps/docs/src/development/theming.md b/apps/docs/src/development/theming.md
index e0f19ab046..3dd0d220ab 100644
--- a/apps/docs/src/development/theming.md
+++ b/apps/docs/src/development/theming.md
@@ -45,7 +45,10 @@ 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">
@@ -53,7 +56,8 @@ 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>
diff --git a/packages/sit-onyx/src/composables/themeTransition.ts b/packages/sit-onyx/src/composables/themeTransition.ts
new file mode 100644
index 0000000000..5da1ce8f00
--- /dev/null
+++ b/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);
+    });
+  });
+};
diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts
index f78e6dcc21..07271977e7 100644
--- a/packages/sit-onyx/src/index.ts
+++ b/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";
diff --git a/packages/sit-onyx/src/styles/root.scss b/packages/sit-onyx/src/styles/root.scss
index f0d1749718..a577e1a2d4 100644
--- a/packages/sit-onyx/src/styles/root.scss
+++ b/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;