feat: Add themes and allow cycling thru them (#11)

Author: BURG3R5

README.md

@@ -77,7 +77,7 @@ In order to change the keyboard bindings copy your modified version of the [defa
 | Save as                      | Mod + Shift + S             |
 | Open File                    | Mod + O                     |
 | Export as PDF                | Mod + Alt + P               |
-| Toggle Theme (Dark / Light)  | Mod + Alt + T               |
+| Cycle through themes         | Mod + Alt + T               |
 | Undo                         | Mod + Z                     |
 | Redo                         | Mod + Shift + Z             |
 | Insert line break            | Mod + Enter / Shift + Enter |

blank.json

@@ -23,6 +23,6 @@
     "file.save_as": "Mod-Shift-s",
     "file.open": "Mod-o",
     "export.pdf": "Mod-Alt-p",
-    "theme.toggle": "Mod-Alt-t"
+    "theme.cycle": "Mod-Alt-t"
   }
 }

src/config.ts

@@ -26,7 +26,7 @@ export enum CommandIdentifier {
   FILE_SAVE_AS = "file.save_as",
   FILE_OPEN = "file.open",
   EXPORT_PDF = "export.pdf",
-  THEME_TOGGLE = "theme.toggle",
+  THEME_CYCLE = "theme.cycle",
 }
 
 export interface Config {
@@ -58,7 +58,7 @@ const defaultConfig: Config = {
     [CommandIdentifier.FILE_SAVE_AS]: "Mod-Shift-s",
     [CommandIdentifier.FILE_OPEN]: "Mod-o",
     [CommandIdentifier.EXPORT_PDF]: "Mod-Alt-p",
-    [CommandIdentifier.THEME_TOGGLE]: "Mod-Alt-t",
+    [CommandIdentifier.THEME_CYCLE]: "Mod-Alt-t",
   },
 };
 

src/editor/commands/cycleTheme.test.ts

@@ -0,0 +1,35 @@
+import { afterEach, assert, beforeEach, describe, expect, it } from "vitest";
+import { EditorState } from "prosemirror-state";
+
+import { clearMocks, mockWindows } from "@tauri-apps/api/mocks";
+
+import { cycleTheme } from ".";
+import { theme, themes } from "../../state";
+
+describe("command.cycleTheme", () => {
+  beforeEach(() => {
+    mockWindows("main");
+    theme.value = themes[0];
+  });
+
+  afterEach(() => {
+    clearMocks();
+  });
+
+  it("cycles", () => {
+    expect(window).toBeDefined();
+
+    const bodyTheme = () => document.body.dataset.theme;
+
+    themes.forEach((currentTheme, index) => {
+      assert.equal(theme.value, currentTheme);
+      assert.equal(bodyTheme(), currentTheme);
+
+      cycleTheme()(new EditorState());
+
+      const nextTheme = themes[(index + 1) % themes.length];
+      assert.equal(theme.value, nextTheme);
+      assert.equal(bodyTheme(), nextTheme);
+    });
+  });
+});

src/editor/commands/cycleTheme.ts

@@ -0,0 +1,10 @@
+import type { Command } from "prosemirror-state";
+
+import { theme, themes } from "../../state";
+
+export default (): Command => () => {
+  const currentIndex = themes.indexOf(theme.value);
+  const nextIndex = (currentIndex + 1) % themes.length;
+  theme.value = themes[nextIndex];
+  return true;
+};

src/editor/commands/index.ts

@@ -3,4 +3,4 @@ export { default as insertNode } from "./insertNode";
 export { default as newFile } from "./newFile";
 export { default as openFile } from "./openFile";
 export { default as saveFile } from "./saveFile";
-export { default as toggleTheme } from "./toggleTheme";
+export { default as cycleTheme } from "./cycleTheme";

src/editor/commands/toggleTheme.test.ts

@@ -20,7 +20,7 @@ import {
   openFile,
   saveFile,
   exportAs,
-  toggleTheme,
+  cycleTheme,
   insertNode,
 } from "../commands";
 
@@ -72,7 +72,7 @@ const commandMap: { [key in CommandIdentifier]: Command } = {
   [CommandIdentifier.EXPORT_PDF]: exportAs("PDF-Export", exporters.toPDF, [
     { name: "PDF-File", extensions: ["pdf"] },
   ]),
-  [CommandIdentifier.THEME_TOGGLE]: toggleTheme(),
+  [CommandIdentifier.THEME_CYCLE]: cycleTheme(),
 };
 
 export const keymap = () =>

src/editor/commands/toggleTheme.ts

@@ -0,0 +1,8 @@
+[data-theme='black'] {
+  --color: #f4f4f2;
+  --background-color: #0a0a0f;
+  --color-inverted: #0a0a0f;
+  --background-inverted: #f4f4f2;
+  --font-family: 'DejaVu Sans', system-ui, -apple-system, 'Segoe UI', 'Roboto',
+    'Ubuntu', 'Cantarell', 'Noto Sans', sans-serif;
+}