diff --git a/packages/documentation/src/components/ThemeBorders/index.tsx b/packages/documentation/src/components/ThemeBorders/index.tsx
index 87f632bc55..1c85f33a2f 100644
--- a/packages/documentation/src/components/ThemeBorders/index.tsx
+++ b/packages/documentation/src/components/ThemeBorders/index.tsx
@@ -18,6 +18,7 @@ import {
 import React, { useState } from 'react';
 import { themeBorders } from './borders';
 import './ThemeBorders.css';
+import { useTheme } from '@site/src/utils/hooks/useTheme';
 
 function Search(props: { onChange: (value: string) => void }) {
   return (
@@ -56,6 +57,7 @@ function BorderPreview(props: { border: string }) {
 
 const ThemeBorders: React.FC = () => {
   const [borders, setBorders] = useState(themeBorders);
+  useTheme();
 
   const updateFilter = (filter) => {
     setBorders([
diff --git a/packages/documentation/src/components/ThemeColors/index.tsx b/packages/documentation/src/components/ThemeColors/index.tsx
index f65012929d..9bac23ee6a 100644
--- a/packages/documentation/src/components/ThemeColors/index.tsx
+++ b/packages/documentation/src/components/ThemeColors/index.tsx
@@ -16,9 +16,10 @@ import {
   IxRow,
   showToast,
 } from '@siemens/ix-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { resolveColorValue, themeColors } from './resolve-colors';
 import './ThemeColors.css';
+import { useTheme } from '@site/src/utils/hooks/useTheme';
 
 function Search(props: { onChange: (value: string) => void }) {
   return (
@@ -59,6 +60,7 @@ function ColorPreview(props: { color: string }) {
 
 const ThemeColors: React.FC = () => {
   const [colors, setColors] = useState(themeColors);
+  const theme = useTheme();
 
   const updateFilter = (filter) => {
     setColors([
@@ -80,11 +82,9 @@ const ThemeColors: React.FC = () => {
     });
   };
 
-  useEffect(() => {
-    window.addEventListener('theme-change', () => {
-      setColors([...colors]);
-    });
-  }, []);
+  useLayoutEffect(() => {
+    setColors([...colors]);
+  }, [theme]);
 
   return (
     <div className="Theme__Colors">
diff --git a/packages/documentation/src/components/ThemeFonts/index.tsx b/packages/documentation/src/components/ThemeFonts/index.tsx
index b980a34dca..74bb92d8ed 100644
--- a/packages/documentation/src/components/ThemeFonts/index.tsx
+++ b/packages/documentation/src/components/ThemeFonts/index.tsx
@@ -18,6 +18,7 @@ import CodeBlock from '@theme/CodeBlock';
 import React, { useCallback, useState } from 'react';
 import { CodeSelection, getCodeExample, getPreview, themeFonts } from './fonts';
 import './ThemeFonts.css';
+import { useTheme } from '@site/src/utils/hooks/useTheme';
 
 function Search(props: { onChange: (value: string) => void }) {
   return (
@@ -43,6 +44,7 @@ function Search(props: { onChange: (value: string) => void }) {
 }
 
 const ThemeFonts: React.FunctionComponent = () => {
+  useTheme();
   const [fonts] = useState(themeFonts);
   const [filter, setFilter] = useState('');
   const [framework, setFramework] = useState<CodeSelection>('react');
diff --git a/packages/documentation/src/components/ThemeShadows/index.tsx b/packages/documentation/src/components/ThemeShadows/index.tsx
index 8c0f6291f6..3b64c7d034 100644
--- a/packages/documentation/src/components/ThemeShadows/index.tsx
+++ b/packages/documentation/src/components/ThemeShadows/index.tsx
@@ -18,6 +18,7 @@ import {
 import React, { useState } from 'react';
 import { themeShadows } from './shadows';
 import './ThemeShadows.css';
+import { useTheme } from '@site/src/utils/hooks/useTheme';
 
 function Search(props: { onChange: (value: string) => void }) {
   return (
@@ -55,6 +56,7 @@ function ShadowPreview(props: { border: string }) {
 }
 
 const ThemeShadows: React.FC = () => {
+  useTheme();
   const [borders, setBorders] = useState(themeShadows);
 
   const updateFilter = (filter) => {