GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: widget theme color

Browse Source
This commit is contained in:
AykutSarac 2024-05-06 23:02:33 +03:00
parent 7fa47e955a
commit b312d28be3
No known key found for this signature in database
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/widget.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { MantineProvider } from "@mantine/core"; import { MantineProvider, useMantineColorScheme } from "@mantine/core";
import { ThemeProvider } from "styled-components"; import { ThemeProvider } from "styled-components";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { darkTheme, lightTheme } from "src/constants/theme"; 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 WidgetPage = () => {
const { query, push, isReady } = useRouter(); const { query, push, isReady } = useRouter();
const { setColorScheme } = useMantineColorScheme();
const [theme, setTheme] = React.useState<"dark" | "light">("dark"); const [theme, setTheme] = React.useState<"dark" | "light">("dark");
const checkEditorSession = useFile(state => state.checkEditorSession); const checkEditorSession = useFile(state => state.checkEditorSession);
const setContents = useFile(state => state.setContents); const setContents = useFile(state => state.setContents);
@ -45,6 +46,7 @@ const WidgetPage = () => {
try { try {
if (!event.data?.json) return; if (!event.data?.json) return;
if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") { if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") {
setColorScheme(event.data.options.theme);
setTheme(event.data.options.theme); setTheme(event.data.options.theme);
} }
@ -58,7 +60,7 @@ const WidgetPage = () => {
window.addEventListener("message", handler); window.addEventListener("message", handler);
return () => window.removeEventListener("message", handler); return () => window.removeEventListener("message", handler);
}, [setContents, setDirection, theme]); }, [setColorScheme, setContents, setDirection, theme]);
return ( return (
<> <>
@ -66,7 +68,7 @@ const WidgetPage = () => {
<meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noindex,nofollow" />
</Head> </Head>
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}> <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
<MantineProvider forceColorScheme={theme}> <MantineProvider defaultColorScheme={theme}>
<Toolbar isWidget /> <Toolbar isWidget />
<Graph isWidget /> <Graph isWidget />
</MantineProvider> </MantineProvider>