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: color scheme mantine

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

2
src/components/Loading/index.tsx
View File

@ -8,7 +8,7 @@ export const Loading = () => {
React.useEffect(() => { React.useEffect(() => {
const handleStart = (url: string) => { const handleStart = (url: string) => {
return url !== router.asPath && url === "/editor" && setLoading(true); return url !== router.asPath && (url === "/editor" || url === "/widget") && setLoading(true);
}; };
const handleComplete = (url: string) => url === router.asPath && setLoading(false); const handleComplete = (url: string) => url === router.asPath && setLoading(false);

24
src/layout/Layout/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { MantineProvider } from "@mantine/core"; import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components"; import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme"; import { lightTheme } from "src/constants/theme";
import { Footer } from "../Footer"; import { Footer } from "../Footer";
@ -10,17 +10,21 @@ const StyledLayoutWrapper = styled.div`
`; `;
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { setColorScheme } = useMantineColorScheme();
React.useEffect(() => {
setColorScheme("light");
}, [setColorScheme]);
return ( return (
<React.Suspense> <React.Suspense>
<MantineProvider forceColorScheme="light"> <ThemeProvider theme={lightTheme}>
<ThemeProvider theme={lightTheme}> <StyledLayoutWrapper>
<StyledLayoutWrapper> <Navbar />
<Navbar /> {children}
{children} <Footer />
<Footer /> </StyledLayoutWrapper>
</StyledLayoutWrapper> </ThemeProvider>
</ThemeProvider>
</MantineProvider>
</React.Suspense> </React.Suspense>
); );
}; };

2
src/pages/_document.tsx
View File

@ -6,6 +6,7 @@ import Document, {
DocumentContext, DocumentContext,
DocumentInitialProps, DocumentInitialProps,
} from "next/document"; } from "next/document";
import { ColorSchemeScript } from "@mantine/core";
import { ServerStyleSheet } from "styled-components"; import { ServerStyleSheet } from "styled-components";
const metatags = Object.freeze({ const metatags = Object.freeze({
@ -57,6 +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" />
</Head> </Head>
<body> <body>
<Main /> <Main />

35
src/pages/editor.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 { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components"; import styled, { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { darkTheme, lightTheme } from "src/constants/theme"; import { darkTheme, lightTheme } from "src/constants/theme";
@ -41,6 +41,7 @@ export const StyledEditorWrapper = styled.div`
const EditorPage: React.FC = () => { const EditorPage: React.FC = () => {
const { query, isReady } = useRouter(); const { query, isReady } = useRouter();
const { setColorScheme } = useMantineColorScheme();
const checkEditorSession = useFile(state => state.checkEditorSession); const checkEditorSession = useFile(state => state.checkEditorSession);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled); const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
@ -48,6 +49,10 @@ const EditorPage: React.FC = () => {
if (isReady) checkEditorSession(query?.json); if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]); }, [checkEditorSession, isReady, query]);
React.useEffect(() => {
setColorScheme(darkmodeEnabled ? "dark" : "light");
}, [darkmodeEnabled, setColorScheme]);
return ( return (
<> <>
<Head> <Head>
@ -55,21 +60,19 @@ const EditorPage: React.FC = () => {
<link rel="canonical" href="https://jsoncrack.com/editor" /> <link rel="canonical" href="https://jsoncrack.com/editor" />
</Head> </Head>
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}> <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}> <QueryClientProvider client={queryClient}>
<QueryClientProvider client={queryClient}> <ExternalMode />
<ExternalMode /> <ModalController />
<ModalController /> <StyledEditorWrapper>
<StyledEditorWrapper> <StyledPageWrapper>
<StyledPageWrapper> <Toolbar />
<Toolbar /> <StyledEditorWrapper>
<StyledEditorWrapper> <Panes />
<Panes /> </StyledEditorWrapper>
</StyledEditorWrapper> </StyledPageWrapper>
</StyledPageWrapper> <BottomBar />
<BottomBar /> </StyledEditorWrapper>
</StyledEditorWrapper> </QueryClientProvider>
</QueryClientProvider>
</MantineProvider>
</ThemeProvider> </ThemeProvider>
</> </>
); );

1
src/pages/widget.tsx
View File

@ -37,6 +37,7 @@ const WidgetPage = () => {
if (isReady) { if (isReady) {
if (typeof query?.json === "string") checkEditorSession(query.json, true); if (typeof query?.json === "string") checkEditorSession(query.json, true);
else clearGraph(); else clearGraph();
window.parent.postMessage(window.frameElement?.getAttribute("id"), "*"); window.parent.postMessage(window.frameElement?.getAttribute("id"), "*");
} }
}, [clearGraph, checkEditorSession, isReady, push, query.json, query.partner]); }, [clearGraph, checkEditorSession, isReady, push, query.json, query.partner]);