From d243fbc2fb397768a79e5bd5c6f39752e41fb53d Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Mon, 10 Apr 2023 19:43:34 +0400
Subject: [PATCH] Fix error in dev mode (#1408)

## Description

Fixes Error in dev mode on every start or reload

```
react-dom.development.js:67 Warning: Prop `className` did not match. Server: "null" Client: "t-doScVt"
    at html
    at Root (http://localhost:3000/build/_shared/chunk-TNFZIIN2.js:36:22)
 ```

It works because of bug, now without bug it shows
https://github.com/webstudio-is/webstudio-builder/pull/1408

I would comment usetEffect for now



## Steps for reproduction

Run localy, see Error has gone

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why", not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login: 5de6)
- [ ] updated [test cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md) document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
---
 apps/builder/app/shared/theme/theme.ts | 32 +++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/builder/app/shared/theme/theme.ts b/apps/builder/app/shared/theme/theme.ts
index 5ce48771ff..0b90785b52 100644
--- a/apps/builder/app/shared/theme/theme.ts
+++ b/apps/builder/app/shared/theme/theme.ts
@@ -3,6 +3,7 @@ import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { darkTheme } from "@webstudio-is/design-system";
 import { restThemePath } from "~/shared/router-utils";
 import type { ColorScheme, ThemeSetting } from "./types";
+import { useState } from "react";
 
 // User selected theme setting.
 let setting: ThemeSetting = isFeatureEnabled("dark") ? "system" : "light";
@@ -75,12 +76,31 @@ export const useThemeProps = () => {
   if (data.theme.system) {
     system = data.theme.system;
   }
-  const theme = getColorScheme();
-  return {
-    className: theme === "dark" ? darkTheme.className : undefined,
-    style: { colorScheme: theme },
-    "data-theme": theme,
-  };
+
+  const [themeProps] = useState<{
+    className: string | undefined;
+    style: { colorScheme: ColorScheme };
+    "data-theme": ColorScheme;
+  }>({
+    className: undefined,
+    style: { colorScheme: "light" },
+    "data-theme": "light",
+  });
+
+  /*
+  // @todo uncomment when we will decide to use theme
+  useEffect(() => {
+    const theme = getColorScheme();
+
+    setThemeProps(() => ({
+      className: theme === "dark" ? darkTheme.className : undefined,
+      style: { colorScheme: theme },
+      "data-theme": theme,
+    }));
+  }, []);
+  */
+
+  return themeProps;
 };
 
 /**