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

9
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 { useMantineColorScheme } from "@mantine/core"; import { MantineProvider } 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,7 +41,6 @@ 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);
@ -49,16 +48,13 @@ 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>
<title>Editor | JSON Crack</title> <title>Editor | JSON Crack</title>
<link rel="canonical" href="https://jsoncrack.com/editor" /> <link rel="canonical" href="https://jsoncrack.com/editor" />
</Head> </Head>
<MantineProvider forceColorScheme="dark">
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}> <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ExternalMode /> <ExternalMode />
@ -74,6 +70,7 @@ const EditorPage: React.FC = () => {
</StyledEditorWrapper> </StyledEditorWrapper>
</QueryClientProvider> </QueryClientProvider>
</ThemeProvider> </ThemeProvider>
</MantineProvider>
</> </>
); );
}; };