First implementation of dark mode

frontend/src/components/Editor.js

@@ -4,8 +4,9 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { defaultKeymap } from "@codemirror/commands";
+import { oneDark } from "@codemirror/theme-one-dark";
 
-const Editor = ({ content, onChange, onSave, filePath }) => {
+const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
   const editorRef = useRef();
   const viewRef = useRef();
 
@@ -15,6 +16,24 @@ const Editor = ({ content, onChange, onSave, filePath }) => {
       return true;
     };
 
+    const theme = EditorView.theme({
+      "&": {
+        height: "100%",
+        fontSize: "14px",
+      },
+      ".cm-scroller": {
+        overflow: "auto",
+      },
+      ".cm-gutters": {
+        backgroundColor: themeType === "dark" ? "#1e1e1e" : "#f5f5f5",
+        color: themeType === "dark" ? "#858585" : "#999",
+        border: "none",
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: themeType === "dark" ? "#2c313a" : "#e8e8e8",
+      },
+    });
+
     const state = EditorState.create({
       doc: content,
       extensions: [
@@ -32,6 +51,8 @@ const Editor = ({ content, onChange, onSave, filePath }) => {
             onChange(update.state.doc.toString());
           }
         }),
+        theme,
+        themeType === "dark" ? oneDark : [],
       ],
     });
 
@@ -45,7 +66,7 @@ const Editor = ({ content, onChange, onSave, filePath }) => {
     return () => {
       view.destroy();
     };
-  }, [filePath]);
+  }, [filePath, themeType]);
 
   useEffect(() => {
     if (viewRef.current && content !== viewRef.current.state.doc.toString()) {

frontend/src/components/Header.js

@@ -3,7 +3,7 @@ import { Page, Text, User, Button, Spacer } from '@geist-ui/core';
 import { Settings as SettingsIcon } from '@geist-ui/icons';
 import Settings from './Settings';
 
-const Header = () => {
+const Header = ({ currentTheme, onThemeChange }) => {
   const [settingsVisible, setSettingsVisible] = useState(false);
 
   const openSettings = () => setSettingsVisible(true);
@@ -16,7 +16,12 @@ const Header = () => {
       <User src="https://via.placeholder.com/40" name="User" />
       <Spacer w={0.5} />
       <Button auto icon={<SettingsIcon />} onClick={openSettings} />
-      <Settings visible={settingsVisible} onClose={closeSettings} />
+      <Settings 
+        visible={settingsVisible} 
+        onClose={closeSettings} 
+        currentTheme={currentTheme}
+        onThemeChange={onThemeChange}
+      />
     </Page.Header>
   );
 };

frontend/src/components/MainContent.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Grid, Breadcrumbs, Tabs, Dot } from '@geist-ui/core';
+import { Grid, Breadcrumbs, Tabs, Dot, useTheme } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
 import Editor from './Editor';
 import FileTree from './FileTree';
@@ -16,6 +16,7 @@ const MainContent = ({
   onSave,
 }) => {
   const [activeTab, setActiveTab] = useState('source');
+  const { type: themeType } = useTheme();
 
   const renderBreadcrumbs = () => {
     if (!selectedFile) return null;
@@ -60,6 +61,7 @@ const MainContent = ({
               onChange={onContentChange} 
               onSave={onSave}
               filePath={selectedFile}
+              themeType={themeType}
             />
           ) : (
             <MarkdownPreview content={content} />

frontend/src/components/Settings.js

@@ -1,14 +1,12 @@
 import React, { useState } from 'react';
-import { Modal, Input, Toggle, Select, Spacer, Button } from '@geist-ui/core';
+import { Modal, Input, Toggle, Spacer, Button, Text } from '@geist-ui/core';
 
-const Settings = ({ visible, onClose }) => {
-  const [theme, setTheme] = useState('light');
+const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
   const [fontSize, setFontSize] = useState('14');
   const [autoSave, setAutoSave] = useState(false);
 
   const handleSubmit = () => {
     const settings = {
-      theme,
       fontSize,
       autoSave,
     };
@@ -21,14 +19,13 @@ const Settings = ({ visible, onClose }) => {
     <Modal visible={visible} onClose={onClose}>
       <Modal.Title>Settings</Modal.Title>
       <Modal.Content>
-        <Select 
-          label="Theme" 
-          value={theme} 
-          onChange={(val) => setTheme(val)}
+        <Text>Theme</Text>
+        <Toggle 
+          checked={currentTheme === 'dark'}
+          onChange={() => onThemeChange()}
         >
-          <Select.Option value="light">Light</Select.Option>
-          <Select.Option value="dark">Dark</Select.Option>
-        </Select>
+          Dark Mode
+        </Toggle>
         <Spacer h={0.5} />
         <Input 
           label="Font Size"