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

@@ -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 } =
+  const { setTheme: setLegacyTheme } = useLegacyTheme();
-    useLegacyTheme();
 
   const handleClick = () => {
-    setLegacyTheme(isDarkTheme(legacyThemeType) ? "light" : "dark");
+    setLegacyTheme(theme === "defaultLight" ? "dark" : "light");
     setTheme(theme === "defaultLight" ? "defaultDark" : "defaultLight");
   };
 

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}>