gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-14 01:39:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Fix Zoom & Attempt Theming

Browse Source
This commit is contained in:
Youwes09
2026-05-25 12:31:23 -05:00
parent cbdf9e8be1
commit e9929747d2
6 changed files with 229 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/theme.ts
+38 -49
View File
@@ -1,67 +1,56 @@
import { settingsState, updateSettings } from "$lib/state/settings.svelte";
import type { CustomTheme } from '$lib/types/settings'
let themeStyleEl: HTMLStyleElement | null = null;
let mediaQuery: MediaQueryList | null = null;
let mediaHandler: (() => void) | null = null;
let themeStyleEl: HTMLStyleElement | null = null
let mediaQuery: MediaQueryList | null = null
let mediaHandler: (() => void) | null = null
export function applyTheme() {
const themeId = settingsState.theme ?? "dark";
const isCustom = themeId.startsWith("custom:");
export function applyTheme(themeId: string, customThemes: CustomTheme[] = []) {
const custom = customThemes.find(t => t.id === themeId)
if (!isCustom) {
themeStyleEl?.remove();
themeStyleEl = null;
document.documentElement.setAttribute("data-theme", themeId);
return;
if (custom) {
const vars = Object.entries(custom.tokens)
.map(([k, v]) => ` --${k}: ${v};`)
.join('\n')
if (!themeStyleEl) {
themeStyleEl = document.createElement('style')
themeStyleEl.id = 'moku-custom-theme'
document.head.appendChild(themeStyleEl)
}
themeStyleEl.textContent = `:root {\n${vars}\n}`
document.documentElement.removeAttribute('data-theme')
return
}
const custom = settingsState.customThemes?.find(t => t.id === themeId);
if (!custom) {
themeStyleEl?.remove();
themeStyleEl = null;
document.documentElement.setAttribute("data-theme", "dark");
return;
if (themeStyleEl) {
themeStyleEl.remove()
themeStyleEl = null
}
const vars = Object.entries(custom.tokens)
.map(([k, v]) => ` --${k}: ${v};`)
.join("\n");
const css = `[data-theme="custom"] {\n${vars}\n}`;
if (!themeStyleEl) {
themeStyleEl = document.createElement("style");
themeStyleEl.id = "moku-custom-theme";
document.head.appendChild(themeStyleEl);
}
themeStyleEl.textContent = css;
document.documentElement.setAttribute("data-theme", "custom");
document.documentElement.setAttribute('data-theme', themeId)
}
function applySystemTheme(dark: boolean) {
const themeId = dark
? (settingsState.systemThemeDark ?? "dark")
: (settingsState.systemThemeLight ?? "light");
updateSettings({ theme: themeId });
}
export function mountSystemThemeSync() {
export function mountSystemThemeSync(
enabled: boolean,
darkTheme: string,
lightTheme: string,
onSwitch: (themeId: string) => void
) {
if (mediaQuery && mediaHandler) {
mediaQuery.removeEventListener("change", mediaHandler);
mediaHandler = null;
mediaQuery.removeEventListener('change', mediaHandler)
mediaHandler = null
}
if (!settingsState.systemThemeSync) return;
if (!enabled) { mediaQuery = null; return }
mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
mediaHandler = () => applySystemTheme(mediaQuery!.matches);
mediaQuery.addEventListener("change", mediaHandler);
applySystemTheme(mediaQuery.matches);
mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
mediaHandler = () => onSwitch(mediaQuery!.matches ? darkTheme : lightTheme)
mediaQuery.addEventListener('change', mediaHandler)
onSwitch(mediaQuery.matches ? darkTheme : lightTheme)
}
export function unmountSystemThemeSync() {
if (mediaQuery && mediaHandler) {
mediaQuery.removeEventListener("change", mediaHandler);
mediaHandler = null;
mediaQuery = null;
mediaQuery.removeEventListener('change', mediaHandler)
mediaHandler = null
mediaQuery = null
}
}