profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore(client): tweak theme select ui

Browse source
This commit is contained in:
syuilo 2022-07-20 23:02:14 +09:00
parent 9606ba0454
commit 39ee039fcb
1 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/client/src/pages/settings/theme.vue
View file

@ -30,21 +30,23 @@
<FormSelect v-model="lightThemeId" large class="select"> <FormSelect v-model="lightThemeId" large class="select">
<template #label>{{ i18n.ts.themeForLightMode }}</template> <template #label>{{ i18n.ts.themeForLightMode }}</template>
<template #prefix><i class="fas fa-sun"></i></template> <template #prefix><i class="fas fa-sun"></i></template>
<optgroup :label="i18n.ts.lightThemes"> <option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> <optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
<optgroup :label="i18n.ts.darkThemes"> <optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> <option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
</FormSelect> </FormSelect>
<FormSelect v-model="darkThemeId" large class="select"> <FormSelect v-model="darkThemeId" large class="select">
<template #label>{{ i18n.ts.themeForDarkMode }}</template> <template #label>{{ i18n.ts.themeForDarkMode }}</template>
<template #prefix><i class="fas fa-moon"></i></template> <template #prefix><i class="fas fa-moon"></i></template>
<optgroup :label="i18n.ts.darkThemes"> <option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
<option v-for="x in darkThemes" :key="x.id" :value="x.id">{{ x.name }}</option> <optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
<optgroup :label="i18n.ts.lightThemes"> <optgroup :label="i18n.ts._theme.builtinThemes">
<option v-for="x in lightThemes" :key="x.id" :value="x.id">{{ x.name }}</option> <option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
</FormSelect> </FormSelect>
</div> </div>
@ -83,14 +85,15 @@ import { definePageMetadata } from '@/scripts/page-metadata';
const installedThemes = ref(getThemes()); const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef(); const builtinThemes = getBuiltinThemesRef();
const instanceThemes = [];
if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme)); const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme)); const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const themes = computed(() => uniqueBy([ instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value ].filter(x => x != null), theme => theme.id));
const themes = computed(() => uniqueBy([ ...instanceThemes, ...builtinThemes.value, ...installedThemes.value ], theme => theme.id));
const darkThemes = computed(() => themes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
const lightThemes = computed(() => themes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const darkTheme = ColdDeviceStorage.ref('darkTheme'); const darkTheme = ColdDeviceStorage.ref('darkTheme');
const darkThemeId = computed({ const darkThemeId = computed({
get() { get() {