diff --git a/main.ts b/main.ts index 8a8143f..55c88ae 100644 --- a/main.ts +++ b/main.ts @@ -14,7 +14,7 @@ import { } from "src/latex_translator"; import { createExportButton } from "src/export_button"; import { extractInlineMacros } from "src/inline_macro"; -import { setObserver, detachObserver } from "src/theme"; +import { setObserver, detachObserver, setPseudocodeTheme } from "src/theme"; import * as pseudocode from "pseudocode"; @@ -59,6 +59,11 @@ export default class PseudocodePlugin extends Plugin { blockDiv.empty(); blockDiv.appendChild(errorSpan); } + + // Set the pseudocode theme + if (this.settings.followSystemTheme) { + setPseudocodeTheme(blockDiv); + } } async onload() { diff --git a/src/setting.ts b/src/setting.ts index 32559a2..0f0ee25 100644 --- a/src/setting.ts +++ b/src/setting.ts @@ -15,6 +15,7 @@ export interface PseudocodeSettings { preambleEnabled: boolean; preamblePath: string; preambleLoadedNotice: boolean; + followSystemTheme: boolean; jsSettings: PseudocodeJsSettings; } @@ -23,6 +24,7 @@ export const DEFAULT_SETTINGS: PseudocodeSettings = { preambleEnabled: false, preamblePath: "preamble.sty", preambleLoadedNotice: false, + followSystemTheme: false, jsSettings: { indentSize: "1.2em", commentDelimiter: "//", diff --git a/src/setting_tab.ts b/src/setting_tab.ts index 5a5cc3b..9c92846 100644 --- a/src/setting_tab.ts +++ b/src/setting_tab.ts @@ -1,4 +1,5 @@ import { App, PluginSettingTab, Setting } from "obsidian"; +import { setObserver, detachObserver } from "./theme"; import PseudocodePlugin from "main"; @@ -36,6 +37,24 @@ export class PseudocodeSettingTab extends PluginSettingTab { }) ); + // Instantiate Follow System Theme setting + new Setting(containerEl) + .setName("Follow System Theme") + .setDesc("Whether to follow the system theme.") + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.followSystemTheme) + .onChange(async (value) => { + this.plugin.settings.followSystemTheme = value; + if (value) { + setObserver(); + } else { + detachObserver(); + } + await this.plugin.saveSettings(); + }) + ); + // Instantiate Indent Size setting new Setting(containerEl) .setName("Indent Size") diff --git a/src/theme.ts b/src/theme.ts index 96be444..71a3398 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -5,51 +5,59 @@ export const themeObserver = new MutationObserver(function (mutations) { const target = mutation.target as HTMLElement; if ( // dark -> dark & light -> light - mutation.oldValue?.contains('theme-dark') && - !mutation.oldValue?.contains('theme-light') && // key line, avoid calling twice - target.classList.value.contains('theme-light') + mutation.oldValue?.contains("theme-dark") && + !mutation.oldValue?.contains("theme-light") && // key line, avoid calling twice + target.classList.value.contains("theme-light") ) { - console.log('light theme detected'); - setTheme(); + console.log("light theme detected"); + setPseudocodeTheme(); } else if ( // light -> empty -> dark - mutation.oldValue?.contains('theme-light') && // key line, avoid calling twice - !mutation.oldValue?.contains('theme-dark') && - target.classList.value.contains('theme-dark') + mutation.oldValue?.contains("theme-light") && // key line, avoid calling twice + !mutation.oldValue?.contains("theme-dark") && + target.classList.value.contains("theme-dark") ) { - console.log('dark theme detected'); - setTheme(); + console.log("dark theme detected"); + setPseudocodeTheme(); } }); }); -function setTheme() { +export function setPseudocodeTheme(psBlock?: Element) { + const bodyElement = document.body; - const backgroundValue = getComputedStyle(bodyElement).getPropertyValue('--background-primary').trim(); - const fontValue = getComputedStyle(bodyElement).getPropertyValue('--text-normal').trim(); - console.log(getComputedStyle(document.documentElement)); + const backgroundValue = getComputedStyle(bodyElement) + .getPropertyValue("--background-primary") + .trim(); + const fontValue = getComputedStyle(bodyElement) + .getPropertyValue("--text-normal") + .trim(); console.log(backgroundValue, fontValue); - // Select all elements with the class 'ps-root' - const psRootElements = document.querySelectorAll('.ps-root'); + const psRootElements = psBlock + ? psBlock.querySelectorAll(".ps-root") + : document.querySelectorAll(".ps-root"); + // console.log(psRootElements); // Loop through each element and modify the CSS properties - psRootElements.forEach(element => { + psRootElements.forEach((element) => { const htmlElement = element as HTMLElement; htmlElement.style.backgroundColor = backgroundValue; - htmlElement.style.opacity = '1'; + htmlElement.style.opacity = "1"; htmlElement.style.color = fontValue; // Change border colors for .ps-algorithm and .ps-algorithm.with-caption > .ps-line:first-child - const algorithmElements = htmlElement.querySelectorAll('.ps-algorithm'); - algorithmElements.forEach(algElement => { + const algorithmElements = htmlElement.querySelectorAll(".ps-algorithm"); + algorithmElements.forEach((algElement) => { const algHtmlElement = algElement as HTMLElement; algHtmlElement.style.borderTopColor = fontValue; algHtmlElement.style.borderBottomColor = fontValue; }); - const lineElements = htmlElement.querySelectorAll('.ps-algorithm.with-caption > .ps-line:first-child'); - lineElements.forEach(lineElement => { + const lineElements = htmlElement.querySelectorAll( + ".ps-algorithm.with-caption > .ps-line:first-child" + ); + lineElements.forEach((lineElement) => { const lineHtmlElement = lineElement as HTMLElement; lineHtmlElement.style.borderBottomColor = fontValue; }); @@ -60,10 +68,10 @@ export const setObserver = () => { themeObserver.observe(document.body, { attributes: true, attributeOldValue: true, - attributeFilter: ['class'], + attributeFilter: ["class"], }); }; export const detachObserver = () => { themeObserver.disconnect(); -}; \ No newline at end of file +};