client: Group color themes by dark/light

src/public/app/widgets/type_widgets/options/appearance/code_block.js

@@ -84,14 +84,18 @@ export default class CodeBlockOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options) {
-        const themes = await server.get("options/codeblock-themes");
+        const themeGroups = await server.get("options/codeblock-themes");
         this.$themeSelect.empty();
 
+        for (const [ key, themes ] of Object.entries(themeGroups)) {
+            const $group = $("<optgroup>").attr("label", key);
             for (const theme of themes) {
-            this.$themeSelect.append($("<option>")
+                $group.append($("<option>")
                     .attr("value", theme.val)
                     .text(theme.title));
             }
+            this.$themeSelect.append($group);
+        }
         this.$themeSelect.val(options.codeBlockTheme);
         this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
         this.$widget.closest(".note-detail-printable").toggleClass("word-wrap", options.codeBlockWordWrap);

src/services/code_block_theme.ts

@@ -2,10 +2,27 @@ import fs from "fs";
 import themeNames from "./code_block_theme_names.json" assert { type: "json" }
 import { t } from "i18next";
 
+interface ColorTheme {
+    val: string;
+    title: string;
+}
+
 export function listSyntaxHighlightingThemes() {
     const path = "node_modules/@highlightjs/cdn-assets/styles";
-    const systemThemes = fs
-        .readdirSync(path)
+    const systemThemes = readThemesFromFileSystem(path);
+    const allThemes = [
+        {
+            val: "none",
+            title: t("code_block.theme_none")
+        },
+        ...systemThemes
+    ];
+
+    return groupThemesByLightOrDark(allThemes);
+}
+
+function readThemesFromFileSystem(path: string): ColorTheme[] {
+    return fs.readdirSync(path)
         .filter((el) => el.endsWith(".min.css"))
         .map((name) => {
             const nameWithoutExtension = name.replace(".min.css", "");            
@@ -20,11 +37,21 @@ export function listSyntaxHighlightingThemes() {
                 title: title
             };
         });
-    return [
-        {
-            val: "none",
-            title: t("code_block.theme_none")
-        },
-        ...systemThemes
-    ];
+}
+
+function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
+    const result: Record<string, ColorTheme[]> = {
+        light: [],
+        dark: []
+    };
+
+    for (const theme of listOfThemes) {
+        if (theme.title.includes("Dark")) {
+            result.dark.push(theme);
+        } else {
+            result.light.push(theme);
+        }
+    }
+
+    return result;
 }