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: theme color

Browse Source
This commit is contained in:
AykutSarac 2024-05-06 22:20:48 +03:00
parent 536353239a
commit c6147418d9
No known key found for this signature in database
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/layout/EditorWrapper/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { MantineProvider } from "@mantine/core"; import { MantineProvider, useMantineColorScheme } from "@mantine/core";
import { ThemeProvider } from "styled-components"; import { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { lightTheme, darkTheme } from "src/constants/theme"; import { lightTheme, darkTheme } from "src/constants/theme";
@ -20,8 +20,13 @@ const queryClient = new QueryClient({
export const EditorWrapper: React.FC<{ export const EditorWrapper: React.FC<{
children: React.ReactNode; children: React.ReactNode;
}> = ({ children }) => { }> = ({ children }) => {
const { setColorScheme } = useMantineColorScheme();
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled); const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
React.useEffect(() => {
if (darkmodeEnabled) setColorScheme("dark");
}, [darkmodeEnabled, setColorScheme]);
return ( return (
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}> <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}> <MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}>

6
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";
@ -23,6 +23,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);
@ -42,6 +43,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);
} }
@ -55,7 +57,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 (
<MantineProvider forceColorScheme={theme}> <MantineProvider forceColorScheme={theme}>