Add a convenient way to check enabledMode

cyanzhong · cyanzhong · commit 2296394a5dcc · 2025-07-18T20:51:54.000+08:00
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Add `markedit-theming` to your (TypeScript) project's dependencies:
 ```json
 {
   "dependencies": {
-    "markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.10.0"
+    "markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.11.0"
   }
 }
 ```
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -7,15 +7,22 @@ const view = require("@codemirror/view");
 const language = require("@codemirror/language");
 const toObject = (value, fallback = {}) => value ?? fallback;
 const userSettings = toObject(markeditApi.MarkEdit.userSettings);
-const rootValue = toObject(userSettings["extension.markeditTheming"]);
-const enabledMode = rootValue.enabledMode ?? "both";
-const lightColors = toObject(rootValue.lightTheme);
-const darkColors = toObject(rootValue.darkTheme);
-const isModeCustomized = (isDark) => ["both", isDark ? "dark" : "light"].includes(enabledMode);
+const rootValue = settingsForKey("extension.markeditTheming");
+const lightColors = isModeEnabled(false) ? toObject(rootValue.lightTheme) : void 0;
+const darkColors = isModeEnabled(true) ? toObject(rootValue.darkTheme) : void 0;
+function settingsForKey(key) {
+  return key === void 0 ? {} : toObject(userSettings[key]);
+}
+function enabledMode(settings) {
+  return settings.enabledMode ?? "both";
+}
+function isModeEnabled(isDark, mode = enabledMode(rootValue)) {
+  return ["both", isDark ? "dark" : "light"].includes(mode);
+}
 function buildBlendedTheme(isDark, extension, colors) {
   const mergedColors = mergeColors({
     lhs: colors,
-    rhs: isModeCustomized(isDark) ? isDark ? darkColors : lightColors : void 0
+    rhs: isDark ? darkColors : lightColors
   });
   const custom = isDark ? createTheme(mergedColors, { dark: true }) : createTheme(mergedColors);
   return {
@@ -290,12 +297,14 @@ function parseCssRules(cssText2) {
   }
   return result;
 }
-function overrideThemes(themes) {
-  if (themes.light !== void 0) {
-    $context().customThemes.light = themes.light;
-  }
-  if (themes.dark !== void 0) {
-    $context().customThemes.dark = themes.dark;
+function overrideThemes(config) {
+  const key = config.options?.settingsKey;
+  const mode = enabledMode(settingsForKey(key));
+  if (config.light !== void 0 && isModeEnabled(false, mode)) {
+    $context().customThemes.light = config.light;
+  }
+  if (config.dark !== void 0 && isModeEnabled(true, mode)) {
+    $context().customThemes.dark = config.dark;
   }
   if (typeof markeditApi.MarkEdit.editorView === "object") {
     updateTheme(markeditApi.MarkEdit.editorView);
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -4,16 +4,40 @@ import type { Colors } from './colors';
 /**
  * @public
  *
- * Override themes in MarkEdit.
- *
- * It is recommended to call this as soon as your script runs.
+ * Configuration for overriding themes.
  *
- * @param themes Themes for light mode and/or dark mode, both are optional.
+ * All properties are optional.
  */
-export declare function overrideThemes(themes: {
+export interface Config {
+  /**
+   * Theme for the light mode.
+   */
   light?: CustomTheme;
+  /**
+   * Theme for the dark mode.
+   */
   dark?: CustomTheme;
-}): void;
+  /**
+   * Additional options to control the behavior.
+   */
+  options?: {
+    /**
+     * The key of the extension settings in the [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#advanced-settings) file.
+     *
+     * When specified, MarkEdit-theming automatically determines the available themes based on the value of `enabledMode`.
+     */
+    settingsKey?: string;
+  };
+}
+
+/**
+ * @public
+ *
+ * Override themes in MarkEdit.
+ *
+ * It is recommended to call this as soon as your script runs.
+ */
+export declare function overrideThemes(config: Config): void;
 
 /**
  * @public
diff --git a/dist/index.js b/dist/index.js
@@ -5,15 +5,22 @@ import { EditorView } from "@codemirror/view";
 import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
 const toObject = (value, fallback = {}) => value ?? fallback;
 const userSettings = toObject(MarkEdit.userSettings);
-const rootValue = toObject(userSettings["extension.markeditTheming"]);
-const enabledMode = rootValue.enabledMode ?? "both";
-const lightColors = toObject(rootValue.lightTheme);
-const darkColors = toObject(rootValue.darkTheme);
-const isModeCustomized = (isDark) => ["both", isDark ? "dark" : "light"].includes(enabledMode);
+const rootValue = settingsForKey("extension.markeditTheming");
+const lightColors = isModeEnabled(false) ? toObject(rootValue.lightTheme) : void 0;
+const darkColors = isModeEnabled(true) ? toObject(rootValue.darkTheme) : void 0;
+function settingsForKey(key) {
+  return key === void 0 ? {} : toObject(userSettings[key]);
+}
+function enabledMode(settings) {
+  return settings.enabledMode ?? "both";
+}
+function isModeEnabled(isDark, mode = enabledMode(rootValue)) {
+  return ["both", isDark ? "dark" : "light"].includes(mode);
+}
 function buildBlendedTheme(isDark, extension, colors) {
   const mergedColors = mergeColors({
     lhs: colors,
-    rhs: isModeCustomized(isDark) ? isDark ? darkColors : lightColors : void 0
+    rhs: isDark ? darkColors : lightColors
   });
   const custom = isDark ? createTheme(mergedColors, { dark: true }) : createTheme(mergedColors);
   return {
@@ -288,12 +295,14 @@ function parseCssRules(cssText2) {
   }
   return result;
 }
-function overrideThemes(themes) {
-  if (themes.light !== void 0) {
-    $context().customThemes.light = themes.light;
-  }
-  if (themes.dark !== void 0) {
-    $context().customThemes.dark = themes.dark;
+function overrideThemes(config) {
+  const key = config.options?.settingsKey;
+  const mode = enabledMode(settingsForKey(key));
+  if (config.light !== void 0 && isModeEnabled(false, mode)) {
+    $context().customThemes.light = config.light;
+  }
+  if (config.dark !== void 0 && isModeEnabled(true, mode)) {
+    $context().customThemes.dark = config.dark;
   }
   if (typeof MarkEdit.editorView === "object") {
     updateTheme(MarkEdit.editorView);
diff --git a/index.ts b/index.ts
@@ -4,28 +4,59 @@ import { MarkEdit } from 'markedit-api';
 import { buildBlendedTheme } from './src/builder';
 import { selectors, cssText } from './src/const';
 import { injectStyles, extractTheme, extractTaggedColor, findBackground, lighterColor, isEmptyObject } from './src/utils';
+import { settingsForKey, enabledMode, isModeEnabled } from './src/settings';
 
 import type { EditorView } from '@codemirror/view';
 import type { TagStyle } from '@codemirror/language';
 import type { Colors } from './colors';
 import type { OriginalRules } from './src/types';
 
+/**
+ * @public
+ *
+ * Configuration for overriding themes.
+ *
+ * All properties are optional.
+ */
+export interface Config {
+  /**
+   * Theme for the light mode.
+   */
+  light?: CustomTheme;
+  /**
+   * Theme for the dark mode.
+   */
+  dark?: CustomTheme;
+  /**
+   * Additional options to control the behavior.
+   */
+  options?: {
+    /**
+     * The key of the extension settings in the [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#advanced-settings) file.
+     *
+     * When specified, MarkEdit-theming automatically determines the available themes based on the value of `enabledMode`.
+     */
+    settingsKey?: string;
+  };
+}
+
 /**
  * @public
  *
  * Override themes in MarkEdit.
  *
  * It is recommended to call this as soon as your script runs.
- *
- * @param themes Themes for light mode and/or dark mode, both are optional.
  */
-export function overrideThemes(themes: { light?: CustomTheme; dark?: CustomTheme }) {
-  if (themes.light !== undefined) {
-    $context().customThemes.light = themes.light;
+export function overrideThemes(config: Config) {
+  const key = config.options?.settingsKey;
+  const mode = enabledMode(settingsForKey(key));
+
+  if (config.light !== undefined && isModeEnabled(false, mode)) {
+    $context().customThemes.light = config.light;
   }
 
-  if (themes.dark !== undefined) {
-    $context().customThemes.dark = themes.dark;
+  if (config.dark !== undefined && isModeEnabled(true, mode)) {
+    $context().customThemes.dark = config.dark;
   }
 
   if (typeof MarkEdit.editorView === 'object') {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markedit-theming",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Create custom MarkEdit themes easily.",
   "scripts": {
     "lint": "eslint . --config eslint.config.mjs",
diff --git a/src/builder.ts b/src/builder.ts
@@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting, type TagStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
-import { lightColors, darkColors, isModeCustomized } from './settings';
+import { lightColors, darkColors } from './settings';
 
 import type { Extension } from '@codemirror/state';
 import type { StyleSpec } from 'style-mod';
@@ -11,7 +11,7 @@ export function buildBlendedTheme(isDark: boolean, extension?: Extension, colors
   // In a JS object, values that are spread later have higher priority
   const mergedColors = mergeColors({
     lhs: colors,
-    rhs: isModeCustomized(isDark) ? (isDark ? darkColors : lightColors) : undefined,
+    rhs: isDark ? darkColors : lightColors,
   });
 
   const custom = isDark ? createTheme(mergedColors, { dark: true }) : createTheme(mergedColors);
diff --git a/src/settings.ts b/src/settings.ts
@@ -3,9 +3,19 @@ import type { Colors } from '../colors';
 
 const toObject = (value: JSONValue, fallback = {}) => (value ?? fallback) as JSONObject;
 const userSettings = toObject(MarkEdit.userSettings);
-const rootValue = toObject(userSettings['extension.markeditTheming']);
-const enabledMode = (rootValue.enabledMode ?? 'both') as string;
+const rootValue = settingsForKey('extension.markeditTheming');
 
-export const lightColors = toObject(rootValue.lightTheme) as Colors | undefined;
-export const darkColors = toObject(rootValue.darkTheme) as Colors | undefined;
-export const isModeCustomized = (isDark: boolean) => (['both', isDark ? 'dark' : 'light']).includes(enabledMode);
+export const lightColors = isModeEnabled(false) ? (toObject(rootValue.lightTheme) as Colors) : undefined;
+export const darkColors = isModeEnabled(true) ? (toObject(rootValue.darkTheme) as Colors) : undefined;
+
+export function settingsForKey(key?: string) {
+  return key === undefined ? {} : toObject(userSettings[key]);
+}
+
+export function enabledMode(settings: JSONObject) {
+  return (settings.enabledMode ?? 'both') as string;
+}
+
+export function isModeEnabled(isDark: boolean, mode: string = enabledMode(rootValue)) {
+  return ['both', isDark ? 'dark' : 'light'].includes(mode);
+}

Original file line number	Diff line number	Diff line change
@@ -11,7 +11,7 @@ Add `markedit-theming` to your (TypeScript) project's dependencies:
`11`	`11`	```json
`12`	`12`	`{`
`13`	`13`	`"dependencies": {`
`14`		`- "markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.10.0"`
	`14`	`+ "markedit-theming": "https://github.com/MarkEdit-app/MarkEdit-theming#v0.11.0"`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	```
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "markedit-theming",`
`3`		`- "version": "0.10.0",`
	`3`	`+ "version": "0.11.0",`
`4`	`4`	`"description": "Create custom MarkEdit themes easily.",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"lint": "eslint . --config eslint.config.mjs",`