f2173fddb0
* Allow theme change at runtime and add hook * Save or restore default palette on theme change * Update aqt widget styles on theme change * styling fixes - drop _light_palette, as default_palette serves the same purpose - save default platform theme, and restore it when switching away from nightmode - update macOS light/dark mode on theme switch - fix unreadable menus on Windows * update night-mode classes on theme change This is the easy part - CSS styling that uses standard_css or our css variables should update automatically. The main remaining issue is JS code that sets colors based on the theme at the time it's run - eg the graph code, and the editor. * switch night mode value on toggle * expose current theme via a store; switch graphs to use it https://github.com/ankitects/anki/issues/1471#issuecomment-972402492 * start using currentTheme in editor/components This fixes basic editing - there are still components that need updating. * add simple xcodeproj for code completion * add helper to get currently-active system theme on macOS * fix setCurrentTheme not being immediately available * live update tag color * style().name() doesn't work on Qt5 * automatic theme switching on Windows/Mac * currentTheme -> pageTheme * Replace `nightModeKey` with `pageTheme` Co-authored-by: Damien Elmes <gpg@ankiweb.net>
103 lines
2.5 KiB
Svelte
103 lines
2.5 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script context="module" lang="ts">
|
|
import type { Writable } from "svelte/store";
|
|
|
|
const imageToHeightMap = new Map<string, Writable<number>>();
|
|
const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
|
|
for (const entry of entries) {
|
|
const image = entry.target as HTMLImageElement;
|
|
const store = imageToHeightMap.get(image.dataset.uuid!)!;
|
|
store.set(entry.contentRect.height);
|
|
|
|
setTimeout(() => entry.target.dispatchEvent(new Event("resize")));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { onDestroy } from "svelte";
|
|
import { pageTheme } from "../sveltelib/theme";
|
|
import { convertMathjax } from "./mathjax";
|
|
import { randomUUID } from "../lib/uuid";
|
|
import { writable } from "svelte/store";
|
|
|
|
export let mathjax: string;
|
|
export let block: boolean;
|
|
|
|
export let autofocus = false;
|
|
export let fontSize = 20;
|
|
|
|
$: [converted, title] = convertMathjax(mathjax, $pageTheme.isDark, fontSize);
|
|
$: empty = title === "MathJax";
|
|
$: encoded = encodeURIComponent(converted);
|
|
|
|
const uuid = randomUUID();
|
|
const imageHeight = writable(0);
|
|
imageToHeightMap.set(uuid, imageHeight);
|
|
|
|
$: verticalCenter = -$imageHeight / 2 + fontSize / 4;
|
|
|
|
function maybeAutofocus(image: Element): void {
|
|
if (!autofocus) {
|
|
return;
|
|
}
|
|
|
|
// This should trigger a focusing of the Mathjax Handle
|
|
const focusEvent = new CustomEvent("focusmathjax", {
|
|
detail: image,
|
|
bubbles: true,
|
|
composed: true,
|
|
});
|
|
|
|
image.dispatchEvent(focusEvent);
|
|
}
|
|
|
|
function observe(image: Element) {
|
|
observer.observe(image);
|
|
|
|
return {
|
|
destroy() {
|
|
observer.unobserve(image);
|
|
},
|
|
};
|
|
}
|
|
|
|
onDestroy(() => imageToHeightMap.delete(uuid));
|
|
</script>
|
|
|
|
<img
|
|
src="data:image/svg+xml,{encoded}"
|
|
class:block
|
|
class:empty
|
|
style="--vertical-center: {verticalCenter}px;"
|
|
alt="Mathjax"
|
|
{title}
|
|
data-anki="mathjax"
|
|
data-uuid={uuid}
|
|
on:dragstart|preventDefault
|
|
use:maybeAutofocus
|
|
use:observe
|
|
/>
|
|
|
|
<style lang="scss">
|
|
:global(anki-mathjax) {
|
|
white-space: pre;
|
|
}
|
|
|
|
img {
|
|
vertical-align: var(--vertical-center);
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.empty {
|
|
vertical-align: sub;
|
|
}
|
|
</style>
|