411 lines
9.3 KiB
Vue
411 lines
9.3 KiB
Vue
<template>
|
|
<MkStickyContainer>
|
|
<template #header
|
|
><MkPageHeader :actions="headerActions" :tabs="headerTabs"
|
|
/></template>
|
|
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
|
|
<div class="cwepdizn _formRoot">
|
|
<FormFolder :default-open="true" class="_formBlock">
|
|
<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)"
|
|
>
|
|
<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)"
|
|
>
|
|
<div
|
|
class="preview"
|
|
:style="{ background: color.forPreview }"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</FormFolder>
|
|
|
|
<FormFolder :default-open="true" class="_formBlock">
|
|
<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)"
|
|
>
|
|
<div
|
|
class="preview"
|
|
:style="{ background: color }"
|
|
></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</FormFolder>
|
|
|
|
<FormFolder :default-open="true" class="_formBlock">
|
|
<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)"
|
|
>
|
|
<div
|
|
class="preview"
|
|
:style="{
|
|
color: color.forPreview
|
|
? color.forPreview
|
|
: theme.base === 'light'
|
|
? '#5f5f5f'
|
|
: '#dadada',
|
|
}"
|
|
>
|
|
A
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</FormFolder>
|
|
|
|
<FormFolder :default-open="false" class="_formBlock">
|
|
<template #icon
|
|
><i class="ph-code ph-bold ph-lg"></i
|
|
></template>
|
|
<template #label>{{ i18n.ts.editCode }}</template>
|
|
|
|
<div class="_formRoot">
|
|
<FormTextarea
|
|
v-model="themeCode"
|
|
tall
|
|
class="_formBlock"
|
|
>
|
|
<template #label>{{
|
|
i18n.ts._theme.code
|
|
}}</template>
|
|
</FormTextarea>
|
|
<FormButton
|
|
primary
|
|
class="_formBlock"
|
|
@click="applyThemeCode"
|
|
>{{ i18n.ts.apply }}</FormButton
|
|
>
|
|
</div>
|
|
</FormFolder>
|
|
|
|
<FormFolder :default-open="false" class="_formBlock">
|
|
<template #label>{{ i18n.ts.addDescription }}</template>
|
|
|
|
<div class="_formRoot">
|
|
<FormTextarea v-model="description">
|
|
<template #label>{{
|
|
i18n.ts._theme.description
|
|
}}</template>
|
|
</FormTextarea>
|
|
</div>
|
|
</FormFolder>
|
|
</div>
|
|
</MkSpacer>
|
|
</MkStickyContainer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { watch } from "vue";
|
|
import { toUnicode } from "punycode/";
|
|
import tinycolor from "tinycolor2";
|
|
import { v4 as uuid } from "uuid";
|
|
import JSON5 from "json5";
|
|
|
|
import FormButton from "@/components/MkButton.vue";
|
|
import FormTextarea from "@/components/form/textarea.vue";
|
|
import FormFolder from "@/components/form/folder.vue";
|
|
|
|
import { $i } from "@/account";
|
|
import { Theme, applyTheme } from "@/scripts/theme";
|
|
import lightTheme from "@/themes/_light.json5";
|
|
import darkTheme from "@/themes/_dark.json5";
|
|
import { host } from "@/config";
|
|
import * as os from "@/os";
|
|
import { ColdDeviceStorage, defaultStore } from "@/store";
|
|
import { addTheme } from "@/theme-store";
|
|
import { i18n } from "@/i18n";
|
|
import { useLeaveGuard } from "@/scripts/use-leave-guard";
|
|
import { definePageMetadata } from "@/scripts/page-metadata";
|
|
|
|
const bgColors = [
|
|
{ color: "#f5f5f5", kind: "light", forPreview: "#f5f5f5" },
|
|
{ color: "#f0eee9", kind: "light", forPreview: "#f3e2b9" },
|
|
{ color: "#e9eff0", kind: "light", forPreview: "#bfe3e8" },
|
|
{ color: "#f0e9ee", kind: "light", forPreview: "#f1d1e8" },
|
|
{ color: "#dce2e0", kind: "light", forPreview: "#a4dccc" },
|
|
{ color: "#e2e0dc", kind: "light", forPreview: "#d8c7a5" },
|
|
{ color: "#d5dbe0", kind: "light", forPreview: "#b0cae0" },
|
|
{ color: "#dad5d5", kind: "light", forPreview: "#d6afaf" },
|
|
{ color: "#2b2b2b", kind: "dark", forPreview: "#444444" },
|
|
{ color: "#362e29", kind: "dark", forPreview: "#735c4d" },
|
|
{ color: "#303629", kind: "dark", forPreview: "#506d2f" },
|
|
{ color: "#293436", kind: "dark", forPreview: "#258192" },
|
|
{ color: "#2e2936", kind: "dark", forPreview: "#504069" },
|
|
{ color: "#252722", kind: "dark", forPreview: "#3c462f" },
|
|
{ color: "#212525", kind: "dark", forPreview: "#303e3e" },
|
|
{ color: "#191919", kind: "dark", forPreview: "#272727" },
|
|
] as const;
|
|
const accentColors = [
|
|
"#e36749",
|
|
"#f29924",
|
|
"#98c934",
|
|
"#34c9a9",
|
|
"#34a1c9",
|
|
"#606df7",
|
|
"#8d34c9",
|
|
"#e84d83",
|
|
];
|
|
const fgColors = [
|
|
{
|
|
color: "none",
|
|
forLight: "#5f5f5f",
|
|
forDark: "#dadada",
|
|
forPreview: null,
|
|
},
|
|
{
|
|
color: "red",
|
|
forLight: "#7f6666",
|
|
forDark: "#e4d1d1",
|
|
forPreview: "#ca4343",
|
|
},
|
|
{
|
|
color: "yellow",
|
|
forLight: "#736955",
|
|
forDark: "#e0d5c0",
|
|
forPreview: "#d49923",
|
|
},
|
|
{
|
|
color: "green",
|
|
forLight: "#586d5b",
|
|
forDark: "#d1e4d4",
|
|
forPreview: "#4cbd5c",
|
|
},
|
|
{
|
|
color: "cyan",
|
|
forLight: "#5d7475",
|
|
forDark: "#d1e3e4",
|
|
forPreview: "#2abdc3",
|
|
},
|
|
{
|
|
color: "blue",
|
|
forLight: "#676880",
|
|
forDark: "#d1d2e4",
|
|
forPreview: "#7275d8",
|
|
},
|
|
{
|
|
color: "pink",
|
|
forLight: "#84667d",
|
|
forDark: "#e4d1e0",
|
|
forPreview: "#b12390",
|
|
},
|
|
];
|
|
|
|
let theme = $ref<Partial<Theme>>({
|
|
base: "light",
|
|
props: lightTheme.props,
|
|
});
|
|
let description = $ref<string | null>(null);
|
|
let themeCode = $ref<string | null>(null);
|
|
let changed = $ref(false);
|
|
|
|
useLeaveGuard($$(changed));
|
|
|
|
function showPreview() {
|
|
os.pageWindow("/preview");
|
|
}
|
|
|
|
function setBgColor(color: (typeof bgColors)[number]) {
|
|
if (theme.base !== color.kind) {
|
|
const base = color.kind === "dark" ? darkTheme : lightTheme;
|
|
for (const prop of Object.keys(base.props)) {
|
|
if (prop === "accent") continue;
|
|
if (prop === "fg") continue;
|
|
theme.props[prop] = base.props[prop];
|
|
}
|
|
}
|
|
theme.base = color.kind;
|
|
theme.props.bg = color.color;
|
|
|
|
if (theme.props.fg) {
|
|
const matchedFgColor = fgColors.find((x) =>
|
|
[
|
|
tinycolor(x.forLight).toRgbString(),
|
|
tinycolor(x.forDark).toRgbString(),
|
|
].includes(tinycolor(theme.props.fg).toRgbString())
|
|
);
|
|
if (matchedFgColor) setFgColor(matchedFgColor);
|
|
}
|
|
}
|
|
|
|
function setAccentColor(color) {
|
|
theme.props.accent = color;
|
|
}
|
|
|
|
function setFgColor(color) {
|
|
theme.props.fg = theme.base === "light" ? color.forLight : color.forDark;
|
|
}
|
|
|
|
function apply() {
|
|
themeCode = JSON5.stringify(theme, null, "\t");
|
|
applyTheme(theme, false);
|
|
changed = true;
|
|
}
|
|
|
|
function applyThemeCode() {
|
|
let parsed;
|
|
|
|
try {
|
|
parsed = JSON5.parse(themeCode);
|
|
} catch (err) {
|
|
os.alert({
|
|
type: "error",
|
|
text: i18n.ts._theme.invalid,
|
|
});
|
|
return;
|
|
}
|
|
|
|
theme = parsed;
|
|
}
|
|
|
|
async function saveAs() {
|
|
const { canceled, result: name } = await os.inputText({
|
|
title: i18n.ts.name,
|
|
allowEmpty: false,
|
|
});
|
|
if (canceled) return;
|
|
|
|
theme.id = uuid();
|
|
theme.name = name;
|
|
theme.author = `@${$i.username}@${toUnicode(host)}`;
|
|
if (description) theme.desc = description;
|
|
await addTheme(theme);
|
|
applyTheme(theme);
|
|
if (defaultStore.state.darkMode) {
|
|
ColdDeviceStorage.set("darkTheme", theme);
|
|
} else {
|
|
ColdDeviceStorage.set("lightTheme", theme);
|
|
}
|
|
changed = false;
|
|
os.alert({
|
|
type: "success",
|
|
text: i18n.t("_theme.installed", { name: theme.name }),
|
|
});
|
|
}
|
|
|
|
watch($$(theme), apply, { deep: true });
|
|
|
|
const headerActions = $computed(() => [
|
|
{
|
|
asFullButton: true,
|
|
icon: "ph-eye ph-bold ph-lg",
|
|
text: i18n.ts.preview,
|
|
handler: showPreview,
|
|
},
|
|
{
|
|
asFullButton: true,
|
|
icon: "ph-check ph-bold ph-lg",
|
|
text: i18n.ts.saveAs,
|
|
handler: saveAs,
|
|
},
|
|
]);
|
|
|
|
const headerTabs = $computed(() => []);
|
|
|
|
definePageMetadata({
|
|
title: i18n.ts.themeEditor,
|
|
icon: "ph-palette ph-bold ph-lg",
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cwepdizn {
|
|
::v-deep(.cwepdizn-colors) {
|
|
text-align: center;
|
|
|
|
> .row {
|
|
> .color {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 8px;
|
|
|
|
> .preview {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
&:hover {
|
|
> .preview {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: 0 0 0 2px var(--divider) inset;
|
|
}
|
|
|
|
&.rounded {
|
|
border-radius: 999px;
|
|
|
|
> .preview {
|
|
border-radius: 999px;
|
|
}
|
|
}
|
|
|
|
&.char {
|
|
line-height: 42px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|