From d900fd73d3bc77ddbb04e0c8625cf2e4d578a323 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 15 Sep 2023 14:11:37 +0300
Subject: [PATCH] docs: fix theme switcher on the Colors page (#2628)

---
 www/src/pages/foundations/colors.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 279b848479..1bd28a7ac7 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -125,7 +125,16 @@ export interface IColorsPage {
 // eslint-disable-next-line react/prop-types
 export default function ColorsPage({ data, pageContext }: IColorsPage) {
   const { settings } = useContext(SettingsContext);
-  const styles = typeof window !== 'undefined' ? getComputedStyle(document.body) : null;
+  const [styles, setStyles] = useState<CSSStyleDeclarationType>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (typeof window !== 'undefined') {
+        const newStyles = getComputedStyle(document.body);
+        setStyles(newStyles);
+      }
+    }, 500);
+  }, [settings.theme]);
 
   parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types