Editor dark theme and light theme

tylerlong · Oct 16, 2024 · ccec510 · ccec510
1 parent 4c90a04
commit ccec510
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "@uiw/codemirror-theme-github": "^4.23.5",
     "antd": "^5.21.3",
     "chart.js": "2.6.0",
     "debounce": "^2.1.1",

diff --git a/src/components/editor.tsx b/src/components/editor.tsx
@@ -4,6 +4,7 @@ import {
   defaultHighlightStyle,
   syntaxHighlighting,
 } from '@codemirror/language';
+import { Compartment } from '@codemirror/state';
 import {
   EditorView,
   highlightActiveLine,
@@ -12,6 +13,7 @@ import {
   scrollPastEnd,
   ViewUpdate,
 } from '@codemirror/view';
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import debounce from 'debounce';
 import { exclude } from 'manate';
 import { auto } from 'manate/react';
@@ -33,8 +35,10 @@ const Editor = auto((props: { store: Store }) => {
         }
       },
     );
+    const theme = new Compartment();
     const cm = new EditorView({
       extensions: [
+        theme.of(githubLight),
         EditorView.lineWrapping,
         highlightActiveLine(),
         lineNumbers(),
@@ -58,6 +62,11 @@ const Editor = auto((props: { store: Store }) => {
     };
 
     store.editor = exclude(cm);
+    store.editor.toggleDarkTheme = (isDark: boolean) => {
+      store.editor.dispatch({
+        effects: theme.reconfigure(isDark ? githubDark : githubLight),
+      });
+    };
 
     store.editor.scrollDOM.addEventListener('scroll', () => {
       syncPreview();

diff --git a/src/components/modals/preferences.tsx b/src/components/modals/preferences.tsx
@@ -7,58 +7,6 @@ import React, { useEffect } from 'react';
 import iconUrl from '../../icon.svg';
 import { Store } from '../../store';
 
-const themes = [
-  '3024-day',
-  '3024-night',
-  'abcdef',
-  'ambiance-mobile',
-  'ambiance',
-  'base16-dark',
-  'base16-light',
-  'bespin',
-  'blackboard',
-  'cobalt',
-  'colorforth',
-  'default',
-  'dracula',
-  'duotone-dark',
-  'duotone-light',
-  'eclipse',
-  'elegant',
-  'erlang-dark',
-  'hopscotch',
-  'icecoder',
-  'isotope',
-  'lesser-dark',
-  'liquibyte',
-  'material',
-  'mbo',
-  'mdn-like',
-  'midnight',
-  'monokai',
-  'neat',
-  'neo',
-  'night',
-  'panda-syntax',
-  'paraiso-dark',
-  'paraiso-light',
-  'pastel-on-dark',
-  'railscasts',
-  'rubyblue',
-  'seti',
-  'solarized',
-  'the-matrix',
-  'tomorrow-night-bright',
-  'tomorrow-night-eighties',
-  'ttcn',
-  'twilight',
-  'vibrant-ink',
-  'xq-dark',
-  'xq-light',
-  'yeti',
-  'zenburn',
-];
-
 const PreferencesModal = auto((props: { store: Store }) => {
   console.log('render preferences modal');
   const { store } = props;
@@ -69,6 +17,7 @@ const PreferencesModal = auto((props: { store: Store }) => {
       if (!store.editor) {
         return;
       }
+      store.editor.toggleDarkTheme?.(preferences.darkTheme);
       mdc.mermaid.gantt.axisFormat(preferences.ganttAxisFormat);
     });
     start();
@@ -125,9 +74,12 @@ const PreferencesModal = auto((props: { store: Store }) => {
           </Form.Item>
           <Form.Item label="Editor theme">
             <Select
-              value={preferences.editorTheme}
-              options={themes.map((theme) => ({ value: theme, label: theme }))}
-              onChange={(value) => (preferences.editorTheme = value)}
+              value={preferences.darkTheme}
+              options={[
+                { value: false, label: 'Light' },
+                { value: true, label: 'Dark' },
+              ]}
+              onChange={(value) => (preferences.darkTheme = value)}
             />
           </Form.Item>
           <Form.Item label="Editor font size">

diff --git a/src/store.ts b/src/store.ts
@@ -15,7 +15,8 @@ class Modal {
 class Preferences {
   public showToolbar = true;
   public editorVsPreview = '1fr 6px 1fr';
-  public editorTheme = 'default';
+  public darkTheme = false;
+  // public editorTheme = 'default';
   public editorFontSize = 14;
   public ganttAxisFormat = '%Y-%m-%d';
 
@@ -29,7 +30,9 @@ class Preferences {
 }
 
 export class Store {
-  public editor: EditorView;
+  public editor:
+    | (EditorView & { toggleDarkTheme?: (isDark: boolean) => void })
+    | null = null;
 
   public modals = {
     about: new Modal(),

diff --git a/yarn.lock b/yarn.lock
@@ -1731,6 +1731,22 @@
     "@typescript-eslint/types" "8.8.1"
     eslint-visitor-keys "^3.4.3"
 
+"@uiw/codemirror-theme-github@^4.23.5":
+  version "4.23.5"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.23.5.tgz#cee82f4f2ef07baa187bb3b80b7dc6552474d431"
+  integrity sha512-gR5rgWUaRoLRavzA6w+/dKE6KMDQdHF82xpnLYQvOwE/1agNS0asowdZUodMXbvOoNLIgcopLm3hXdzzVouuaw==
+  dependencies:
+    "@uiw/codemirror-themes" "4.23.5"
+
+"@uiw/codemirror-themes@4.23.5":
+  version "4.23.5"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.23.5.tgz#742cb8f2a74a857cb44c5f588265865ee2327e91"
+  integrity sha512-yWUTpaVroxIxjKASQAmKaYy+ZYtF+YB6d8sVmSRK2TVD13M+EWvVT2jBGFLqR1UVg7G0W/McAy8xdeTg+a3slg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 abortcontroller-polyfill@^1.1.9:
   version "1.7.5"
   resolved "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"