diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index d489d87..34dab96 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -8,7 +8,7 @@ export const Loading = () => {
React.useEffect(() => {
const handleStart = (url: string) => {
- return url !== router.asPath && url === "/editor" && setLoading(true);
+ return url !== router.asPath && (url === "/editor" || url === "/widget") && setLoading(true);
};
const handleComplete = (url: string) => url === router.asPath && setLoading(false);
diff --git a/src/layout/Layout/index.tsx b/src/layout/Layout/index.tsx
index d0697c4..a411beb 100644
--- a/src/layout/Layout/index.tsx
+++ b/src/layout/Layout/index.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { MantineProvider } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme";
import { Footer } from "../Footer";
@@ -10,17 +10,21 @@ const StyledLayoutWrapper = styled.div`
`;
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ const { setColorScheme } = useMantineColorScheme();
+
+ React.useEffect(() => {
+ setColorScheme("light");
+ }, [setColorScheme]);
+
return (
-
-
-
-
- {children}
-
-
-
-
+
+
+
+ {children}
+
+
+
);
};
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 0e1efa0..b26b4d9 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -6,6 +6,7 @@ import Document, {
DocumentContext,
DocumentInitialProps,
} from "next/document";
+import { ColorSchemeScript } from "@mantine/core";
import { ServerStyleSheet } from "styled-components";
const metatags = Object.freeze({
@@ -57,6 +58,7 @@ class MyDocument extends Document {
+
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index 78f738b..3c3cdb6 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -2,7 +2,7 @@ import React from "react";
import dynamic from "next/dynamic";
import Head from "next/head";
import { useRouter } from "next/router";
-import { MantineProvider } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { darkTheme, lightTheme } from "src/constants/theme";
@@ -41,6 +41,7 @@ export const StyledEditorWrapper = styled.div`
const EditorPage: React.FC = () => {
const { query, isReady } = useRouter();
+ const { setColorScheme } = useMantineColorScheme();
const checkEditorSession = useFile(state => state.checkEditorSession);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
@@ -48,6 +49,10 @@ const EditorPage: React.FC = () => {
if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]);
+ React.useEffect(() => {
+ setColorScheme(darkmodeEnabled ? "dark" : "light");
+ }, [darkmodeEnabled, setColorScheme]);
+
return (
<>
@@ -55,21 +60,19 @@ const EditorPage: React.FC = () => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx
index eed1a4d..64bfb67 100644
--- a/src/pages/widget.tsx
+++ b/src/pages/widget.tsx
@@ -37,6 +37,7 @@ const WidgetPage = () => {
if (isReady) {
if (typeof query?.json === "string") checkEditorSession(query.json, true);
else clearGraph();
+
window.parent.postMessage(window.frameElement?.getAttribute("id"), "*");
}
}, [clearGraph, checkEditorSession, isReady, push, query.json, query.partner]);