From f5c4a5ad493bc6dc9ba518d0e8880344ab14af00 Mon Sep 17 00:00:00 2001
From: Patryk Andrzejewski <vox3r69@gmail.com>
Date: Thu, 2 Mar 2023 15:34:00 +0100
Subject: [PATCH] Remove old macaw theme key (#3251)

* Remove old macaw theme key

* Handle cases when mixed values are enabled

* Handle cases when mixed values are enabled

* Handle cases when mixed values are enabled
---
 src/components/Sidebar/user/Controls.tsx |  6 ++----
 src/index.tsx                            | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/user/Controls.tsx b/src/components/Sidebar/user/Controls.tsx
index b265d023a..736afa639 100644
--- a/src/components/Sidebar/user/Controls.tsx
+++ b/src/components/Sidebar/user/Controls.tsx
@@ -1,5 +1,4 @@
 import { useUser } from "@dashboard/auth";
-import { isDarkTheme } from "@dashboard/misc";
 import { staffMemberDetailsUrl } from "@dashboard/staff/urls";
 import { useTheme } from "@dashboard/theme";
 import { useTheme as useLegacyTheme } from "@saleor/macaw-ui";
@@ -21,11 +20,10 @@ import { ThemeSwitcher } from "./ThemeSwitcher";
 export const UserControls = () => {
   const { user, logout } = useUser();
   const { theme, setTheme } = useTheme();
-  const { themeType: legacyThemeType, setTheme: setLegacyTheme } =
-    useLegacyTheme();
+  const { setTheme: setLegacyTheme } = useLegacyTheme();
 
   const handleClick = () => {
-    setLegacyTheme(isDarkTheme(legacyThemeType) ? "light" : "dark");
+    setLegacyTheme(theme === "defaultLight" ? "dark" : "light");
     setTheme(theme === "defaultLight" ? "defaultDark" : "defaultLight");
   };
 
diff --git a/src/index.tsx b/src/index.tsx
index 4e26d9d7f..1d171ed8a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -84,6 +84,23 @@ if (process.env.GTM_ID) {
 
 errorTracker.init();
 
+/*
+  Handle legacy theming toggle. Since we use new and old macaw,
+  we need to handle both theme swticher for a while.
+*/
+const handleLegacyTheming = () => {
+  const activeTheme = localStorage.getItem("activeMacawUITheme");
+
+  if (activeTheme === "defaultDark") {
+    localStorage.setItem("macaw-ui-theme", "dark");
+    return;
+  }
+
+  localStorage.setItem("macaw-ui-theme", "light");
+};
+
+handleLegacyTheming();
+
 const App: React.FC = () => (
   <SaleorProvider client={saleorClient}>
     <ApolloProvider client={apolloClient}>