forked from akanyan/STARTLINER
feat: theme switcher
This commit is contained in:
@ -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,
|
||||
};
|
||||
});
|
||||
|
Reference in New Issue
Block a user