diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index b26b4d9..d0e34a3 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -58,7 +58,7 @@ class MyDocument extends Document {
-
+
diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx
index 64bfb67..03052d0 100644
--- a/src/pages/widget.tsx
+++ b/src/pages/widget.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, useMantineColorScheme } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
import { ThemeProvider } from "styled-components";
import toast from "react-hot-toast";
import { darkTheme, lightTheme } from "src/constants/theme";
@@ -47,7 +47,6 @@ const WidgetPage = () => {
try {
if (!event.data?.json) return;
if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") {
- setColorScheme(event.data.options.theme);
setTheme(event.data.options.theme);
}
@@ -63,16 +62,18 @@ const WidgetPage = () => {
return () => window.removeEventListener("message", handler);
}, [setColorScheme, setContents, setDirection, theme]);
+ React.useEffect(() => {
+ setColorScheme(theme);
+ }, [setColorScheme, theme]);
+
return (
<>
-
-
-
-
+
+
);