diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx
index f219c7e..eed1a4d 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 } from "@mantine/core";
+import { MantineProvider, useMantineColorScheme } from "@mantine/core";
 import { ThemeProvider } from "styled-components";
 import toast from "react-hot-toast";
 import { darkTheme, lightTheme } from "src/constants/theme";
@@ -26,6 +26,7 @@ const Graph = dynamic(() => import("src/containers/Views/GraphView").then(c => c
 
 const WidgetPage = () => {
   const { query, push, isReady } = useRouter();
+  const { setColorScheme } = useMantineColorScheme();
   const [theme, setTheme] = React.useState<"dark" | "light">("dark");
   const checkEditorSession = useFile(state => state.checkEditorSession);
   const setContents = useFile(state => state.setContents);
@@ -45,6 +46,7 @@ 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);
         }
 
@@ -58,7 +60,7 @@ const WidgetPage = () => {
 
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [setContents, setDirection, theme]);
+  }, [setColorScheme, setContents, setDirection, theme]);
 
   return (
     <>
@@ -66,7 +68,7 @@ const WidgetPage = () => {
         <meta name="robots" content="noindex,nofollow" />
       </Head>
       <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
-        <MantineProvider forceColorScheme={theme}>
+        <MantineProvider defaultColorScheme={theme}>
           <Toolbar isWidget />
           <Graph isWidget />
         </MantineProvider>