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(() => {
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);

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

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

2
src/pages/_document.tsx
View File

@ -6,6 +6,7 @@ import Document, {
DocumentContext,
DocumentInitialProps,
} from "next/document";
import { ColorSchemeScript } from "@mantine/core";
import { ServerStyleSheet } from "styled-components";
const metatags = Object.freeze({
@ -57,6 +58,7 @@ class MyDocument extends Document {
<meta property="twitter:url" content="https://jsoncrack.com" key="twurl" />
<meta name="twitter:title" content={metatags.title} key="twtitle" />
<meta name="twitter:image" content={metatags.image} key="twimage" />
<ColorSchemeScript defaultColorScheme="light" />
</Head>
<body>
<Main />

35
src/pages/editor.tsx
View File

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

1
src/pages/widget.tsx
View File

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