feat: theme switcher

This commit is contained in:
2025-04-16 22:50:15 +00:00
parent f3ee0d0068
commit 658a69a1e2
7 changed files with 67 additions and 3 deletions

View File

@ -6,7 +6,12 @@ import { PhysicalSize, getCurrentWindow } from '@tauri-apps/api/window';
import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
import { invoke, invoke_nopopup } from './invoke';
import { Dirs, Feature, Game, Package, Profile, ProfileMeta } from './types';
import { changePrimaryColor, hasFeature, pkgKey } from './util';
import {
changePrimaryColor,
hasFeature,
pkgKey,
shouldPreferDark,
} from './util';
type InstallStatus = {
pkg: string;
@ -356,6 +361,7 @@ export const useClientStore = defineStore('client', () => {
const offlineMode = ref(false);
const enableAutoupdates = ref(true);
const verbose = ref(false);
const theme: Ref<'light' | 'dark' | 'system'> = ref('system');
const scaleValue = (value: ScaleType) =>
value === 's' ? 1 : value === 'm' ? 1.25 : value === 'l' ? 1.5 : 2;
@ -406,6 +412,11 @@ export const useClientStore = defineStore('client', () => {
if (input.scaleFactor) {
await setScaleFactor(input.scaleFactor);
}
if (input.theme) {
theme.value = input.theme;
}
await setTheme(theme.value);
} catch (e) {
console.error(`Error reading client options: ${e}`);
}
@ -436,6 +447,7 @@ export const useClientStore = defineStore('client', () => {
w: Math.floor(size.width),
h: Math.floor(size.height),
},
theme: theme.value,
})
);
};
@ -468,6 +480,21 @@ export const useClientStore = defineStore('client', () => {
await invoke('set_global_config', { field: 'verbose', value });
};
const setTheme = async (value: 'light' | 'dark' | 'system') => {
if (value === 'dark') {
document.documentElement.classList.add('use-dark-mode');
} else if (value === 'light') {
document.documentElement.classList.remove('use-dark-mode');
} else {
document.documentElement.classList.toggle(
'use-dark-mode',
shouldPreferDark()
);
}
theme.value = value;
await save();
};
getCurrentWindow().onResized(async ({ payload }) => {
// For whatever reason this is 0 when minimized
if (payload.width > 0) {
@ -480,6 +507,7 @@ export const useClientStore = defineStore('client', () => {
offlineMode,
enableAutoupdates,
verbose,
theme,
timeout,
scaleModel,
load,
@ -488,5 +516,6 @@ export const useClientStore = defineStore('client', () => {
setOfflineMode,
setAutoupdates,
setVerbose,
setTheme,
};
});