Change default theme from vs-dark-plus to vs-dark-modern. Add vs-light-modern and add actions to switch. Automatically add themes from $Appdata/themes.

Author: Ivorforce

README.md

@@ -12,13 +12,25 @@ It is technically a continuation of [VSCode Git Diff Stepper](https://github.com
 - `cmd / ctrl` + `alt / option` + `left` or `right` arrow keys move through iterations.
 - `f1` to launch the command palette.
 
-## Language Support
+## Custom Language Support
 
+We have support for textmate `.tmLanguage` files!
 
+- Drop a `.tmLanguage` file into `$AppData/de.ivorius.gitdiffstepper/tmlanguages`.
+- The file name should be equivalent to the file ending (e.g. `css.tmLanguage` for `.css` files).
+- Relaunch the App.
 
-We have support for textmate `.tmLanguage` files! Drop a `.tmLanguage` file into `$AppData/de.ivorius.gitdiffstepper/tmlanguages` and relaunch the app. The file name should be equivalent to the file ending (e.g. `css.tmLanguage` for `.css` files).
+To switch the language manually, use the command palette.
 
-To switch to the language manually, use the command palette.
+## Custom Theme Support
+
+We have support for vscode themes! 
+- In VSCode, run the command "Developer: Generate Color Theme From Current Settings".
+- Convert the resulting `.jsonc` file to regular `.json` (removing comments and trailing commas).
+- Drop the file into `$AppData/de.ivorius.gitdiffstepper/themes`.
+- Relaunch the App.
+
+To switch the theme, use the command palette.
 
 ## Dev Setup
 

src-tauri/tauri.conf.json

@@ -27,8 +27,10 @@
         "scope": [
           "$APPDATA/*",
           "$APPDATA/tmlanguages/*",
+          "$APPDATA/themes/*",
           "$RESOURCE/onigasm.wasm",
-          "$RESOURCE/themes/*"
+          "$RESOURCE/themes/*",
+          "$RESOURCE/themes/"
         ]
       },
       "dialog": {

src-tauri/themes/vs-dark-plus.json renamed to src-tauri/themes/vs-dark-modern.json

@@ -6,7 +6,7 @@ import * as TextMate from "./monaco/TextMate";
 import * as Themes from "./monaco/Themes";
 
 await TextMate.setup();
-await Themes.load();
+export const customThemes = await Themes.load();
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

src-tauri/themes/vs-light-modern.json

@@ -16,7 +16,7 @@ export async function setup() {
 
     for (const entry of entries) {
         if (!entry.name?.endsWith(".tmLanguage")) {
-            console.log(`Did not read file: ${entry.name}`)
+            console.log(`Did not read tmlanguage file (unknown suffix): ${entry.name}`)
             continue;
         }
 

src/main.tsx

@@ -1,4 +1,4 @@
-import { BaseDirectory, readTextFile } from '@tauri-apps/api/fs';
+import { BaseDirectory, createDir, readDir, readTextFile } from '@tauri-apps/api/fs';
 import * as monaco from 'monaco-editor';
 
 export interface IVSCodeTheme {
@@ -65,9 +65,44 @@ export function convert(theme: IVSCodeTheme): monaco.editor.IStandaloneThemeData
     return returnTheme;
 }
 
-export async function load() {
-    const vs_dark_plus = await readTextFile("themes/vs-dark-plus.json", { dir: BaseDirectory.Resource });
-    const parsed: IVSCodeTheme = JSON.parse(vs_dark_plus);
-    const converted = convert(parsed);
-    monaco.editor.defineTheme('vs-dark-plus', converted);
+export async function load(): Promise<string[]> {
+    await createDir("themes", { dir: BaseDirectory.AppData, recursive: true });
+    var entries = await readDir("themes", { dir: BaseDirectory.AppData });
+    entries.push(...await readDir("themes", { dir: BaseDirectory.Resource }));
+
+    let addedThemes: string[] = [];
+    for (const entry of entries) {
+        if (!entry.name?.endsWith(".json")) {
+            console.log(`Did not read theme (unknown suffix): ${entry.name}`)
+            continue;
+        }
+
+        const text = await readTextFile(entry.path);
+        const parsed: IVSCodeTheme = JSON.parse(text);
+        const converted = convert(parsed);
+
+        const themeID = entry.name.substring(0, entry.name.length - 5);
+        monaco.editor.defineTheme(themeID, converted);
+        addedThemes.push(themeID);
+    }
+
+    return addedThemes;
+}
+
+export function addSetThemeActions(editor: monaco.editor.IStandaloneCodeEditor, themes: string[], callback?: () => void) {
+    for (let themeID of themes) {
+        editor.addAction({
+            id: `setTheme-${themeID}`,
+            label: `Set theme to ${themeID}`,
+            run: (editor: monaco.editor.ICodeEditor, arg: string) => {
+                monaco.editor.setTheme(themeID);
+                callback?.();
+            }
+        });
+    }
+}
+
+export function getBackgroundColor(editor: monaco.editor.IStandaloneCodeEditor): string {
+    return getComputedStyle(editor.getDomNode()!)
+        .getPropertyValue('--vscode-editor-background')
 }

src/monaco/TextMate.ts

@@ -1,7 +1,3 @@
-body {
-  background-color: #1e1e1e;
-}
-
 #root > * {
   justify-content: center;
   padding: 15px;
@@ -12,7 +8,7 @@ body {
   max-width: 1024px;
 }
 
-.editor{
+.editor {
   height: 100%;
 } 
 

src/monaco/Themes.ts

@@ -10,6 +10,8 @@ import { useEffect } from 'react';
 import Editor from "@monaco-editor/react";
 import { TextZone } from '../monaco/ViewZones';
 import { addSetLanguageActions } from '../monaco/SetLanguage';
+import { addSetThemeActions, getBackgroundColor } from '../monaco/Themes';
+import { customThemes } from '../main';
 
 loader.config({ monaco });
 
@@ -37,7 +39,7 @@ function createPatchEditor(language: string, textZone: TextZone) {
 
     const secondEditor = <Editor
         onMount={handleEditorDidMount}
-        theme="vs-dark-plus"
+        theme="vs-dark-modern"
 
         // language / value inputs are tracked, "default" versions are only for the initial value
         defaultLanguage={language}
@@ -91,17 +93,20 @@ function App() {
     });
 
     async function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor, monaco: any) {
+        document.body.style.backgroundColor = getBackgroundColor(editor);
+
         let logController_ = new MonacoLogController(editor, createPatchEditor);
         logController = logController_;
 
         addSetLanguageActions(editor);
+        addSetThemeActions(editor, customThemes, () => document.body.style.backgroundColor = getBackgroundColor(editor));
     }
 
     return <Editor
         height="calc(100vh - 30px)"  // TODO This shouldn't be here but otherwise the size is 5px
         width="calc(100vw - 30px)"
         onMount={handleEditorDidMount}
-        theme="vs-dark-plus"
+        theme="vs-dark-modern"
         options={{
             minimap: { enabled: false },
             renderLineHighlight: "none",