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>
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
/* eslint
|
|
@typescript-eslint/no-explicit-any: "off",
|
|
*/
|
|
|
|
import "../sveltelib/export-runtime";
|
|
|
|
import { getDeckOptionsInfo, DeckOptionsState } from "./lib";
|
|
import { setupI18n, ModuleName } from "../lib/i18n";
|
|
import { checkNightMode } from "../lib/nightmode";
|
|
import DeckOptionsPage from "./DeckOptionsPage.svelte";
|
|
import { touchDeviceKey, modalsKey } from "../components/context-keys";
|
|
|
|
export async function deckOptions(
|
|
target: HTMLDivElement,
|
|
deckId: number,
|
|
): Promise<DeckOptionsPage> {
|
|
const [info] = await Promise.all([
|
|
getDeckOptionsInfo(deckId),
|
|
setupI18n({
|
|
modules: [
|
|
ModuleName.SCHEDULING,
|
|
ModuleName.ACTIONS,
|
|
ModuleName.DECK_CONFIG,
|
|
ModuleName.KEYBOARD,
|
|
],
|
|
}),
|
|
]);
|
|
|
|
checkNightMode();
|
|
|
|
const context = new Map();
|
|
|
|
const modals = new Map();
|
|
context.set(modalsKey, modals);
|
|
|
|
const touchDevice = "ontouchstart" in document.documentElement;
|
|
context.set(touchDeviceKey, touchDevice);
|
|
|
|
const state = new DeckOptionsState(deckId, info);
|
|
return new DeckOptionsPage({
|
|
target,
|
|
props: { state },
|
|
context,
|
|
} as any);
|
|
}
|
|
|
|
import TitledContainer from "./TitledContainer.svelte";
|
|
import SpinBoxRow from "./SpinBoxRow.svelte";
|
|
import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
|
|
import EnumSelectorRow from "./EnumSelectorRow.svelte";
|
|
import SwitchRow from "./SwitchRow.svelte";
|
|
|
|
export const components = {
|
|
TitledContainer,
|
|
SpinBoxRow,
|
|
SpinBoxFloatRow,
|
|
EnumSelectorRow,
|
|
SwitchRow,
|
|
};
|