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

Browse Source
This commit is contained in:
AykutSarac 2024-05-08 11:00:04 +03:00
parent 30d39e70ac
commit c6f7bf91c3
No known key found for this signature in database
1 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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