feat(codemirror): add four more themes

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

apps/client/src/desktop.ts

@@ -54,7 +54,7 @@ function initOnElectron() {
     const currentWindow = electronRemote.getCurrentWindow();
     const style = window.getComputedStyle(document.body);
 
-    initDarkOrLightMode(style);
+    initDarkOrLightMode();
     initTransparencyEffects(style, currentWindow);
     initFullScreenDetection(currentWindow);
 
@@ -119,11 +119,11 @@ function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Elec
  *
  * @param style the root CSS element to read variables from.
  */
-function initDarkOrLightMode(style: CSSStyleDeclaration) {
+function initDarkOrLightMode() {
     let themeSource: typeof nativeTheme.themeSource = "system";
 
-    const themeStyle = style.getPropertyValue("--theme-style");
-    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
+    const themeStyle = window.glob.getThemeStyle();
+    if (themeStyle !== "auto") {
         themeSource = themeStyle;
     }
 

apps/client/src/index.ts

@@ -1,3 +1,5 @@
+import { getThemeStyle } from "./services/theme";
+
 async function bootstrap() {
     showSplash();
     await setupGlob();
@@ -38,6 +40,7 @@ async function setupGlob() {
         ...json,
         activeDialog: null
     };
+    window.glob.getThemeStyle = getThemeStyle;
 }
 
 async function loadBootstrapCss() {
@@ -49,31 +52,65 @@ async function loadBootstrapCss() {
     }
 }
 
-function loadStylesheets() {
-    const { device, assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+type StylesheetRef = {
+    href: string;
+    media?: string;
+};
 
-    const cssToLoad: string[] = [];
-    if (device !== "print") {
-        cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
-        cssToLoad.push(`api/fonts`);
-        cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
-        if (themeCssUrl) {
-            cssToLoad.push(themeCssUrl);
-        }
-        if (themeUseNextAsBase === "next") {
-            cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`);
-        } else if (themeUseNextAsBase === "next-dark") {
-            cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`);
-        } else if (themeUseNextAsBase === "next-light") {
-            cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`);
-        }
-        cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+function getConfiguredThemeStylesheets(stylesheetsPath: string, theme: string, customThemeCssUrl?: string) {
+    if (theme === "auto") {
+        return [{ href: `${stylesheetsPath}/theme-dark.css`, media: "(prefers-color-scheme: dark)" }];
     }
 
-    for (const href of cssToLoad) {
+    if (theme === "dark") {
+        return [{ href: `${stylesheetsPath}/theme-dark.css` }];
+    }
+
+    if (theme === "next") {
+        return [
+            { href: `${stylesheetsPath}/theme-next-light.css` },
+            { href: `${stylesheetsPath}/theme-next-dark.css`, media: "(prefers-color-scheme: dark)" }
+        ];
+    }
+
+    if (theme === "next-light") {
+        return [{ href: `${stylesheetsPath}/theme-next-light.css` }];
+    }
+
+    if (theme === "next-dark") {
+        return [{ href: `${stylesheetsPath}/theme-next-dark.css` }];
+    }
+
+    if (theme !== "light" && customThemeCssUrl) {
+        return [{ href: customThemeCssUrl }];
+    }
+
+    return [];
+}
+
+function loadStylesheets() {
+    const { device, assetPath, theme, themeBase, customThemeCssUrl } = window.glob;
+    const stylesheetsPath = `${assetPath}/stylesheets`;
+
+    const cssToLoad: StylesheetRef[] = [];
+    if (device !== "print") {
+        cssToLoad.push({ href: `${stylesheetsPath}/ckeditor-theme.css` });
+        cssToLoad.push({ href: `api/fonts` });
+        cssToLoad.push({ href: `${stylesheetsPath}/theme-light.css` });
+        cssToLoad.push(...getConfiguredThemeStylesheets(stylesheetsPath, theme, customThemeCssUrl));
+        if (themeBase) {
+            cssToLoad.push(...getConfiguredThemeStylesheets(stylesheetsPath, themeBase));
+        }
+        cssToLoad.push({ href: `${stylesheetsPath}/style.css` });
+    }
+
+    for (const { href, media } of cssToLoad) {
         const linkEl = document.createElement("link");
         linkEl.href = href;
         linkEl.rel = "stylesheet";
+        if (media) {
+            linkEl.media = media;
+        }
         document.head.appendChild(linkEl);
     }
 }

apps/client/src/services/theme.ts

@@ -0,0 +1,35 @@
+export function getThemeStyle(): "auto" | "light" | "dark" {
+    const configuredTheme = window.glob?.theme;
+    if (configuredTheme === "auto" || configuredTheme === "next") {
+        return "auto";
+    }
+
+    if (configuredTheme === "light" || configuredTheme === "dark") {
+        return configuredTheme;
+    }
+
+    if (configuredTheme === "next-light") {
+        return "light";
+    }
+
+    if (configuredTheme === "next-dark") {
+        return "dark";
+    }
+
+    const style = window.getComputedStyle(document.body);
+    const themeStyle = style.getPropertyValue("--theme-style");
+    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
+        return themeStyle as "light" | "dark";
+    }
+
+    return "auto";
+}
+
+export function getEffectiveThemeStyle(): "light" | "dark" {
+    const themeStyle = getThemeStyle();
+    if (themeStyle === "auto") {
+        return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    return themeStyle === "dark" ? "dark" : "light";
+}

apps/client/src/stylesheets/theme-next.css

@@ -1,11 +0,0 @@
-/* Import the light color scheme.
- * This is the base color scheme, always active and overridden by the dark
- * color scheme stylesheet when necessary. */
-@import url(./theme-next-light.css);
-
-/* Import the dark color scheme when the system preference is set to dark mode */
-@import url(./theme-next-dark.css) (prefers-color-scheme: dark);
-
-:root {
-    --theme-style-auto: true;
-}

apps/client/src/stylesheets/theme.css

@@ -1,11 +0,0 @@
-/* Import the light color scheme.
- * This is the base color scheme, always active and overridden by the dark
- * color scheme stylesheet when necessary. */
-@import url(./theme-light.css);
-
-/* Import the dark color scheme when the system preference is set to dark mode */
-@import url(./theme-dark.css) (prefers-color-scheme: dark);
-
-:root {
-    --theme-style-auto: true;
-}

apps/client/src/types-lib.d.ts

@@ -66,6 +66,7 @@ declare module "preact" {
         interface ElectronWebViewElement extends JSX.HTMLAttributes<HTMLElement> {
             src: string;
             class: string;
+            key?: string | number;
         }
 
         interface IntrinsicElements {

apps/client/src/types.d.ts

@@ -24,6 +24,7 @@ interface CustomGlobals {
     getReferenceLinkTitle: (href: string) => Promise<string>;
     getReferenceLinkTitleSync: (href: string) => string;
     getActiveContextNote: () => FNote | null;
+    getThemeStyle: () => "auto" | "light" | "dark";
     ESLINT: Library;
     appContext: AppContext;
     froca: Froca;
@@ -51,8 +52,9 @@ interface CustomGlobals {
     isElectron: boolean;
     isRtl: boolean;
     iconRegistry: IconRegistry;
-    themeCssUrl: string;
-    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
+    theme: string;
+    themeBase?: "next" | "next-light" | "next-dark";
+    customThemeCssUrl?: string;
     iconPackCss: string;
     headingStyle: "plain" | "underline" | "markdown";
     layoutOrientation: "vertical" | "horizontal";

apps/client/src/widgets/note_map/NoteMap.tsx

@@ -1,18 +1,21 @@
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import "./NoteMap.css";
-import { getThemeStyle, MapType, NoteMapWidgetMode, rgb2hex } from "./utils";
-import { RefObject } from "preact";
-import FNote from "../../entities/fnote";
-import { useElementSize, useNoteLabel } from "../react/hooks";
+
 import ForceGraph from "force-graph";
+import { RefObject } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+import appContext from "../../components/app_context";
+import FNote from "../../entities/fnote";
+import link_context_menu from "../../menus/link_context_menu";
+import hoisted_note from "../../services/hoisted_note";
+import { t } from "../../services/i18n";
+import { getEffectiveThemeStyle } from "../../services/theme";
+import ActionButton from "../react/ActionButton";
+import { useElementSize, useNoteLabel } from "../react/hooks";
+import Slider from "../react/Slider";
 import { loadNotesAndRelations, NoteMapLinkObject, NoteMapNodeObject, NotesAndRelationsData } from "./data";
 import { CssData, setupRendering } from "./rendering";
-import ActionButton from "../react/ActionButton";
-import { t } from "../../services/i18n";
-import link_context_menu from "../../menus/link_context_menu";
-import appContext from "../../components/app_context";
-import Slider from "../react/Slider";
-import hoisted_note from "../../services/hoisted_note";
+import { MapType, NoteMapWidgetMode, rgb2hex } from "./utils";
 
 interface NoteMapProps {
     note: FNote;
@@ -40,9 +43,9 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
             return hoisted_note.getHoistedNoteId();
         } else if (mapRootIdLabel) {
             return mapRootIdLabel;
-        } else {
-            return appContext.tabManager.getActiveContext()?.parentNoteId ?? null;
         }
+        return appContext.tabManager.getActiveContext()?.parentNoteId ?? null;
+
     }, [ note ]);
 
     // Build the note graph instance.
@@ -67,7 +70,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
                 noteIdToSizeMap: notesAndRelations.noteIdToSizeMap,
                 cssData,
                 notesAndRelations,
-                themeStyle: getThemeStyle(),
+                themeStyle: getEffectiveThemeStyle(),
                 widgetMode,
                 mapType
             });
@@ -113,7 +116,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
                 node.fx = undefined;
                 node.fy = undefined;
             }
-        })
+        });
     }, [ fixNodes, mapType ]);
 
     return (
@@ -159,7 +162,7 @@ function MapTypeSwitcher({ icon, text, type, currentMapType, setMapType }: {
             onClick={() => setMapType(type)}
             frame
         />
-    )
+    );
 }
 
 function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
@@ -170,5 +173,5 @@ function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData
         fontFamily: containerStyle.fontFamily,
         textColor: rgb2hex(containerStyle.color),
         mutedTextColor: rgb2hex(styleResolverStyle.color)
-    }
+    };
 }

apps/client/src/widgets/note_map/utils.ts

@@ -27,7 +27,3 @@ export function generateColorFromString(str: string, themeStyle: "light" | "dark
     return color;
 }
 
-export function getThemeStyle() {
-    const documentStyle = window.getComputedStyle(document.documentElement);
-    return documentStyle.getPropertyValue("--theme-style")?.trim() as "light" | "dark";
-}

apps/client/src/widgets/react/hooks.tsx

@@ -1385,7 +1385,7 @@ export function useGetContextDataFrom<K extends keyof NoteContextDataMap>(
 }
 
 export function useColorScheme() {
-    const themeStyle = getThemeStyle();
+    const themeStyle = window.glob.getThemeStyle();
     const defaultValue = themeStyle === "auto" ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) : themeStyle === "dark";
     const [ prefersDark, setPrefersDark ] = useState(defaultValue);
 
@@ -1400,12 +1400,3 @@ export function useColorScheme() {
 
     return prefersDark ? "dark" : "light";
 }
-
-function getThemeStyle() {
-    const style = window.getComputedStyle(document.body);
-    const themeStyle = style.getPropertyValue("--theme-style");
-    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
-        return themeStyle as "light" | "dark";
-    }
-    return "auto";
-}

apps/client/src/widgets/type_widgets/WebView.tsx

@@ -57,6 +57,7 @@ function DesktopWebView({ src, ntxId }: { src: string, ntxId: string | null | un
     return <webview
         ref={webviewRef}
         src={src}
+        key={src}
         class="note-detail-web-view-content"
     />;
 }
@@ -80,6 +81,7 @@ function BrowserWebView({ src, ntxId }: { src: string, ntxId: string | null | un
     return <iframe
         ref={iframeRef}
         src={src}
+        key={src}
         class="note-detail-web-view-content"
         sandbox="allow-same-origin allow-scripts allow-popups" />;
 }

apps/desktop/electron-forge/forge.config.ts

@@ -176,7 +176,9 @@ const config: ForgeConfig = {
                 [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
                 [FuseV1Options.EnableNodeCliInspectArguments]: false,
                 [FuseV1Options.EnableCookieEncryption]: true,
-                [FuseV1Options.OnlyLoadAppFromAsar]: true
+                [FuseV1Options.OnlyLoadAppFromAsar]: true,
+                [FuseV1Options.GrantFileProtocolExtraPrivileges]: false,
+                [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true
             }
         }
     ],

apps/server/package.json

@@ -131,7 +131,7 @@
     "tmp": "0.2.5",
     "turnish": "1.8.0",
     "unescape": "1.0.1",
-    "vite": "8.0.3",
+    "vite": "8.0.5",
     "ws": "8.20.0",
     "xml2js": "0.6.2",
     "yauzl": "3.3.0"

apps/server/src/routes/index.ts

@@ -11,9 +11,9 @@ import { generateCss, generateIconRegistry, getIconPacks, MIME_TO_EXTENSION_MAPP
 import log from "../services/log.js";
 import optionService from "../services/options.js";
 import protectedSessionService from "../services/protected_session.js";
-import { generateCsrfToken } from "./csrf_protection.js";
 import sql from "../services/sql.js";
 import { isDev, isElectron, isMac, isWindows11 } from "../services/utils.js";
+import { generateCsrfToken } from "./csrf_protection.js";
 
 type View = "desktop" | "mobile" | "print";
 
@@ -38,6 +38,7 @@ export function bootstrap(req: Request, res: Response) {
     const view = getView(req);
     const theme = options.theme;
     const themeNote = attributeService.getNoteWithLabel("appTheme", theme);
+    const themeUseNextAsBase = themeNote?.getAttributeValue("label", "appThemeBase") ?? undefined;
     const nativeTitleBarVisible = options.nativeTitleBarVisible === "true";
     const iconPacks = getIconPacks();
     const currentLocale = getCurrentLocale();
@@ -45,8 +46,9 @@ export function bootstrap(req: Request, res: Response) {
     res.send({
         device: view,
         csrfToken,
-        themeCssUrl: getThemeCssUrl(theme, themeNote),
-        themeUseNextAsBase: themeNote?.getAttributeValue("label", "appThemeBase"),
+        theme,
+        themeBase: themeUseNextAsBase,
+        customThemeCssUrl: getCustomThemeCssUrl(theme, themeNote),
         headingStyle: options.headingStyle,
         layoutOrientation: options.layoutOrientation,
         platform: process.platform,
@@ -117,25 +119,16 @@ function getView(req: Request): View {
     return "desktop";
 }
 
-function getThemeCssUrl(theme: string, themeNote: BNote | null) {
-    if (theme === "auto") {
-        return `${assetPath}/stylesheets/theme.css`;
-    } else if (theme === "light") {
-        // light theme is always loaded as baseline
-        return false;
-    } else if (theme === "dark") {
-        return `${assetPath}/stylesheets/theme-dark.css`;
-    } else if (theme === "next") {
-        return `${assetPath}/stylesheets/theme-next.css`;
-    } else if (theme === "next-light") {
-        return `${assetPath}/stylesheets/theme-next-light.css`;
-    } else if (theme === "next-dark") {
-        return `${assetPath}/stylesheets/theme-next-dark.css`;
-    } else if (!process.env.TRILIUM_SAFE_MODE && themeNote) {
+function getCustomThemeCssUrl(theme: string, themeNote: BNote | null) {
+    if (["auto", "light", "dark", "next", "next-light", "next-dark"].includes(theme)) {
+        return undefined;
+    }
+
+    if (!process.env.TRILIUM_SAFE_MODE && themeNote) {
         return `api/notes/download/${themeNote.noteId}`;
     }
-    // baseline light theme
-    return false;
+
+    return undefined;
 }
 
 function getAppCssNoteIds() {

apps/website/package.json

@@ -21,7 +21,7 @@
 		"eslint-config-preact": "2.0.0",
 		"typescript": "6.0.2",
 		"user-agent-data-types": "0.4.3",
-		"vite": "8.0.3",
+		"vite": "8.0.5",
 		"vitest": "4.1.2"
 	},
 	"eslintConfig": {

docs/Developer Guide/Developer Guide/Concepts/Themes.md

@@ -4,7 +4,7 @@
 *   There are three themes embedded in the application:
     *   `light`, located in `src\public\stylesheets\theme-light.css`
     *   `dark`, located in `src\public\stylesheets\theme-dark.css`
-    *   `next`, located in `src\public\stylesheets\theme-next.css`.
+    *   `next`, composed from `src\public\stylesheets\theme-next-light.css` and `src\public\stylesheets\theme-next-dark.css`.
 *   The default theme is set only once, when the database is created and is managed by `options_init#initNotSyncedOptions`.
     *   In the original implementation: On Electron, the choice between `light` and `dark` is done based on the OS preference. Otherwise, the theme is always `dark`.
     *   Now, we always choose `next` as the default theme.

docs/User Guide/User Guide/Installation & Setup/Web Clipper.md

@@ -12,10 +12,10 @@ Trilium Web Clipper officially supports the following web browsers:
 
 ## Obtaining the extension
 
-> [!WARNING]
-> The extension is currently under development. A preview with unsigned extensions is available on [GitHub Actions](https://github.com/TriliumNext/Trilium/actions/runs/21318809414).
-> 
-> We have already submitted the extension to both Chrome and Firefox web stores, but they are pending validation.
+The extension is available from the official browser web stores:
+
+*   **Firefox**: [Trilium Web Clipper on Firefox Add-ons](https://addons.mozilla.org/firefox/addon/trilium-notes-web-clipper/)
+*   **Chrome**: [Trilium Web Clipper on Chrome Web Store](https://chromewebstore.google.com/detail/trilium-web-clipper/ofoiklieachadcaeffficgjaajojpkpi)
 
 ## Functionality
 
@@ -87,4 +87,4 @@ Development versions are version pre-release versions, generally meant for testi
 
 ## Credits
 
-Some parts of the code are based on the [Joplin Notes browser extension](https://github.com/laurent22/joplin/tree/master/Clipper).
+Some parts of the code are based on the [Joplin Notes browser extension](https://github.com/laurent22/joplin/tree/master/Clipper).

package.json

@@ -77,7 +77,7 @@
     "typescript": "6.0.2",
     "typescript-eslint": "8.58.0",
     "upath": "2.0.1",
-    "vite": "8.0.3",
+    "vite": "8.0.5",
     "vite-plugin-dts": "4.5.4",
     "vitest": "4.1.2"
   },

packages/codemirror/package.json

@@ -19,30 +19,35 @@
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.41.0",
-    "@fsegurai/codemirror-theme-abcdef": "6.2.3",
-    "@fsegurai/codemirror-theme-abyss": "6.2.3",
-    "@fsegurai/codemirror-theme-android-studio": "6.2.3",
-    "@fsegurai/codemirror-theme-andromeda": "6.2.3",
-    "@fsegurai/codemirror-theme-basic-dark": "6.2.3",
-    "@fsegurai/codemirror-theme-basic-light": "6.2.3",
-    "@fsegurai/codemirror-theme-cobalt2": "6.0.3",
-    "@fsegurai/codemirror-theme-forest": "6.2.3",
-    "@fsegurai/codemirror-theme-github-dark": "6.2.3",
-    "@fsegurai/codemirror-theme-github-light": "6.2.3",
-    "@fsegurai/codemirror-theme-gruvbox-dark": "6.2.3",
-    "@fsegurai/codemirror-theme-gruvbox-light": "6.2.3",
-    "@fsegurai/codemirror-theme-material-dark": "6.2.3",
-    "@fsegurai/codemirror-theme-material-light": "6.2.3",
-    "@fsegurai/codemirror-theme-monokai": "6.2.3",
-    "@fsegurai/codemirror-theme-nord": "6.2.3",
-    "@fsegurai/codemirror-theme-palenight": "6.2.3",
-    "@fsegurai/codemirror-theme-solarized-dark": "6.2.3",
-    "@fsegurai/codemirror-theme-solarized-light": "6.2.3",
-    "@fsegurai/codemirror-theme-tokyo-night-day": "6.2.3",
-    "@fsegurai/codemirror-theme-tokyo-night-storm": "6.2.3",
-    "@fsegurai/codemirror-theme-volcano": "6.2.3",
-    "@fsegurai/codemirror-theme-vscode-dark": "6.2.4",
-    "@fsegurai/codemirror-theme-vscode-light": "6.2.4",
+    "@eslint/js": "10.0.1",
+    "@fsegurai/codemirror-theme-abcdef": "6.2.4",
+    "@fsegurai/codemirror-theme-abyss": "6.2.4",
+    "@fsegurai/codemirror-theme-android-studio": "6.2.4",
+    "@fsegurai/codemirror-theme-andromeda": "6.2.4",
+    "@fsegurai/codemirror-theme-basic-dark": "6.2.4",
+    "@fsegurai/codemirror-theme-basic-light": "6.2.4",
+    "@fsegurai/codemirror-theme-cobalt2": "6.0.4",
+    "@fsegurai/codemirror-theme-forest": "6.2.4",
+    "@fsegurai/codemirror-theme-github-dark": "6.2.4",
+    "@fsegurai/codemirror-theme-github-light": "6.2.4",
+    "@fsegurai/codemirror-theme-gruvbox-dark": "6.2.4",
+    "@fsegurai/codemirror-theme-gruvbox-light": "6.2.4",
+    "@fsegurai/codemirror-theme-high-contrast-dark": "6.0.2",
+    "@fsegurai/codemirror-theme-high-contrast-light": "6.0.2",
+    "@fsegurai/codemirror-theme-material-dark": "6.2.4",
+    "@fsegurai/codemirror-theme-material-light": "6.2.4",
+    "@fsegurai/codemirror-theme-material-ocean": "6.0.1",
+    "@fsegurai/codemirror-theme-monokai": "6.2.4",
+    "@fsegurai/codemirror-theme-nord": "6.2.4",
+    "@fsegurai/codemirror-theme-palenight": "6.2.4",
+    "@fsegurai/codemirror-theme-solarized-dark": "6.2.4",
+    "@fsegurai/codemirror-theme-solarized-light": "6.2.4",
+    "@fsegurai/codemirror-theme-synthwave-84": "6.0.2",
+    "@fsegurai/codemirror-theme-tokyo-night-day": "6.2.4",
+    "@fsegurai/codemirror-theme-tokyo-night-storm": "6.2.4",
+    "@fsegurai/codemirror-theme-volcano": "6.2.4",
+    "@fsegurai/codemirror-theme-vscode-dark": "6.2.5",
+    "@fsegurai/codemirror-theme-vscode-light": "6.2.5",
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@replit/codemirror-lang-nix": "6.0.1",
     "@replit/codemirror-vim": "6.3.0",
@@ -52,7 +57,6 @@
     "codemirror-lang-elixir": "4.0.1",
     "codemirror-lang-hcl": "0.1.0",
     "codemirror-lang-mermaid": "0.5.0",
-    "@eslint/js": "10.0.1",
     "eslint-linter-browserify": "10.1.0",
     "globals": "17.4.0"
   }

packages/codemirror/src/color_themes.ts

@@ -77,6 +77,16 @@ const themes: ThemeDefinition[] = [
         name: "GitHub Light",
         load: async () => (await import("@fsegurai/codemirror-theme-github-light")).githubLight
     },
+    {
+        id: "high-contrast-dark",
+        name: "High Contrast Dark",
+        load: async () => (await import("@fsegurai/codemirror-theme-high-contrast-dark")).highContrastDark
+    },
+    {
+        id: "high-contrast-light",
+        name: "High Contrast Light",
+        load: async () => (await import("@fsegurai/codemirror-theme-high-contrast-light")).highContrastLight
+    },
     {
         id: "gruvbox-dark",
         name: "Gruvbox Dark",
@@ -97,6 +107,11 @@ const themes: ThemeDefinition[] = [
         name: "Material Light",
         load: async () => (await import("@fsegurai/codemirror-theme-material-light")).materialLight
     },
+    {
+        id: "material-ocean",
+        name: "Material Ocean",
+        load: async () => (await import("@fsegurai/codemirror-theme-material-ocean")).materialOcean
+    },
     {
         id: "monokai",
         name: "Monokai",
@@ -122,6 +137,11 @@ const themes: ThemeDefinition[] = [
         name: "Solarized Light",
         load: async () => (await import("@fsegurai/codemirror-theme-solarized-light")).solarizedLight
     },
+    {
+        id: "synthwave-84",
+        name: "Synthwave '84",
+        load: async () => (await import("@fsegurai/codemirror-theme-synthwave-84")).synthwave84
+    },
     {
         id: "tokyo-night-day",
         name: "Tokyo Night Day",