mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-22 22:14:06 +02:00
Code Releases Activity

refactor

Browse Source
This commit is contained in:
syuilo
2025-08-26 08:50:34 +09:00
parent 0c8545ec1c
commit 506c8a259b
8 changed files with 26 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/frontend/src/pages/theme-editor.vue
View File

@@ -11,12 +11,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.backgroundColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<button v-for="color in bgColors.filter(x => x.kind === 'dark')" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.accentColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<button v-for="color in accentColors" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div>
</button>
</div>
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.textColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<button v-for="color in fgColors" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
@@ -75,17 +75,17 @@ SPDX-License-Identifier: AGPL-3.0-only
import { watch, ref, computed } from 'vue';
import { toUnicode } from 'punycode.js';
import tinycolor from 'tinycolor2';
import { genId } from '@/utility/id.js';
import JSON5 from 'json5';
import lightTheme from '@@/themes/_light.json5';
import darkTheme from '@@/themes/_dark.json5';
import { host } from '@@/js/config.js';
import type { Theme } from '@/theme.js';
import { genId } from '@/utility/id.js';
import MkButton from '@/components/MkButton.vue';
import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkFolder from '@/components/MkFolder.vue';
import { $i } from '@/i.js';
import { ensureSignin } from '@/i.js';
import { addTheme, applyTheme } from '@/theme.js';
import * as os from '@/os.js';
import { store } from '@/store.js';
@@ -94,6 +94,8 @@ import { useLeaveGuard } from '@/composables/use-leave-guard.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
const $i = ensureSignin();
const bgColors = [
{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
@@ -123,12 +125,15 @@ const fgColors = [
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
];
const theme = ref<Partial<Theme>>({
const theme = ref<Theme>({
id: genId(),
name: 'untitled',
author: `@${$i.username}@${toUnicode(host)}`,
base: 'light',
props: lightTheme.props,
});
const description = ref<string | null>(null);
const themeCode = ref<string | null>(null);
const themeCode = ref<string>('');
const changed = ref(false);
useLeaveGuard(changed);
@@ -194,7 +199,6 @@ async function saveAs() {
theme.value.id = genId();
theme.value.name = name;
theme.value.author = `@${$i.username}@${toUnicode(host)}`;
if (description.value) theme.value.desc = description.value;
await addTheme(theme.value);
applyTheme(theme.value);