Add support for system theme (#245)

* Add support for 'system' theme value

* Add ability to set theme to 'system' in settings

* Fix tsc errors for Theme

src/App.tsx

@@ -19,7 +19,7 @@ import {
   lineHighlightField,
   addLineHighlight,
 } from './editor/highlightextension'
-import { PaneType, Selections, useStore } from './useStore'
+import { PaneType, Selections, Themes, useStore } from './useStore'
 import { Logs, KCLErrors } from './components/Logs'
 import { CollapsiblePanel } from './components/CollapsiblePanel'
 import { MemoryPanel } from './components/MemoryPanel'
@@ -42,6 +42,7 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook'
 import { TEST } from './env'
 import { getNormalisedCoordinates } from './lib/utils'
+import { getSystemTheme } from './lib/getSystemTheme'
 
 export function App() {
   const streamRef = useRef<HTMLDivElement>(null)
@@ -127,6 +128,8 @@ export function App() {
     streamDimensions: s.streamDimensions,
   }))
 
+  const editorTheme = theme === Themes.System ? getSystemTheme() : theme
+
   // Pane toggling keyboard shortcuts
   const togglePane = useCallback(
     (newPane: PaneType) =>
@@ -460,26 +463,26 @@ export function App() {
                 ]}
                 onChange={onChange}
                 onUpdate={onUpdate}
-                theme={theme}
+                theme={editorTheme}
                 onCreateEditor={(_editorView) => setEditorView(_editorView)}
               />
             </div>
           </CollapsiblePanel>
           <section className="flex flex-col">
             <MemoryPanel
-              theme={theme}
+              theme={editorTheme}
               open={openPanes.includes('variables')}
               title="Variables"
               icon={faSquareRootVariable}
             />
             <Logs
-              theme={theme}
+              theme={editorTheme}
               open={openPanes.includes('logs')}
               title="Logs"
               icon={faCodeCommit}
             />
             <KCLErrors
-              theme={theme}
+              theme={editorTheme}
               open={openPanes.includes('kclErrors')}
               title="KCL Errors"
               iconClassNames={{ icon: 'group-open:text-destroy-30' }}