GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: widget color scheme

Browse Source
This commit is contained in:
AykutSarac 2024-05-06 23:37:49 +03:00
parent 72236c08d6
commit a11089e1cf
No known key found for this signature in database
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/_document.tsx
View File

@ -58,7 +58,7 @@ class MyDocument extends Document {
<meta property="twitter:url" content="https://jsoncrack.com" key="twurl" /> <meta property="twitter:url" content="https://jsoncrack.com" key="twurl" />
<meta name="twitter:title" content={metatags.title} key="twtitle" /> <meta name="twitter:title" content={metatags.title} key="twtitle" />
<meta name="twitter:image" content={metatags.image} key="twimage" /> <meta name="twitter:image" content={metatags.image} key="twimage" />
<ColorSchemeScript defaultColorScheme="light" /> <ColorSchemeScript />
</Head> </Head>
<body> <body>
<Main /> <Main />

13
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, useMantineColorScheme } from "@mantine/core"; import { 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";
@ -47,7 +47,6 @@ 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);
} }
@ -63,16 +62,18 @@ const WidgetPage = () => {
return () => window.removeEventListener("message", handler); return () => window.removeEventListener("message", handler);
}, [setColorScheme, setContents, setDirection, theme]); }, [setColorScheme, setContents, setDirection, theme]);
React.useEffect(() => {
setColorScheme(theme);
}, [setColorScheme, theme]);
return ( return (
<> <>
<Head> <Head>
<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 defaultColorScheme={theme}> <Toolbar isWidget />
<Toolbar isWidget /> <Graph isWidget />
<Graph isWidget />
</MantineProvider>
</ThemeProvider> </ThemeProvider>
</> </>
); );