add support for custom themes (#11)

Author: jcbize

.github/workflows/release.yml

@@ -26,6 +26,8 @@ jobs:
                   bun install
                   bun run build
                   mkdir ${{ env.PLUGIN_NAME }}
+                  mkdir ${{ env.PLUGIN_NAME }}/themes
+                  touch ${{ env.PLUGIN_NAME }}/themes/place custom themes here
                   cp main.js manifest.json styles.css ${{ env.PLUGIN_NAME }}
                   zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }}
                   ls

README.md

@@ -32,6 +32,10 @@ Some inline code `{jsx} <button role="button" />`.
 
 This feature can be turned off in the settings.
 
+### Custom Themes
+
+This plugin comes with a [wide variety of themes](https://expressive-code.com/guides/themes/#using-bundled-themes) bundled in. In addition, it supports custom JSON theme files compatible with VS Code. Simply place your custom JSON theme files in the plugin's `themes` folder, which can be accessed from the settings. The custom themes will show up in the Theme dropdown after restarting Obsidian.
+
 ## Code Block Configuration
 
 To configure the code block you add the configuration options on the same line as the opening triple backticks.

src/main.ts

@@ -15,6 +15,13 @@ import { filterHighlightAllPlugin } from 'src/PrismPlugin';
 import { LoadedLanguage } from 'src/LoadedLanguage';
 import { getECTheme } from 'src/themes/ECTheme';
 
+interface CustomTheme {
+	id: string;
+	displayName: string;
+	type: string;
+	jsonData: Record<string, unknown>;
+  }
+
 // some languages break obsidian's `registerMarkdownCodeBlockProcessor`, so we blacklist them
 const languageNameBlacklist = new Set(['c++', 'c#', 'f#', 'mermaid']);
 
@@ -38,7 +45,10 @@ export default class ShikiPlugin extends Plugin {
 	// @ts-expect-error TS2564
 	loadedSettings: Settings;
 
+	customThemes: CustomTheme[] = [];
+
 	async onload(): Promise<void> {
+		await this.loadCustomThemes();
 		await this.loadSettings();
 
 		this.loadedSettings = structuredClone(this.settings);
@@ -79,6 +89,38 @@ export default class ShikiPlugin extends Plugin {
 		await this.registerPrismPlugin();
 	}
 
+	async loadCustomThemes(): Promise<void> {
+
+		// @ts-expect-error TS2339
+		const themePath = this.app.vault.adapter.path.join(this.app.vault.configDir, 'plugins', this.manifest.id, 'themes');
+
+		if (! await this.app.vault.adapter.exists(themePath)) {
+			console.warn(`Path to custom themes does not exist: ${themePath}`);
+		} else {
+			const themeList = await this.app.vault.adapter.list(themePath);
+			const themeFiles = themeList.files.filter(f => f.toLowerCase().endsWith('.json'));
+
+			for (let themeFile of themeFiles) {
+				try {
+					// not all theme files have proper metadata; some contain invalid JSON
+					const theme = JSON.parse(await this.app.vault.adapter.read(themeFile));
+					const baseName = themeFile.substring(`${themePath}/`.length);
+					const displayName = theme.displayName ?? theme.name ?? baseName;
+					theme.name = baseName;
+					theme.type = theme.type ?? 'both';
+					this.customThemes.push({
+						id: baseName,
+						displayName: displayName,
+						type: theme.type,
+						jsonData: theme
+					});
+				} catch(err) {
+					console.warn(`Unable to load custom theme file: ${themeFile}`, err);
+				}
+			}
+		}
+	}
+
 	async loadLanguages(): Promise<void> {
 		for (const [shikiLanguage, registration] of Object.entries(bundledLanguages)) {
 			// the last element of the array is seemingly the most recent version of the language

src/settings/SettingsTab.ts

@@ -1,4 +1,4 @@
-import { PluginSettingTab, Setting } from 'obsidian';
+import { PluginSettingTab, Setting, Platform } from 'obsidian';
 import type ShikiPlugin from 'src/main';
 import { StringSelectModal } from 'src/settings/StringSelectModal';
 import { bundledThemesInfo } from 'shiki';
@@ -15,8 +15,16 @@ export class ShikiSettingsTab extends PluginSettingTab {
 	display(): void {
 		this.containerEl.empty();
 
-		const themes = Object.fromEntries(bundledThemesInfo.map(theme => [theme.id, `${theme.displayName} (${theme.type})`]));
-		themes['obsidian-theme'] = 'Obsidian built-in (both)';
+		// sort custom themes by their display name
+		this.plugin.customThemes.sort((a, b) => a.displayName.localeCompare(b.displayName));
+
+		const customThemes = Object.fromEntries(this.plugin.customThemes.map(theme => [theme.id, `${theme.displayName} (${theme.type})`]));
+		const builtInThemes = Object.fromEntries(bundledThemesInfo.map(theme => [theme.id, `${theme.displayName} (${theme.type})`]));
+		const themes = {
+			'obsidian-theme': 'Obsidian built-in (both)',
+			...customThemes,
+			...builtInThemes
+		};
 
 		new Setting(this.containerEl)
 			.setName('Theme')
@@ -29,6 +37,20 @@ export class ShikiSettingsTab extends PluginSettingTab {
 				});
 			});
 
+		if (Platform.isDesktopApp) {
+			new Setting(this.containerEl)
+				.setName('Custom themes')
+				.setDesc('Click to open the folder where you can add your custom JSON theme files. RESTART REQUIRED AFTER CHANGES.')
+				.addButton(button => {
+					button.setButtonText('Custom themes...').onClick(() => {
+						// @ts-expect-error TS2339
+						const themePath = this.plugin.app.vault.adapter.path.join(this.plugin.app.vault.configDir, 'plugins', this.plugin.manifest.id, 'themes');
+						// @ts-expect-error TS2339
+						this.plugin.app.openWithDefaultApp(themePath);
+					});
+				});
+		}
+
 		new Setting(this.containerEl)
 			.setName('Prefer theme colors')
 			.setDesc(

src/themes/ThemeMapper.ts

@@ -17,7 +17,13 @@ export class ThemeMapper {
 	}
 
 	async getThemeForEC(): Promise<ThemeRegistration> {
-		if (this.plugin.loadedSettings.theme !== 'obsidian-theme') {
+		if (this.plugin.loadedSettings.theme.toLowerCase().endsWith('.json')) {
+			let theme = this.plugin.customThemes.find(theme => theme.id === this.plugin.loadedSettings.theme);
+			if (theme?.jsonData) {
+				return theme.jsonData;
+			}
+		}
+		else if (this.plugin.loadedSettings.theme !== 'obsidian-theme') {
 			return (await bundledThemes[this.plugin.loadedSettings.theme as BundledTheme]()).default;
 		}
 
@@ -43,7 +49,13 @@ export class ThemeMapper {
 	}
 
 	async getTheme(): Promise<ThemeRegistration> {
-		if (this.plugin.loadedSettings.theme !== 'obsidian-theme') {
+		if (this.plugin.loadedSettings.theme.toLowerCase().endsWith('.json')) {
+			let theme = this.plugin.customThemes.find(theme => theme.id === this.plugin.loadedSettings.theme);
+			if (theme?.jsonData) {
+				return theme.jsonData;
+			}
+		}
+		else if (this.plugin.loadedSettings.theme !== 'obsidian-theme') {
 			return (await bundledThemes[this.plugin.loadedSettings.theme as BundledTheme]()).default;
 		}