obsidian-plugin/ytliu74_obsidian-pseudocode
1
0
Fork 0
mirror of https://github.com/ytliu74/obsidian-pseudocode.git synced 2026-07-22 04:34:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

faet: Add a toggle for theme following

Browse source
This commit is contained in:
Yaotian-Liu 2024-06-05 01:13:40 -07:00
parent 3f28ab42b2
commit 81bc30282f
No known key found for this signature in database
GPG key ID: 05D362E51003CFE8
4 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
main.ts
View file

@ -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() {

2
src/setting.ts
View file

@ -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: "//",

19
src/setting_tab.ts
View file

@ -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")

56
src/theme.ts
View file

@ -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();
};
};