refactor: split theme context into a file

Author: marabesi

src/App.tsx

@@ -5,16 +5,14 @@ import { createContext, useEffect, useState } from 'react';
 import DefaultLayout from './components/ui/layout/Default';
 import { editorOptions } from './components/ui/editor/default-options';
 import { EditorOptions } from './types/components/Editor';
+import { theme, ThemeProvider } from './DarkMode';
 
 export const SettingsContext = createContext(editorOptions);
 
 const isDarkModeSet = () => {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
 
-const theme = { darkMode: false };
-export const ThemeContext = createContext(theme);
-
 function App() {
   const [savedState, setSavedState] = useState<string>('');
   const [darkModeEnabled, setDarkMode] = useState<boolean>(theme.darkMode);
@@ -39,7 +37,7 @@ function App() {
 
   return (
     <Router>
-      <ThemeContext.Provider value={theme as never}>
+      <ThemeProvider value={theme as never}>
         <DefaultLayout onDarkThemeChanged={onDarkThemeChanged} darkModeEnabled={darkModeEnabled}>
           <Routes>
             <Route path="/" element={<Editors onPersist={saveState} currentJson={savedState} />} />
@@ -50,7 +48,7 @@ function App() {
             } />
           </Routes>
         </DefaultLayout>
-      </ThemeContext.Provider>
+      </ThemeProvider>
     </Router>
   );
 }

src/DarkMode.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const theme = { darkMode: false };
+export const ThemeContext = createContext(theme);
+
+export const ThemeProvider = ThemeContext.Provider;
+

src/components/ui/editor/JsonEditor.tsx

@@ -1,10 +1,11 @@
 import CodeMirror, { BasicSetupOptions, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import fullConfig from '../../../tailwindResolver';
 import { json } from '@codemirror/lang-json';
-import { SettingsContext, ThemeContext } from '../../../App';
+import { SettingsContext } from '../../../App';
 import { CSSProperties, ForwardedRef, forwardRef, useContext } from 'react';
 import { Option, Properties } from '../../../types/components/Editor';
 import { duotoneLight } from '@uiw/codemirror-theme-duotone';
+import { ThemeContext } from '../../../DarkMode';
 
 type Event = {
   value: string;