From bbbdaff3807533508014c2d50674c753d1602c14 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 7 Jul 2022 09:46:48 +0200
Subject: [PATCH 01/19] wip theme switcher

---
 apps/designer/app/designer/designer.tsx       |  2 +
 .../designer/features/topbar/menu/menu.tsx    | 55 ++++++++++++++++++-
 .../designer/shared/client-settings/index.ts  |  1 +
 .../shared/client-settings/settings.ts        | 49 +++++++++++++++++
 .../designer/shared/client-settings/values.ts |  4 ++
 .../components/dropdown-menu.tsx              |  6 ++
 .../shared/design-system/components/theme.tsx | 30 ++++++++++
 .../app/shared/design-system/index.ts         |  1 +
 .../app/shared/documents/designer.tsx         |  5 +-
 apps/designer/tsconfig.json                   | 13 ++++-
 10 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 apps/designer/app/designer/shared/client-settings/index.ts
 create mode 100644 apps/designer/app/designer/shared/client-settings/settings.ts
 create mode 100644 apps/designer/app/designer/shared/client-settings/values.ts
 create mode 100644 apps/designer/app/shared/design-system/components/theme.tsx

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index f2814f61fb..30d637e1c4 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -32,6 +32,7 @@ import {
 import { usePublishShortcuts } from "./shared/shortcuts";
 import { type SyncStatus } from "~/shared/sync";
 import { useIsPreviewMode, useRootInstance } from "~/shared/nano-states";
+import { useSubscribeClientSetting } from "./shared/client-settings";
 
 export const links = () => {
   return [
@@ -169,6 +170,7 @@ export const Designer = ({ config, project }: DesignerProps) => {
   useSubscribeSelectedInstanceData();
   useSubscribeHoveredInstanceData();
   useSubscribeBreakpoints();
+  useSubscribeClientSetting();
   const [publish, publishRef] = usePublish();
   const [isPreviewMode] = useIsPreviewMode();
   const [isDragging, setIsDragging] = useIsDragging();
diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index 2c5b030ece..68659e753f 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -1,22 +1,26 @@
 import { useNavigate } from "react-router-dom";
-import { type Publish } from "@webstudio-is/sdk";
+import { publish, type Publish } from "@webstudio-is/sdk";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  DropdownMenuTriggerItem,
+  DropdownMenuCheckboxItem,
   DropdownMenuArrow,
   DropdownMenuSeparator,
   IconButton,
   Text,
 } from "~/shared/design-system";
-import { HamburgerMenuIcon } from "~/shared/icons";
+import { HamburgerMenuIcon, ChevronRightIcon } from "~/shared/icons";
 import type { Config } from "~/config";
 import { ShortcutHint } from "./shortcut-hint";
 import {
   useIsShareDialogOpen,
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
+import { feature } from "~/shared/feature-flags";
+import { getSetting } from "~/designer/shared/client-settings";
 
 const menuItemCss = {
   display: "flex",
@@ -31,6 +35,52 @@ const textCss = {
   fontSize: "$1",
 };
 
+const ThemeMenuItem = () => {
+  if (feature("theme") === false) return null;
+
+  const currentTheme = getSetting("theme");
+
+  const publishThemeChange = (value: string) => {
+    publish({
+      type: "setClientSetting",
+      payload: {
+        name: "theme",
+        value,
+      },
+    });
+  };
+
+  const labels = {
+    light: "Light",
+    dark: "Dark",
+    system: "System theme",
+  } as const;
+  const themes = Object.keys(labels) as Array<keyof typeof labels>;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTriggerItem>
+        <Text css={textCss}>Theme</Text>
+        <ChevronRightIcon />
+      </DropdownMenuTriggerItem>
+      <DropdownMenuContent>
+        {themes.map((theme) => (
+          <DropdownMenuCheckboxItem
+            key={theme}
+            checked={currentTheme === theme}
+            css={menuItemCss}
+            onSelect={() => {
+              publishThemeChange(theme);
+            }}
+          >
+            <Text css={textCss}>{labels[theme]}</Text>
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
 type MenuProps = {
   config: Config;
   publish: Publish;
@@ -154,6 +204,7 @@ export const Menu = ({ config, publish }: MenuProps) => {
           <ShortcutHint value={["cmd", "-"]} />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
+        <ThemeMenuItem />
         <DropdownMenuItem
           css={menuItemCss}
           onSelect={() => {
diff --git a/apps/designer/app/designer/shared/client-settings/index.ts b/apps/designer/app/designer/shared/client-settings/index.ts
new file mode 100644
index 0000000000..dcf101b0c6
--- /dev/null
+++ b/apps/designer/app/designer/shared/client-settings/index.ts
@@ -0,0 +1 @@
+export * from "./settings";
diff --git a/apps/designer/app/designer/shared/client-settings/settings.ts b/apps/designer/app/designer/shared/client-settings/settings.ts
new file mode 100644
index 0000000000..049fb4f349
--- /dev/null
+++ b/apps/designer/app/designer/shared/client-settings/settings.ts
@@ -0,0 +1,49 @@
+import * as values from "./values";
+import { useSubscribe } from "@webstudio-is/sdk";
+
+type Name = keyof typeof values;
+type Value = typeof values[Name]["values"][number];
+type Settings = Partial<Record<Name, Value>>;
+
+const namespace = "__webstudio_user_settings__";
+
+const read = (): Settings => {
+  try {
+    const settings = localStorage.getItem(namespace);
+    if (settings === null) return {};
+    return JSON.parse(settings);
+  } catch (error) {}
+  return {};
+};
+
+const write = (settings: Settings) => {
+  localStorage.setItem(namespace, JSON.stringify(settings));
+};
+
+/**
+ * Get a value from local storage or a default.
+ */
+export const getSetting = (name: Name) => {
+  const settings = read();
+  const validValues = values[name].values;
+  const value = settings[name];
+  const isValidValue = value !== undefined && validValues.includes(value);
+  if (isValidValue) return value;
+  return values[name].defaultValue;
+};
+
+export const setSetting = (name: Name, value: Value) => {
+  const settings = read();
+  const validValues = values[name].values;
+  const isValidValue = validValues.includes(value);
+  if (isValidValue) write({ ...settings, [name]: value });
+};
+
+export const useSubscribeClientSetting = (name: Name) => {
+  useSubscribe<"setClientSetting", { name: Name; value: Value }>(
+    "setClientSetting",
+    (payload) => {
+      setSetting(payload.name, payload.value);
+    }
+  );
+};
diff --git a/apps/designer/app/designer/shared/client-settings/values.ts b/apps/designer/app/designer/shared/client-settings/values.ts
new file mode 100644
index 0000000000..6baca6b084
--- /dev/null
+++ b/apps/designer/app/designer/shared/client-settings/values.ts
@@ -0,0 +1,4 @@
+export const theme = {
+  defaultValue: "system",
+  values: ["dark", "light", "system"],
+} as const;
diff --git a/apps/designer/app/shared/design-system/components/dropdown-menu.tsx b/apps/designer/app/shared/design-system/components/dropdown-menu.tsx
index 458e3975bc..6e5b38d3c1 100644
--- a/apps/designer/app/shared/design-system/components/dropdown-menu.tsx
+++ b/apps/designer/app/shared/design-system/components/dropdown-menu.tsx
@@ -12,6 +12,12 @@ export const DropdownMenuArrow = styled(DropdownMenuPrimitive.Arrow, {
   fill: "$panel",
 });
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+export const DropdownMenuTriggerItem = styled(
+  DropdownMenuPrimitive.TriggerItem,
+  itemCss
+);
+
 export const DropdownMenuContent = styled(
   DropdownMenuPrimitive.Content,
   menuCss,
diff --git a/apps/designer/app/shared/design-system/components/theme.tsx b/apps/designer/app/shared/design-system/components/theme.tsx
new file mode 100644
index 0000000000..f12f2a00be
--- /dev/null
+++ b/apps/designer/app/shared/design-system/components/theme.tsx
@@ -0,0 +1,30 @@
+import { getSetting } from "~/designer/shared/client-settings";
+import { darkTheme } from "../stitches.config";
+
+const getTheme = () => {
+  const theme = getSetting("theme");
+  if (theme === "dark") return darkTheme.toString();
+  return "light-theme";
+  // @todo handle system theme
+};
+
+export const Theme = () => {
+  globalThis.theme = getTheme();
+  console.log(1111, globalThis.theme);
+
+  const code = `
+    !(function () {
+      setTimeout(function() {
+        console.log(222, globalThis.theme)
+        document.documentElement.classList.add(globalThis.theme)
+      });
+    })();
+  `;
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: code,
+      }}
+    />
+  );
+};
diff --git a/apps/designer/app/shared/design-system/index.ts b/apps/designer/app/shared/design-system/index.ts
index 8e58533e09..b28fc45209 100644
--- a/apps/designer/app/shared/design-system/index.ts
+++ b/apps/designer/app/shared/design-system/index.ts
@@ -11,6 +11,7 @@ export {
   theme,
   type CSS,
 } from "./stitches.config";
+export * from "./components/theme";
 
 export * as Collapsible from "@radix-ui/react-collapsible";
 export { AccessibleIcon } from "@radix-ui/react-accessible-icon";
diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx
index 46ba3018f1..122249e9a9 100644
--- a/apps/designer/app/shared/documents/designer.tsx
+++ b/apps/designer/app/shared/documents/designer.tsx
@@ -1,7 +1,7 @@
 import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 import { CriticalCss } from "@webstudio-is/sdk";
-import { darkTheme } from "~/shared/design-system";
 import { Env } from "~/shared/env";
+import { Theme } from "../design-system";
 
 export const Designer = () => {
   return (
@@ -10,10 +10,11 @@ export const Designer = () => {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
+        <Theme />
         <Links />
         <CriticalCss />
       </head>
-      <body className={darkTheme}>
+      <body>
         <Outlet />
         <Env />
         <Scripts />
diff --git a/apps/designer/tsconfig.json b/apps/designer/tsconfig.json
index 102b540d96..4079797c36 100644
--- a/apps/designer/tsconfig.json
+++ b/apps/designer/tsconfig.json
@@ -6,6 +6,17 @@
     "paths": {
       "~/*": ["app/*"]
     },
-    "baseUrl": "."
+    "baseUrl": ".",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "strict": true,
+    "target": "ES2019",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true
   }
 }

From d29f249bc6beacfdfc1bfa6daaeea22b0bcce756 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 11:46:56 +0200
Subject: [PATCH 02/19] upgrade from feature flag branch

---
 apps/designer/app/designer/features/topbar/menu/menu.tsx     | 5 +++--
 .../designer/app/designer/shared/client-settings/settings.ts | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index 68659e753f..05b14970f7 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -19,7 +19,7 @@ import {
   useIsShareDialogOpen,
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
-import { feature } from "~/shared/feature-flags";
+import { isFeatureEnabled } from "~/shared/feature-flags";
 import { getSetting } from "~/designer/shared/client-settings";
 
 const menuItemCss = {
@@ -36,7 +36,7 @@ const textCss = {
 };
 
 const ThemeMenuItem = () => {
-  if (feature("theme") === false) return null;
+  if (isFeatureEnabled("theme") === false) return null;
 
   const currentTheme = getSetting("theme");
 
@@ -55,6 +55,7 @@ const ThemeMenuItem = () => {
     dark: "Dark",
     system: "System theme",
   } as const;
+
   const themes = Object.keys(labels) as Array<keyof typeof labels>;
 
   return (
diff --git a/apps/designer/app/designer/shared/client-settings/settings.ts b/apps/designer/app/designer/shared/client-settings/settings.ts
index 049fb4f349..3b0c57d6b0 100644
--- a/apps/designer/app/designer/shared/client-settings/settings.ts
+++ b/apps/designer/app/designer/shared/client-settings/settings.ts
@@ -39,7 +39,7 @@ export const setSetting = (name: Name, value: Value) => {
   if (isValidValue) write({ ...settings, [name]: value });
 };
 
-export const useSubscribeClientSetting = (name: Name) => {
+export const useSubscribeClientSetting = () => {
   useSubscribe<"setClientSetting", { name: Name; value: Value }>(
     "setClientSetting",
     (payload) => {

From 1f9a9de521eaf2e4c6c58d95ddd329d969ca6679 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 14:36:50 +0200
Subject: [PATCH 03/19] working theme switcher over local storage

---
 .../shared/client-settings/settings.ts        |  4 ++-
 .../shared/design-system/components/theme.tsx | 30 -------------------
 .../app/shared/design-system/index.ts         |  1 -
 .../app/shared/documents/designer.tsx         |  2 +-
 apps/designer/app/shared/theme/index.ts       |  1 +
 apps/designer/app/shared/theme/theme.tsx      | 27 +++++++++++++++++
 6 files changed, 32 insertions(+), 33 deletions(-)
 delete mode 100644 apps/designer/app/shared/design-system/components/theme.tsx
 create mode 100644 apps/designer/app/shared/theme/index.ts
 create mode 100644 apps/designer/app/shared/theme/theme.tsx

diff --git a/apps/designer/app/designer/shared/client-settings/settings.ts b/apps/designer/app/designer/shared/client-settings/settings.ts
index 3b0c57d6b0..2235afa106 100644
--- a/apps/designer/app/designer/shared/client-settings/settings.ts
+++ b/apps/designer/app/designer/shared/client-settings/settings.ts
@@ -12,7 +12,9 @@ const read = (): Settings => {
     const settings = localStorage.getItem(namespace);
     if (settings === null) return {};
     return JSON.parse(settings);
-  } catch (error) {}
+  } catch (error) {
+    // We don't need to handle this one.
+  }
   return {};
 };
 
diff --git a/apps/designer/app/shared/design-system/components/theme.tsx b/apps/designer/app/shared/design-system/components/theme.tsx
deleted file mode 100644
index f12f2a00be..0000000000
--- a/apps/designer/app/shared/design-system/components/theme.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getSetting } from "~/designer/shared/client-settings";
-import { darkTheme } from "../stitches.config";
-
-const getTheme = () => {
-  const theme = getSetting("theme");
-  if (theme === "dark") return darkTheme.toString();
-  return "light-theme";
-  // @todo handle system theme
-};
-
-export const Theme = () => {
-  globalThis.theme = getTheme();
-  console.log(1111, globalThis.theme);
-
-  const code = `
-    !(function () {
-      setTimeout(function() {
-        console.log(222, globalThis.theme)
-        document.documentElement.classList.add(globalThis.theme)
-      });
-    })();
-  `;
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: code,
-      }}
-    />
-  );
-};
diff --git a/apps/designer/app/shared/design-system/index.ts b/apps/designer/app/shared/design-system/index.ts
index b28fc45209..8e58533e09 100644
--- a/apps/designer/app/shared/design-system/index.ts
+++ b/apps/designer/app/shared/design-system/index.ts
@@ -11,7 +11,6 @@ export {
   theme,
   type CSS,
 } from "./stitches.config";
-export * from "./components/theme";
 
 export * as Collapsible from "@radix-ui/react-collapsible";
 export { AccessibleIcon } from "@radix-ui/react-accessible-icon";
diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx
index 122249e9a9..9a6fcf5b97 100644
--- a/apps/designer/app/shared/documents/designer.tsx
+++ b/apps/designer/app/shared/documents/designer.tsx
@@ -1,7 +1,7 @@
 import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 import { CriticalCss } from "@webstudio-is/sdk";
 import { Env } from "~/shared/env";
-import { Theme } from "../design-system";
+import { Theme } from "~/shared/theme";
 
 export const Designer = () => {
   return (
diff --git a/apps/designer/app/shared/theme/index.ts b/apps/designer/app/shared/theme/index.ts
new file mode 100644
index 0000000000..3797aeae07
--- /dev/null
+++ b/apps/designer/app/shared/theme/index.ts
@@ -0,0 +1 @@
+export * from "./theme";
diff --git a/apps/designer/app/shared/theme/theme.tsx b/apps/designer/app/shared/theme/theme.tsx
new file mode 100644
index 0000000000..c0abf05e20
--- /dev/null
+++ b/apps/designer/app/shared/theme/theme.tsx
@@ -0,0 +1,27 @@
+import { darkTheme } from "../design-system/stitches.config";
+
+export const Theme = () => {
+  darkTheme.toString();
+  // @todo switch the default to system theme once we support both.
+  const code = `
+    !(function () {
+      try {
+        var theme = 'dark';
+        var savedTheme = localStorage.getItem("__webstudio_theme__");
+        if (savedTheme === 'system') {
+          theme = matchMedia("(prefers-color-scheme: light)").matches ? 'light' : 'dark';
+        }
+        if (savedTheme && savedTheme !== theme) theme = savedTheme
+        document.documentElement.classList.add(theme + "-theme");
+        document.documentElement.style.colorScheme = theme;
+      } catch (e) {}
+    })();
+  `;
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: code,
+      }}
+    />
+  );
+};

From 08418a22041e35d27d76bc20d3fa9b7be74d5386 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 17:31:16 +0200
Subject: [PATCH 04/19] read cookie from js

---
 .../designer/features/topbar/menu/menu.tsx    |  4 +-
 .../designer/shared/client-settings/values.ts |  7 +--
 apps/designer/app/entry.server.tsx            |  4 +-
 apps/designer/app/routes/designer.tsx         | 10 +++-
 apps/designer/app/routes/index.tsx            | 10 +++-
 .../shared/design-system/stitches.config.ts   |  2 +-
 .../app/shared/documents/designer.tsx         |  5 +-
 apps/designer/app/shared/theme/theme.ts       | 48 +++++++++++++++++++
 apps/designer/app/shared/theme/theme.tsx      | 27 -----------
 apps/designer/package.json                    |  1 +
 yarn.lock                                     |  5 ++
 11 files changed, 84 insertions(+), 39 deletions(-)
 create mode 100644 apps/designer/app/shared/theme/theme.ts
 delete mode 100644 apps/designer/app/shared/theme/theme.tsx

diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index 05b14970f7..a4f312342b 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -20,7 +20,7 @@ import {
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getSetting } from "~/designer/shared/client-settings";
+import { getBrowserTheme } from "~/shared/theme";
 
 const menuItemCss = {
   display: "flex",
@@ -38,7 +38,7 @@ const textCss = {
 const ThemeMenuItem = () => {
   if (isFeatureEnabled("theme") === false) return null;
 
-  const currentTheme = getSetting("theme");
+  const currentTheme = getBrowserTheme();
 
   const publishThemeChange = (value: string) => {
     publish({
diff --git a/apps/designer/app/designer/shared/client-settings/values.ts b/apps/designer/app/designer/shared/client-settings/values.ts
index 6baca6b084..4862f44df8 100644
--- a/apps/designer/app/designer/shared/client-settings/values.ts
+++ b/apps/designer/app/designer/shared/client-settings/values.ts
@@ -1,4 +1,5 @@
-export const theme = {
-  defaultValue: "system",
-  values: ["dark", "light", "system"],
+// @todo delete example once we have other values
+export const example = {
+  defaultValue: "example",
+  values: ["one", "two", "three"],
 } as const;
diff --git a/apps/designer/app/entry.server.tsx b/apps/designer/app/entry.server.tsx
index 7ee8c468dd..245bda73b5 100644
--- a/apps/designer/app/entry.server.tsx
+++ b/apps/designer/app/entry.server.tsx
@@ -5,12 +5,13 @@ import type { EntryContext } from "@remix-run/node";
 import * as Sentry from "@sentry/remix";
 import { initSentry } from "./shared/sentry";
 import { prisma } from "./shared/db/prisma.server";
+import { insertTheme } from "./shared/theme";
 
 initSentry({
   integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
 });
 
-export default function handleRequest(
+export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
@@ -21,6 +22,7 @@ export default function handleRequest(
   );
 
   markup = insertCriticalCss(markup, request.url);
+  markup = await insertTheme(markup, request.headers);
 
   responseHeaders.set("Content-Type", "text/html");
 
diff --git a/apps/designer/app/routes/designer.tsx b/apps/designer/app/routes/designer.tsx
index 932f3a8cac..748f54ac9b 100644
--- a/apps/designer/app/routes/designer.tsx
+++ b/apps/designer/app/routes/designer.tsx
@@ -1,4 +1,8 @@
-import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LoaderFunction,
+  MetaFunction,
+} from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
 
@@ -10,4 +14,8 @@ export const meta: MetaFunction = () => {
   return { title: "Webstudio" };
 };
 
+export const headers: HeadersFunction = () => ({
+  "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
+});
+
 export default Designer;
diff --git a/apps/designer/app/routes/index.tsx b/apps/designer/app/routes/index.tsx
index 26211f87dd..138289439f 100644
--- a/apps/designer/app/routes/index.tsx
+++ b/apps/designer/app/routes/index.tsx
@@ -1,4 +1,8 @@
-import { redirect, type LoaderFunction } from "@remix-run/node";
+import {
+  type HeadersFunction,
+  redirect,
+  type LoaderFunction,
+} from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Root, type Data } from "@webstudio-is/sdk";
 import config from "~/config";
@@ -13,6 +17,10 @@ type LoaderReturnProps = Promise<
   (Data & { env: Env }) | (Error & { env: Env }) | Response
 >;
 
+export const headers: HeadersFunction = () => ({
+  "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
+});
+
 export const loader: LoaderFunction = async ({
   request,
 }): LoaderReturnProps => {
diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/apps/designer/app/shared/design-system/stitches.config.ts
index 9b9daafa4d..09be767c99 100644
--- a/apps/designer/app/shared/design-system/stitches.config.ts
+++ b/apps/designer/app/shared/design-system/stitches.config.ts
@@ -433,7 +433,7 @@ export const {
 
 export type CSS = Stitches.CSS<typeof config>;
 
-export const darkTheme = createTheme("dark-theme", {
+export const darkTheme = createTheme("dark", {
   colors: {
     ...grayDark,
     ...mauveDark,
diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx
index 9a6fcf5b97..c4771f8dbb 100644
--- a/apps/designer/app/shared/documents/designer.tsx
+++ b/apps/designer/app/shared/documents/designer.tsx
@@ -1,16 +1,15 @@
 import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 import { CriticalCss } from "@webstudio-is/sdk";
 import { Env } from "~/shared/env";
-import { Theme } from "~/shared/theme";
+import { getThemePlaceholder } from "~/shared/theme";
 
 export const Designer = () => {
   return (
-    <html lang="en">
+    <html lang="en" {...getThemePlaceholder()}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
-        <Theme />
         <Links />
         <CriticalCss />
       </head>
diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
new file mode 100644
index 0000000000..6103d3d242
--- /dev/null
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -0,0 +1,48 @@
+import { createCookie } from "@remix-run/node";
+import browserCookies from "js-cookie";
+import { darkTheme } from "~/shared/design-system/stitches.config";
+
+type ColorScheme = "dark" | "light";
+
+const placeholder = "__theme_placeholder__";
+
+const cookieNamespace = "theme";
+
+// @todo todo switch to light by default once ready
+const defaultTheme = "dark";
+
+export const getBrowserTheme = () => {
+  return browserCookies.get(cookieNamespace) || defaultTheme;
+};
+
+const getCookieTheme = async (headers: Headers): Promise<ColorScheme> => {
+  const cookieTheme = await createCookie(cookieNamespace).parse(
+    headers.get("Cookie")
+  );
+  if (cookieTheme === "system") {
+    const system = headers.get("Sec-CH-Prefers-Color-Scheme");
+    if (system === "light" || system === "dark") {
+      return system;
+    }
+  }
+  return cookieTheme || defaultTheme;
+};
+
+export const getThemePlaceholder = () => {
+  if (typeof document === "undefined") {
+    return {
+      className: placeholder,
+      style: { colorScheme: placeholder },
+    };
+  }
+  const theme = getBrowserTheme();
+  return {
+    className: theme === "dark" ? darkTheme.toString() : "light",
+    style: { colorScheme: theme },
+  };
+};
+
+export const insertTheme = async (markup: string, headers: Headers) => {
+  const theme = await getCookieTheme(headers);
+  return markup.replace(new RegExp(placeholder, "gi"), theme);
+};
diff --git a/apps/designer/app/shared/theme/theme.tsx b/apps/designer/app/shared/theme/theme.tsx
deleted file mode 100644
index c0abf05e20..0000000000
--- a/apps/designer/app/shared/theme/theme.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { darkTheme } from "../design-system/stitches.config";
-
-export const Theme = () => {
-  darkTheme.toString();
-  // @todo switch the default to system theme once we support both.
-  const code = `
-    !(function () {
-      try {
-        var theme = 'dark';
-        var savedTheme = localStorage.getItem("__webstudio_theme__");
-        if (savedTheme === 'system') {
-          theme = matchMedia("(prefers-color-scheme: light)").matches ? 'light' : 'dark';
-        }
-        if (savedTheme && savedTheme !== theme) theme = savedTheme
-        document.documentElement.classList.add(theme + "-theme");
-        document.documentElement.style.colorScheme = theme;
-      } catch (e) {}
-    })();
-  `;
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: code,
-      }}
-    />
-  );
-};
diff --git a/apps/designer/package.json b/apps/designer/package.json
index 87fe48f801..cc32e758b8 100644
--- a/apps/designer/package.json
+++ b/apps/designer/package.json
@@ -60,6 +60,7 @@
     "hyphenate-style-name": "^1.0.4",
     "immer": "^9.0.12",
     "immerhin": "^0.1.2",
+    "js-cookie": "^3.0.1",
     "lexical": "^0.3.5",
     "lodash.capitalize": "^4.2.1",
     "lodash.debounce": "^4.0.8",
diff --git a/yarn.lock b/yarn.lock
index b27560e4e0..9ddce00c82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10229,6 +10229,11 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"

From 2c2e3455d37cab41b93852f37eb2d15486457e88 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 22:26:01 +0200
Subject: [PATCH 05/19] functional theme switcher

---
 .../designer/features/topbar/menu/menu.tsx    | 30 ++----
 apps/designer/app/entry.server.tsx            |  3 +-
 apps/designer/app/routes/dashboard.tsx        | 10 +-
 apps/designer/app/routes/designer.tsx         | 20 ++--
 apps/designer/app/routes/designer/$id.tsx     |  9 +-
 apps/designer/app/routes/index.tsx            | 10 +-
 apps/designer/app/routes/login.tsx            | 10 +-
 .../designer/app/routes/rest/theme.$option.ts | 10 ++
 .../app/shared/documents/designer.tsx         |  5 +-
 .../app/shared/feature-flags/feature.ts       |  2 +-
 .../designer/app/shared/theme/index.server.ts |  2 +
 apps/designer/app/shared/theme/shared.ts      |  5 +
 .../designer/app/shared/theme/theme.server.ts | 14 +++
 apps/designer/app/shared/theme/theme.ts       | 93 ++++++++++++-------
 apps/designer/package.json                    |  1 -
 yarn.lock                                     |  5 -
 16 files changed, 135 insertions(+), 94 deletions(-)
 create mode 100644 apps/designer/app/routes/rest/theme.$option.ts
 create mode 100644 apps/designer/app/shared/theme/index.server.ts
 create mode 100644 apps/designer/app/shared/theme/shared.ts
 create mode 100644 apps/designer/app/shared/theme/theme.server.ts

diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index a4f312342b..d28b8b896e 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { publish, type Publish } from "@webstudio-is/sdk";
+import { type Publish } from "@webstudio-is/sdk";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,7 +20,7 @@ import {
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getBrowserTheme } from "~/shared/theme";
+import { getThemeOption, setThemeOption } from "~/shared/theme";
 
 const menuItemCss = {
   display: "flex",
@@ -37,26 +37,14 @@ const textCss = {
 
 const ThemeMenuItem = () => {
   if (isFeatureEnabled("theme") === false) return null;
-
-  const currentTheme = getBrowserTheme();
-
-  const publishThemeChange = (value: string) => {
-    publish({
-      type: "setClientSetting",
-      payload: {
-        name: "theme",
-        value,
-      },
-    });
-  };
-
+  const currentOption = getThemeOption();
   const labels = {
     light: "Light",
     dark: "Dark",
     system: "System theme",
   } as const;
 
-  const themes = Object.keys(labels) as Array<keyof typeof labels>;
+  const options = Object.keys(labels) as Array<keyof typeof labels>;
 
   return (
     <DropdownMenu>
@@ -65,16 +53,16 @@ const ThemeMenuItem = () => {
         <ChevronRightIcon />
       </DropdownMenuTriggerItem>
       <DropdownMenuContent>
-        {themes.map((theme) => (
+        {options.map((option) => (
           <DropdownMenuCheckboxItem
-            key={theme}
-            checked={currentTheme === theme}
+            key={option}
+            checked={currentOption === option}
             css={menuItemCss}
             onSelect={() => {
-              publishThemeChange(theme);
+              setThemeOption(option);
             }}
           >
-            <Text css={textCss}>{labels[theme]}</Text>
+            <Text css={textCss}>{labels[option]}</Text>
           </DropdownMenuCheckboxItem>
         ))}
       </DropdownMenuContent>
diff --git a/apps/designer/app/entry.server.tsx b/apps/designer/app/entry.server.tsx
index 245bda73b5..971c090aa0 100644
--- a/apps/designer/app/entry.server.tsx
+++ b/apps/designer/app/entry.server.tsx
@@ -5,7 +5,6 @@ import type { EntryContext } from "@remix-run/node";
 import * as Sentry from "@sentry/remix";
 import { initSentry } from "./shared/sentry";
 import { prisma } from "./shared/db/prisma.server";
-import { insertTheme } from "./shared/theme";
 
 initSentry({
   integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
@@ -22,9 +21,9 @@ export default async function handleRequest(
   );
 
   markup = insertCriticalCss(markup, request.url);
-  markup = await insertTheme(markup, request.headers);
 
   responseHeaders.set("Content-Type", "text/html");
+  responseHeaders.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
 
   return new Response("<!DOCTYPE html>" + markup, {
     status: responseStatusCode,
diff --git a/apps/designer/app/routes/dashboard.tsx b/apps/designer/app/routes/dashboard.tsx
index 936c0f8323..ca41594442 100644
--- a/apps/designer/app/routes/dashboard.tsx
+++ b/apps/designer/app/routes/dashboard.tsx
@@ -1,10 +1,14 @@
 import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
+import { getServerTheme } from "~/shared/theme/theme.server";
 
-export const loader: LoaderFunction = () => ({
-  env,
-});
+export const loader: LoaderFunction = async ({ request }) => {
+  return {
+    env,
+    theme: await getServerTheme(request),
+  };
+};
 
 export const meta: MetaFunction = () => {
   return { title: "Webstudio Dashboard" };
diff --git a/apps/designer/app/routes/designer.tsx b/apps/designer/app/routes/designer.tsx
index 748f54ac9b..e7ebd09bc3 100644
--- a/apps/designer/app/routes/designer.tsx
+++ b/apps/designer/app/routes/designer.tsx
@@ -1,21 +1,17 @@
-import type {
-  HeadersFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
+import { getServerTheme } from "~/shared/theme/theme.server";
 
-export const loader: LoaderFunction = () => ({
-  env,
-});
+export const loader: LoaderFunction = async ({ request }) => {
+  return {
+    env,
+    theme: await getServerTheme(request),
+  };
+};
 
 export const meta: MetaFunction = () => {
   return { title: "Webstudio" };
 };
 
-export const headers: HeadersFunction = () => ({
-  "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
-});
-
 export default Designer;
diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx
index 3babd37a9a..e76fddaf30 100644
--- a/apps/designer/app/routes/designer/$id.tsx
+++ b/apps/designer/app/routes/designer/$id.tsx
@@ -1,13 +1,18 @@
 import { useLoaderData } from "@remix-run/react";
-import type { LoaderFunction } from "@remix-run/node";
+import { LoaderFunction, redirect } from "@remix-run/node";
 import type { Project } from "@webstudio-is/sdk";
 import { Designer, links } from "~/designer";
 import * as db from "~/shared/db";
 import config from "~/config";
 import env from "~/env.server";
+import { authenticator } from "~/services/auth.server";
 export { links };
 
-export const loader: LoaderFunction = async ({ params }) => {
+export const loader: LoaderFunction = async ({ request, params }) => {
+  const user = await authenticator.isAuthenticated(request);
+  if (!user) {
+    return redirect(config.loginPath);
+  }
   if (params.id === undefined) throw new Error("Project id undefined");
   const project = await db.project.loadById(params.id);
   if (project === null) {
diff --git a/apps/designer/app/routes/index.tsx b/apps/designer/app/routes/index.tsx
index 138289439f..26211f87dd 100644
--- a/apps/designer/app/routes/index.tsx
+++ b/apps/designer/app/routes/index.tsx
@@ -1,8 +1,4 @@
-import {
-  type HeadersFunction,
-  redirect,
-  type LoaderFunction,
-} from "@remix-run/node";
+import { redirect, type LoaderFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Root, type Data } from "@webstudio-is/sdk";
 import config from "~/config";
@@ -17,10 +13,6 @@ type LoaderReturnProps = Promise<
   (Data & { env: Env }) | (Error & { env: Env }) | Response
 >;
 
-export const headers: HeadersFunction = () => ({
-  "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
-});
-
 export const loader: LoaderFunction = async ({
   request,
 }): LoaderReturnProps => {
diff --git a/apps/designer/app/routes/login.tsx b/apps/designer/app/routes/login.tsx
index 2c24216657..66b2c3c640 100644
--- a/apps/designer/app/routes/login.tsx
+++ b/apps/designer/app/routes/login.tsx
@@ -1,10 +1,14 @@
 import { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
+import { getServerTheme } from "~/shared/theme/theme.server";
 
-export const loader: LoaderFunction = () => ({
-  env,
-});
+export const loader: LoaderFunction = async ({ request }) => {
+  return {
+    env,
+    theme: await getServerTheme(request),
+  };
+};
 
 export const meta: MetaFunction = () => {
   return { title: "Webstudio Login" };
diff --git a/apps/designer/app/routes/rest/theme.$option.ts b/apps/designer/app/routes/rest/theme.$option.ts
new file mode 100644
index 0000000000..384e703391
--- /dev/null
+++ b/apps/designer/app/routes/rest/theme.$option.ts
@@ -0,0 +1,10 @@
+import { json, type LoaderFunction } from "@remix-run/node";
+import { themeCookieParser } from "~/shared/theme/index.server";
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const { option } = params;
+  const headers = {
+    "Set-Cookie": await themeCookieParser.serialize(option),
+  };
+  return json({ option }, { headers });
+};
diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx
index c4771f8dbb..859680748d 100644
--- a/apps/designer/app/shared/documents/designer.tsx
+++ b/apps/designer/app/shared/documents/designer.tsx
@@ -1,11 +1,12 @@
 import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react";
 import { CriticalCss } from "@webstudio-is/sdk";
 import { Env } from "~/shared/env";
-import { getThemePlaceholder } from "~/shared/theme";
+import { useThemeProps } from "~/shared/theme";
 
 export const Designer = () => {
+  const themeProps = useThemeProps();
   return (
-    <html lang="en" {...getThemePlaceholder()}>
+    <html lang="en" {...themeProps}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
diff --git a/apps/designer/app/shared/feature-flags/feature.ts b/apps/designer/app/shared/feature-flags/feature.ts
index c000c73826..0385a3adff 100644
--- a/apps/designer/app/shared/feature-flags/feature.ts
+++ b/apps/designer/app/shared/feature-flags/feature.ts
@@ -28,5 +28,5 @@ export const isFeatureEnabled = (name: Name): boolean => {
   const defaultValue = flags[name];
   const envValue = parse(env.FEATURE).includes(name);
   const localValue = readLocal().includes(name);
-  return localValue ?? envValue ?? defaultValue;
+  return localValue || envValue || defaultValue;
 };
diff --git a/apps/designer/app/shared/theme/index.server.ts b/apps/designer/app/shared/theme/index.server.ts
new file mode 100644
index 0000000000..6a20ed7455
--- /dev/null
+++ b/apps/designer/app/shared/theme/index.server.ts
@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./theme.server";
diff --git a/apps/designer/app/shared/theme/shared.ts b/apps/designer/app/shared/theme/shared.ts
new file mode 100644
index 0000000000..e415297314
--- /dev/null
+++ b/apps/designer/app/shared/theme/shared.ts
@@ -0,0 +1,5 @@
+export type ThemeName = "dark" | "light";
+
+export type ThemeOption = ThemeName | "system";
+
+export const cookieNamespace = "theme";
diff --git a/apps/designer/app/shared/theme/theme.server.ts b/apps/designer/app/shared/theme/theme.server.ts
new file mode 100644
index 0000000000..40f5d44c4c
--- /dev/null
+++ b/apps/designer/app/shared/theme/theme.server.ts
@@ -0,0 +1,14 @@
+import { createCookie } from "@remix-run/node";
+import { cookieNamespace, type ThemeName, type ThemeOption } from "./shared";
+
+export const themeCookieParser = createCookie(cookieNamespace);
+
+export const getServerTheme = async (
+  request: Request
+): Promise<{ system?: ThemeName; option?: ThemeOption }> => {
+  const system = (request.headers.get("Sec-CH-Prefers-Color-Scheme") ??
+    undefined) as ThemeName | undefined;
+  const option: ThemeOption =
+    (await themeCookieParser.parse(request.headers.get("Cookie"))) ?? undefined;
+  return { system, option };
+};
diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index 6103d3d242..f87aa7e098 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -1,48 +1,75 @@
-import { createCookie } from "@remix-run/node";
-import browserCookies from "js-cookie";
-import { darkTheme } from "~/shared/design-system/stitches.config";
+import { useLoaderData } from "@remix-run/react";
+import { darkTheme } from "~/shared/design-system";
+import { type ThemeName, type ThemeOption } from "./shared";
 
-type ColorScheme = "dark" | "light";
+// User selected theme option.
+let option: ThemeOption = "dark";
+// Current systeme theme.
+let system: ThemeName;
 
-const placeholder = "__theme_placeholder__";
+const subscribeSystemTheme = () => {
+  if (typeof matchMedia === "undefined") return;
+  const query = matchMedia("(prefers-color-scheme: light)");
+  const getTheme = (query: MediaQueryList | MediaQueryListEvent) =>
+    query.matches ? "light" : "dark";
 
-const cookieNamespace = "theme";
+  system = getTheme(query);
+
+  query.addEventListener("change", (queryEvent) => {
+    system = getTheme(queryEvent);
+    setDomProps();
+  });
+};
+
+subscribeSystemTheme();
+
+export const getThemeOption = (): ThemeOption => {
+  return option;
+};
 
 // @todo todo switch to light by default once ready
-const defaultTheme = "dark";
+export const defaultTheme = "dark";
 
-export const getBrowserTheme = () => {
-  return browserCookies.get(cookieNamespace) || defaultTheme;
+const selectTheme = ({
+  system = defaultTheme,
+  option,
+}: {
+  system: ThemeName;
+  option?: ThemeOption;
+}): ThemeName => {
+  if (option === "system") {
+    return system;
+  }
+  return option || defaultTheme;
 };
 
-const getCookieTheme = async (headers: Headers): Promise<ColorScheme> => {
-  const cookieTheme = await createCookie(cookieNamespace).parse(
-    headers.get("Cookie")
-  );
-  if (cookieTheme === "system") {
-    const system = headers.get("Sec-CH-Prefers-Color-Scheme");
-    if (system === "light" || system === "dark") {
-      return system;
-    }
+const getThemeProps = () => {
+  const theme = selectTheme({ option, system });
+  if (theme === "dark") {
+    // We need to call it so that vars get injected!!!
+    darkTheme.toString();
   }
-  return cookieTheme || defaultTheme;
-};
-
-export const getThemePlaceholder = () => {
-  if (typeof document === "undefined") {
-    return {
-      className: placeholder,
-      style: { colorScheme: placeholder },
-    };
-  }
-  const theme = getBrowserTheme();
   return {
-    className: theme === "dark" ? darkTheme.toString() : "light",
+    className: theme,
     style: { colorScheme: theme },
   };
 };
 
-export const insertTheme = async (markup: string, headers: Headers) => {
-  const theme = await getCookieTheme(headers);
-  return markup.replace(new RegExp(placeholder, "gi"), theme);
+const setDomProps = () => {
+  const props = getThemeProps();
+  document.documentElement.className = props.className;
+  document.documentElement.style.colorScheme = props.style.colorScheme;
+};
+
+export const setThemeOption = (nextOption: ThemeOption) => {
+  option = nextOption;
+  setDomProps();
+  fetch(`/rest/theme/${option}`);
+};
+
+export const useThemeProps = () => {
+  const data = useLoaderData();
+  if (data.theme.option) option = data.theme.option;
+  if (data.theme.system) system = data.theme.system;
+  return getThemeProps();
 };
diff --git a/apps/designer/package.json b/apps/designer/package.json
index cc32e758b8..87fe48f801 100644
--- a/apps/designer/package.json
+++ b/apps/designer/package.json
@@ -60,7 +60,6 @@
     "hyphenate-style-name": "^1.0.4",
     "immer": "^9.0.12",
     "immerhin": "^0.1.2",
-    "js-cookie": "^3.0.1",
     "lexical": "^0.3.5",
     "lodash.capitalize": "^4.2.1",
     "lodash.debounce": "^4.0.8",
diff --git a/yarn.lock b/yarn.lock
index 9ddce00c82..b27560e4e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10229,11 +10229,6 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
-js-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
-
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"

From 2f7ed67e824a6f77c91f01cd6cedbfe9a5621ade Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 22:28:11 +0200
Subject: [PATCH 06/19] no need for async

---
 apps/designer/app/entry.server.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/designer/app/entry.server.tsx b/apps/designer/app/entry.server.tsx
index 971c090aa0..05a2120187 100644
--- a/apps/designer/app/entry.server.tsx
+++ b/apps/designer/app/entry.server.tsx
@@ -10,7 +10,7 @@ initSentry({
   integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
 });
 
-export default async function handleRequest(
+export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,

From ce869e4d0dc98dcca83ac6450b8404e263f943d7 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 8 Jul 2022 22:32:47 +0200
Subject: [PATCH 07/19] Update tsconfig.json

---
 apps/designer/tsconfig.json | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/apps/designer/tsconfig.json b/apps/designer/tsconfig.json
index 4079797c36..102b540d96 100644
--- a/apps/designer/tsconfig.json
+++ b/apps/designer/tsconfig.json
@@ -6,17 +6,6 @@
     "paths": {
       "~/*": ["app/*"]
     },
-    "baseUrl": ".",
-    "allowJs": true,
-    "forceConsistentCasingInFileNames": true,
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
-    "strict": true,
-    "target": "ES2019",
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "noEmit": true,
-    "resolveJsonModule": true
+    "baseUrl": "."
   }
 }

From 57fd8548ab7209b08693a6d9cb0afbb5cd8fd0df Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 9 Jul 2022 13:59:13 +0200
Subject: [PATCH 08/19] better semantics

---
 .../designer/features/topbar/menu/menu.tsx    |  6 +--
 .../{theme.$option.ts => theme.$setting.ts}   |  6 +--
 apps/designer/app/shared/theme/shared.ts      |  4 +-
 .../designer/app/shared/theme/theme.server.ts |  8 ++--
 apps/designer/app/shared/theme/theme.ts       | 40 +++++++++----------
 5 files changed, 32 insertions(+), 32 deletions(-)
 rename apps/designer/app/routes/rest/{theme.$option.ts => theme.$setting.ts} (62%)

diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index d28b8b896e..f549529b5e 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -20,7 +20,7 @@ import {
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getThemeOption, setThemeOption } from "~/shared/theme";
+import { getThemeSetting, setThemeSetting } from "~/shared/theme";
 
 const menuItemCss = {
   display: "flex",
@@ -37,7 +37,7 @@ const textCss = {
 
 const ThemeMenuItem = () => {
   if (isFeatureEnabled("theme") === false) return null;
-  const currentOption = getThemeOption();
+  const currentOption = getThemeSetting();
   const labels = {
     light: "Light",
     dark: "Dark",
@@ -59,7 +59,7 @@ const ThemeMenuItem = () => {
             checked={currentOption === option}
             css={menuItemCss}
             onSelect={() => {
-              setThemeOption(option);
+              setThemeSetting(option);
             }}
           >
             <Text css={textCss}>{labels[option]}</Text>
diff --git a/apps/designer/app/routes/rest/theme.$option.ts b/apps/designer/app/routes/rest/theme.$setting.ts
similarity index 62%
rename from apps/designer/app/routes/rest/theme.$option.ts
rename to apps/designer/app/routes/rest/theme.$setting.ts
index 384e703391..dd705c8198 100644
--- a/apps/designer/app/routes/rest/theme.$option.ts
+++ b/apps/designer/app/routes/rest/theme.$setting.ts
@@ -2,9 +2,9 @@ import { json, type LoaderFunction } from "@remix-run/node";
 import { themeCookieParser } from "~/shared/theme/index.server";
 
 export const loader: LoaderFunction = async ({ params }) => {
-  const { option } = params;
+  const { setting } = params;
   const headers = {
-    "Set-Cookie": await themeCookieParser.serialize(option),
+    "Set-Cookie": await themeCookieParser.serialize(setting),
   };
-  return json({ option }, { headers });
+  return json({ setting }, { headers });
 };
diff --git a/apps/designer/app/shared/theme/shared.ts b/apps/designer/app/shared/theme/shared.ts
index e415297314..4860713b97 100644
--- a/apps/designer/app/shared/theme/shared.ts
+++ b/apps/designer/app/shared/theme/shared.ts
@@ -1,5 +1,5 @@
-export type ThemeName = "dark" | "light";
+export type ColorScheme = "dark" | "light";
 
-export type ThemeOption = ThemeName | "system";
+export type ThemeSetting = ColorScheme | "system";
 
 export const cookieNamespace = "theme";
diff --git a/apps/designer/app/shared/theme/theme.server.ts b/apps/designer/app/shared/theme/theme.server.ts
index 40f5d44c4c..d072f0bb0f 100644
--- a/apps/designer/app/shared/theme/theme.server.ts
+++ b/apps/designer/app/shared/theme/theme.server.ts
@@ -1,14 +1,14 @@
 import { createCookie } from "@remix-run/node";
-import { cookieNamespace, type ThemeName, type ThemeOption } from "./shared";
+import { cookieNamespace, type ColorScheme, type ThemeSetting } from "./shared";
 
 export const themeCookieParser = createCookie(cookieNamespace);
 
 export const getServerTheme = async (
   request: Request
-): Promise<{ system?: ThemeName; option?: ThemeOption }> => {
+): Promise<{ system?: ColorScheme; option?: ThemeSetting }> => {
   const system = (request.headers.get("Sec-CH-Prefers-Color-Scheme") ??
-    undefined) as ThemeName | undefined;
-  const option: ThemeOption =
+    undefined) as ColorScheme | undefined;
+  const option: ThemeSetting =
     (await themeCookieParser.parse(request.headers.get("Cookie"))) ?? undefined;
   return { system, option };
 };
diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index f87aa7e098..fae431a5e9 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -1,30 +1,30 @@
 import { useLoaderData } from "@remix-run/react";
 import { darkTheme } from "~/shared/design-system";
-import { type ThemeName, type ThemeOption } from "./shared";
+import { type ColorScheme, type ThemeSetting } from "./shared";
 
-// User selected theme option.
-let option: ThemeOption = "dark";
+// User selected theme setting.
+let setting: ThemeSetting = "dark";
 // Current systeme theme.
-let system: ThemeName;
+let system: ColorScheme;
 
 const subscribeSystemTheme = () => {
   if (typeof matchMedia === "undefined") return;
   const query = matchMedia("(prefers-color-scheme: light)");
-  const getTheme = (query: MediaQueryList | MediaQueryListEvent) =>
+  const getColorScheme = (query: MediaQueryList | MediaQueryListEvent) =>
     query.matches ? "light" : "dark";
 
-  system = getTheme(query);
+  system = getColorScheme(query);
 
   query.addEventListener("change", (queryEvent) => {
-    system = getTheme(queryEvent);
+    system = getColorScheme(queryEvent);
     setDomProps();
   });
 };
 
 subscribeSystemTheme();
 
-export const getThemeOption = (): ThemeOption => {
-  return option;
+export const getThemeSetting = (): ThemeSetting => {
+  return setting;
 };
 
 // @todo todo switch to light by default once ready
@@ -32,19 +32,19 @@ export const defaultTheme = "dark";
 
 const selectTheme = ({
   system = defaultTheme,
-  option,
+  setting,
 }: {
-  system: ThemeName;
-  option?: ThemeOption;
-}): ThemeName => {
-  if (option === "system") {
+  system: ColorScheme;
+  setting?: ThemeSetting;
+}): ColorScheme => {
+  if (setting === "system") {
     return system;
   }
-  return option || defaultTheme;
+  return setting || defaultTheme;
 };
 
 const getThemeProps = () => {
-  const theme = selectTheme({ option, system });
+  const theme = selectTheme({ setting, system });
   if (theme === "dark") {
     // We need to call it so that vars get injected!!!
     darkTheme.toString();
@@ -61,15 +61,15 @@ const setDomProps = () => {
   document.documentElement.style.colorScheme = props.style.colorScheme;
 };
 
-export const setThemeOption = (nextOption: ThemeOption) => {
-  option = nextOption;
+export const setThemeSetting = (nextsetting: ThemeSetting) => {
+  setting = nextsetting;
   setDomProps();
-  fetch(`/rest/theme/${option}`);
+  fetch(`/rest/theme/${setting}`);
 };
 
 export const useThemeProps = () => {
   const data = useLoaderData();
-  if (data.theme.option) option = data.theme.option;
+  if (data.theme.setting) setting = data.theme.setting;
   if (data.theme.system) system = data.theme.system;
   return getThemeProps();
 };

From 76f5808eb2f94a2e2079ba7e085601fd1b2c9a90 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 9 Jul 2022 14:06:07 +0200
Subject: [PATCH 09/19] better types

---
 .../designer/features/topbar/menu/menu.tsx    | 24 +++++++++++--------
 apps/designer/app/shared/theme/index.ts       |  1 +
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx
index f549529b5e..eb3fde05a6 100644
--- a/apps/designer/app/designer/features/topbar/menu/menu.tsx
+++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx
@@ -20,7 +20,11 @@ import {
   useIsPublishDialogOpen,
 } from "~/designer/shared/nano-states";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getThemeSetting, setThemeSetting } from "~/shared/theme";
+import {
+  getThemeSetting,
+  setThemeSetting,
+  type ThemeSetting,
+} from "~/shared/theme";
 
 const menuItemCss = {
   display: "flex",
@@ -37,14 +41,14 @@ const textCss = {
 
 const ThemeMenuItem = () => {
   if (isFeatureEnabled("theme") === false) return null;
-  const currentOption = getThemeSetting();
-  const labels = {
+  const currentSetting = getThemeSetting();
+  const labels: Record<ThemeSetting, string> = {
     light: "Light",
     dark: "Dark",
     system: "System theme",
-  } as const;
+  };
 
-  const options = Object.keys(labels) as Array<keyof typeof labels>;
+  const settings = Object.keys(labels) as Array<ThemeSetting>;
 
   return (
     <DropdownMenu>
@@ -53,16 +57,16 @@ const ThemeMenuItem = () => {
         <ChevronRightIcon />
       </DropdownMenuTriggerItem>
       <DropdownMenuContent>
-        {options.map((option) => (
+        {settings.map((setting) => (
           <DropdownMenuCheckboxItem
-            key={option}
-            checked={currentOption === option}
+            key={setting}
+            checked={currentSetting === setting}
             css={menuItemCss}
             onSelect={() => {
-              setThemeSetting(option);
+              setThemeSetting(setting);
             }}
           >
-            <Text css={textCss}>{labels[option]}</Text>
+            <Text css={textCss}>{labels[setting]}</Text>
           </DropdownMenuCheckboxItem>
         ))}
       </DropdownMenuContent>
diff --git a/apps/designer/app/shared/theme/index.ts b/apps/designer/app/shared/theme/index.ts
index 3797aeae07..66b920f045 100644
--- a/apps/designer/app/shared/theme/index.ts
+++ b/apps/designer/app/shared/theme/index.ts
@@ -1 +1,2 @@
 export * from "./theme";
+export type { ThemeSetting } from "./shared";

From 37da56d46996f5c932b6b5f8ab315ef0be075929 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 9 Jul 2022 14:44:12 +0200
Subject: [PATCH 10/19] cleanup, docs

---
 apps/designer/app/routes/dashboard.tsx        |  4 +-
 apps/designer/app/routes/designer.tsx         |  4 +-
 apps/designer/app/routes/login.tsx            |  4 +-
 .../app/routes/rest/theme.$setting.ts         |  2 +-
 .../designer/app/shared/theme/index.server.ts |  2 -
 apps/designer/app/shared/theme/index.ts       |  3 +-
 .../designer/app/shared/theme/theme.server.ts | 12 +--
 apps/designer/app/shared/theme/theme.ts       | 77 ++++++++++++-------
 .../app/shared/theme/{shared.ts => types.ts}  |  3 -
 9 files changed, 66 insertions(+), 45 deletions(-)
 delete mode 100644 apps/designer/app/shared/theme/index.server.ts
 rename apps/designer/app/shared/theme/{shared.ts => types.ts} (69%)

diff --git a/apps/designer/app/routes/dashboard.tsx b/apps/designer/app/routes/dashboard.tsx
index ca41594442..20bd4e9ce0 100644
--- a/apps/designer/app/routes/dashboard.tsx
+++ b/apps/designer/app/routes/dashboard.tsx
@@ -1,12 +1,12 @@
 import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
-import { getServerTheme } from "~/shared/theme/theme.server";
+import { getThemeData } from "~/shared/theme";
 
 export const loader: LoaderFunction = async ({ request }) => {
   return {
     env,
-    theme: await getServerTheme(request),
+    theme: await getThemeData(request),
   };
 };
 
diff --git a/apps/designer/app/routes/designer.tsx b/apps/designer/app/routes/designer.tsx
index e7ebd09bc3..7097e1b5cf 100644
--- a/apps/designer/app/routes/designer.tsx
+++ b/apps/designer/app/routes/designer.tsx
@@ -1,12 +1,12 @@
 import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
-import { getServerTheme } from "~/shared/theme/theme.server";
+import { getThemeData } from "~/shared/theme";
 
 export const loader: LoaderFunction = async ({ request }) => {
   return {
     env,
-    theme: await getServerTheme(request),
+    theme: await getThemeData(request),
   };
 };
 
diff --git a/apps/designer/app/routes/login.tsx b/apps/designer/app/routes/login.tsx
index 66b2c3c640..99d9febb01 100644
--- a/apps/designer/app/routes/login.tsx
+++ b/apps/designer/app/routes/login.tsx
@@ -1,12 +1,12 @@
 import { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { Designer } from "~/shared/documents/designer";
 import env from "~/env.server";
-import { getServerTheme } from "~/shared/theme/theme.server";
+import { getThemeData } from "~/shared/theme";
 
 export const loader: LoaderFunction = async ({ request }) => {
   return {
     env,
-    theme: await getServerTheme(request),
+    theme: await getThemeData(request),
   };
 };
 
diff --git a/apps/designer/app/routes/rest/theme.$setting.ts b/apps/designer/app/routes/rest/theme.$setting.ts
index dd705c8198..eae98b218b 100644
--- a/apps/designer/app/routes/rest/theme.$setting.ts
+++ b/apps/designer/app/routes/rest/theme.$setting.ts
@@ -1,5 +1,5 @@
 import { json, type LoaderFunction } from "@remix-run/node";
-import { themeCookieParser } from "~/shared/theme/index.server";
+import { themeCookieParser } from "~/shared/theme";
 
 export const loader: LoaderFunction = async ({ params }) => {
   const { setting } = params;
diff --git a/apps/designer/app/shared/theme/index.server.ts b/apps/designer/app/shared/theme/index.server.ts
deleted file mode 100644
index 6a20ed7455..0000000000
--- a/apps/designer/app/shared/theme/index.server.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./theme";
-export * from "./theme.server";
diff --git a/apps/designer/app/shared/theme/index.ts b/apps/designer/app/shared/theme/index.ts
index 66b920f045..c13a0815fd 100644
--- a/apps/designer/app/shared/theme/index.ts
+++ b/apps/designer/app/shared/theme/index.ts
@@ -1,2 +1,3 @@
 export * from "./theme";
-export type { ThemeSetting } from "./shared";
+export * from "./theme.server";
+export type { ThemeSetting } from "./types";
diff --git a/apps/designer/app/shared/theme/theme.server.ts b/apps/designer/app/shared/theme/theme.server.ts
index d072f0bb0f..8252b8b984 100644
--- a/apps/designer/app/shared/theme/theme.server.ts
+++ b/apps/designer/app/shared/theme/theme.server.ts
@@ -1,14 +1,16 @@
 import { createCookie } from "@remix-run/node";
-import { cookieNamespace, type ColorScheme, type ThemeSetting } from "./shared";
+import type { ColorScheme, ThemeSetting } from "./types";
+
+const cookieNamespace = "theme";
 
 export const themeCookieParser = createCookie(cookieNamespace);
 
-export const getServerTheme = async (
+export const getThemeData = async (
   request: Request
-): Promise<{ system?: ColorScheme; option?: ThemeSetting }> => {
+): Promise<{ system?: ColorScheme; setting?: ThemeSetting }> => {
   const system = (request.headers.get("Sec-CH-Prefers-Color-Scheme") ??
     undefined) as ColorScheme | undefined;
-  const option: ThemeSetting =
+  const setting: ThemeSetting =
     (await themeCookieParser.parse(request.headers.get("Cookie"))) ?? undefined;
-  return { system, option };
+  return { system, setting };
 };
diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index fae431a5e9..05f672cabc 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -1,12 +1,15 @@
 import { useLoaderData } from "@remix-run/react";
 import { darkTheme } from "~/shared/design-system";
-import { type ColorScheme, type ThemeSetting } from "./shared";
+import type { ColorScheme, ThemeSetting } from "./types";
 
 // User selected theme setting.
 let setting: ThemeSetting = "dark";
 // Current systeme theme.
 let system: ColorScheme;
 
+/**
+ * Subscribes color scheme change event and rerenders
+ */
 const subscribeSystemTheme = () => {
   if (typeof matchMedia === "undefined") return;
   const query = matchMedia("(prefers-color-scheme: light)");
@@ -17,59 +20,79 @@ const subscribeSystemTheme = () => {
 
   query.addEventListener("change", (queryEvent) => {
     system = getColorScheme(queryEvent);
-    setDomProps();
+    renderThemeProps();
   });
 };
 
 subscribeSystemTheme();
 
-export const getThemeSetting = (): ThemeSetting => {
-  return setting;
-};
-
 // @todo todo switch to light by default once ready
-export const defaultTheme = "dark";
+const defaultTheme = "dark";
 
-const selectTheme = ({
-  system = defaultTheme,
-  setting,
-}: {
-  system: ColorScheme;
-  setting?: ThemeSetting;
-}): ColorScheme => {
+/**
+ * Logic we use to decide depending on user setting which color scheme to use.
+ * @returns
+ */
+const getColorScheme = (): ColorScheme => {
   if (setting === "system") {
-    return system;
+    return system || defaultTheme;
   }
   return setting || defaultTheme;
 };
 
 const getThemeProps = () => {
-  const theme = selectTheme({ setting, system });
-  if (theme === "dark") {
-    // We need to call it so that vars get injected!!!
-    darkTheme.toString();
-  }
+  const theme = getColorScheme();
   return {
     className: theme,
     style: { colorScheme: theme },
   };
 };
 
-const setDomProps = () => {
-  const props = getThemeProps();
-  document.documentElement.className = props.className;
-  document.documentElement.style.colorScheme = props.style.colorScheme;
+/**
+ * We need to call it so that vars get injected.
+ * Not loving this implicit behavior.
+ * Light scheme is also rendered by default, so we only need to do it for the dark.
+ */
+const renderDarkThemeVars = () => {
+  const theme = getColorScheme();
+  if (theme === "dark") {
+    darkTheme.toString();
+  }
 };
 
-export const setThemeSetting = (nextsetting: ThemeSetting) => {
-  setting = nextsetting;
-  setDomProps();
+/**
+ * When switching theme we need to apply the class/style manually.
+ */
+const renderThemeProps = () => {
+  const { className, style } = getThemeProps();
+  renderDarkThemeVars();
+  document.documentElement.className = className;
+  document.documentElement.style.colorScheme = style.colorScheme;
+};
+
+/**
+ * Apply immediately and set the cookie on the server.
+ */
+export const setThemeSetting = (nextSetting: ThemeSetting) => {
+  setting = nextSetting;
+  renderThemeProps();
   fetch(`/rest/theme/${setting}`);
 };
 
+/**
+ * Returns the class and style to applied to some root node serverside and during hydration.
+ */
 export const useThemeProps = () => {
   const data = useLoaderData();
   if (data.theme.setting) setting = data.theme.setting;
   if (data.theme.system) system = data.theme.system;
+  renderDarkThemeVars();
   return getThemeProps();
 };
+
+/**
+ * Currently selected by user theme setting.
+ */
+export const getThemeSetting = (): ThemeSetting => {
+  return setting;
+};
diff --git a/apps/designer/app/shared/theme/shared.ts b/apps/designer/app/shared/theme/types.ts
similarity index 69%
rename from apps/designer/app/shared/theme/shared.ts
rename to apps/designer/app/shared/theme/types.ts
index 4860713b97..30553c6b07 100644
--- a/apps/designer/app/shared/theme/shared.ts
+++ b/apps/designer/app/shared/theme/types.ts
@@ -1,5 +1,2 @@
 export type ColorScheme = "dark" | "light";
-
 export type ThemeSetting = ColorScheme | "system";
-
-export const cookieNamespace = "theme";

From 939fa45c834fae2af9a02b3c4ea6d9c65d506c41 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 9 Jul 2022 14:50:28 +0200
Subject: [PATCH 11/19] not sure where to put foundational explanations for a
 "thing"

---
 apps/designer/app/shared/theme/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/designer/app/shared/theme/index.ts b/apps/designer/app/shared/theme/index.ts
index c13a0815fd..b47713ebdd 100644
--- a/apps/designer/app/shared/theme/index.ts
+++ b/apps/designer/app/shared/theme/index.ts
@@ -1,3 +1,6 @@
+// This article explains the foundation of the technique we are using
+// https://rossmoody.com/writing/remix-stitches
+
 export * from "./theme";
 export * from "./theme.server";
 export type { ThemeSetting } from "./types";

From ba0cedb3c3a4c9ed986ba651973598b41be239ce Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 18:48:40 +0200
Subject: [PATCH 12/19] prevent depending on a global class name

---
 apps/designer/app/shared/design-system/stitches.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/apps/designer/app/shared/design-system/stitches.config.ts
index 09be767c99..bfcc0cab4b 100644
--- a/apps/designer/app/shared/design-system/stitches.config.ts
+++ b/apps/designer/app/shared/design-system/stitches.config.ts
@@ -433,7 +433,7 @@ export const {
 
 export type CSS = Stitches.CSS<typeof config>;
 
-export const darkTheme = createTheme("dark", {
+export const darkTheme = createTheme({
   colors: {
     ...grayDark,
     ...mauveDark,

From 91dabd3d006d0b6b83ceaef0d67f218c865c2846 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 18:48:52 +0200
Subject: [PATCH 13/19] add data-theme attribute

---
 apps/designer/app/shared/theme/theme.ts | 39 +++++++++----------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index 05f672cabc..444ce09210 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -40,34 +40,17 @@ const getColorScheme = (): ColorScheme => {
   return setting || defaultTheme;
 };
 
-const getThemeProps = () => {
-  const theme = getColorScheme();
-  return {
-    className: theme,
-    style: { colorScheme: theme },
-  };
-};
-
-/**
- * We need to call it so that vars get injected.
- * Not loving this implicit behavior.
- * Light scheme is also rendered by default, so we only need to do it for the dark.
- */
-const renderDarkThemeVars = () => {
-  const theme = getColorScheme();
-  if (theme === "dark") {
-    darkTheme.toString();
-  }
-};
-
 /**
  * When switching theme we need to apply the class/style manually.
  */
 const renderThemeProps = () => {
-  const { className, style } = getThemeProps();
-  renderDarkThemeVars();
-  document.documentElement.className = className;
-  document.documentElement.style.colorScheme = style.colorScheme;
+  const theme = getColorScheme();
+  const root = document.documentElement;
+  theme === "dark"
+    ? (root.className = darkTheme.className)
+    : root.removeAttribute("class");
+  root.style.colorScheme = theme;
+  root.dataset.theme = theme;
 };
 
 /**
@@ -86,8 +69,12 @@ export const useThemeProps = () => {
   const data = useLoaderData();
   if (data.theme.setting) setting = data.theme.setting;
   if (data.theme.system) system = data.theme.system;
-  renderDarkThemeVars();
-  return getThemeProps();
+  const theme = getColorScheme();
+  return {
+    className: theme === "dark" ? darkTheme.className : undefined,
+    style: { colorScheme: theme },
+    "data-theme": theme,
+  };
 };
 
 /**

From 1e93f4318ada9a650ca04908684399d8409deaac Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 19:00:43 +0200
Subject: [PATCH 14/19] allow other potential classes on the root to stay

---
 apps/designer/app/shared/theme/theme.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index 444ce09210..23ea40f215 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -47,8 +47,8 @@ const renderThemeProps = () => {
   const theme = getColorScheme();
   const root = document.documentElement;
   theme === "dark"
-    ? (root.className = darkTheme.className)
-    : root.removeAttribute("class");
+    ? root.classList.add(darkTheme.className)
+    : root.classList.remove(darkTheme.className);
   root.style.colorScheme = theme;
   root.dataset.theme = theme;
 };

From 66053f67e366039fcbc270f0a1fba0c3ddeb2e5e Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 19:03:26 +0200
Subject: [PATCH 15/19] better naming

---
 apps/designer/app/shared/theme/theme.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index 23ea40f215..ea664fd9b2 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -13,13 +13,13 @@ let system: ColorScheme;
 const subscribeSystemTheme = () => {
   if (typeof matchMedia === "undefined") return;
   const query = matchMedia("(prefers-color-scheme: light)");
-  const getColorScheme = (query: MediaQueryList | MediaQueryListEvent) =>
+  const queryColorScheme = (query: MediaQueryList | MediaQueryListEvent) =>
     query.matches ? "light" : "dark";
 
-  system = getColorScheme(query);
+  system = queryColorScheme(query);
 
   query.addEventListener("change", (queryEvent) => {
-    system = getColorScheme(queryEvent);
+    system = queryColorScheme(queryEvent);
     renderThemeProps();
   });
 };

From d924ac9febbab68f0ded82a153be74162917c1ca Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 20:07:04 +0200
Subject: [PATCH 16/19] unused comment

---
 apps/designer/app/shared/theme/theme.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/designer/app/shared/theme/theme.ts b/apps/designer/app/shared/theme/theme.ts
index ea664fd9b2..5771192ef3 100644
--- a/apps/designer/app/shared/theme/theme.ts
+++ b/apps/designer/app/shared/theme/theme.ts
@@ -31,7 +31,6 @@ const defaultTheme = "dark";
 
 /**
  * Logic we use to decide depending on user setting which color scheme to use.
- * @returns
  */
 const getColorScheme = (): ColorScheme => {
   if (setting === "system") {

From 2f388d7afc35452bac19c9bd22a90dd2dad0fdee Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 11 Jul 2022 22:39:03 +0200
Subject: [PATCH 17/19] fix flicker when hovering over label

because when hovering a label, we receive mouseout and hide label and then on repeat
---
 .../designer/features/workspace/canvas-tools/outline/label.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
index b05b80a5bf..5df30b9c7c 100644
--- a/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
+++ b/apps/designer/app/designer/features/workspace/canvas-tools/outline/label.tsx
@@ -50,7 +50,6 @@ const LabelContainer = styled(
     minWidth: "$6",
     whiteSpace: "nowrap",
     backgroundColor: "$blue9",
-    pointerEvents: "auto",
   },
   {
     variants: {

From b33c315f10bfbfbf422a900c18e53f49707d0d88 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 13 Jul 2022 11:39:27 +0200
Subject: [PATCH 18/19] catch user settings errors in sentry

---
 .../shared/client-settings/settings.ts        | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/designer/app/designer/shared/client-settings/settings.ts b/apps/designer/app/designer/shared/client-settings/settings.ts
index 2235afa106..7c93a8fdc4 100644
--- a/apps/designer/app/designer/shared/client-settings/settings.ts
+++ b/apps/designer/app/designer/shared/client-settings/settings.ts
@@ -1,5 +1,6 @@
-import * as values from "./values";
 import { useSubscribe } from "@webstudio-is/sdk";
+import { sentryException } from "~/shared/sentry";
+import * as values from "./values";
 
 type Name = keyof typeof values;
 type Value = typeof values[Name]["values"][number];
@@ -8,13 +9,27 @@ type Settings = Partial<Record<Name, Value>>;
 const namespace = "__webstudio_user_settings__";
 
 const read = (): Settings => {
+  let settingsString;
   try {
-    const settings = localStorage.getItem(namespace);
-    if (settings === null) return {};
-    return JSON.parse(settings);
-  } catch (error) {
+    settingsString = localStorage.getItem(namespace);
+  } catch (_error) {
     // We don't need to handle this one.
   }
+
+  if (settingsString == null) return {};
+
+  try {
+    return JSON.parse(settingsString);
+  } catch (error) {
+    if (error instanceof Error) {
+      sentryException({
+        message: "Bad user settings in local storage",
+        extra: {
+          error: error.message,
+        },
+      });
+    }
+  }
   return {};
 };
 

From 053e86a1d978a688ad6dfed7bc16f568a770d515 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Wed, 13 Jul 2022 11:43:25 +0200
Subject: [PATCH 19/19] comment on feature flag behavior

---
 apps/designer/app/shared/feature-flags/feature.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/designer/app/shared/feature-flags/feature.ts b/apps/designer/app/shared/feature-flags/feature.ts
index 0385a3adff..185e07aabb 100644
--- a/apps/designer/app/shared/feature-flags/feature.ts
+++ b/apps/designer/app/shared/feature-flags/feature.ts
@@ -28,5 +28,7 @@ export const isFeatureEnabled = (name: Name): boolean => {
   const defaultValue = flags[name];
   const envValue = parse(env.FEATURE).includes(name);
   const localValue = readLocal().includes(name);
+  // Any source can enable feature, first `true` value will result in enabling a feature.
+  // This also means you can't disable a feature if its already enabled in default value.
   return localValue || envValue || defaultValue;
 };