优化样式。

This commit is contained in:
unknown 2024-07-05 22:25:24 +08:00
parent f0eeea8483
commit 950cff7a6c
2 changed files with 103 additions and 85 deletions

View File

@ -3,83 +3,83 @@ import { Theme } from "../../types/setting";
const themeList: Array<Theme> = [
{
name: "#FFFFFF",
mainFontColor: "#505050FF",
secondFontColor: "#505050FF",
mainBackgroundColor: "#FFFFFFFF",
secondBackgroundColor: "#DCDEDFFF",
borderColor: "#F0F0F0FF",
mainFontColor: "#505050",
secondFontColor: "#505050",
mainBackgroundColor: "#FFFFFF",
secondBackgroundColor: "#DCDEDF",
borderColor: "#F0F0F0",
},
{
name: "#2B2B2B",
mainFontColor: "#BBBBBBFF",
secondFontColor: "#BBBBBBFF",
mainBackgroundColor: "#2B2B2BFF",
secondBackgroundColor: "#3C3F41FF",
borderColor: "#373737FF",
mainFontColor: "#BBBBBB",
secondFontColor: "#BBBBBB",
mainBackgroundColor: "#2B2B2B",
secondBackgroundColor: "#3C3F41",
borderColor: "#373737",
},
{
name: "#508CC8",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#508CC8FF",
secondBackgroundColor: "#6FA0D2FF",
borderColor: "#5A94CDFF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#508CC8",
secondBackgroundColor: "#6FA0D2",
borderColor: "#5A94CD",
},
{
name: "#024351",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#024351FF",
secondBackgroundColor: "#025A6CFF",
borderColor: "#064D5CFF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#024351",
secondBackgroundColor: "#025A6C",
borderColor: "#064D5C",
},
{
name: "#516FA3",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#516FA3FF",
secondBackgroundColor: "#91A8D0FF",
borderColor: "#5D78A7FF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#516FA3",
secondBackgroundColor: "#91A8D0",
borderColor: "#5D78A7",
},
{
name: "#45326E",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#45326EFF",
secondBackgroundColor: "#5F4B8BFF",
borderColor: "#4C3A73FF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#45326E",
secondBackgroundColor: "#5F4B8B",
borderColor: "#4C3A73",
},
{
name: "#693030",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#693030FF",
secondBackgroundColor: "#955151FF",
borderColor: "#733535FF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#693030",
secondBackgroundColor: "#955151",
borderColor: "#733535",
},
{
name: "#9F2F4A",
mainFontColor: "#FFFFFFFF",
secondFontColor: "#FFFFFFFF",
mainBackgroundColor: "#9F2F4AFF",
secondBackgroundColor: "#EA6F8CFF",
borderColor: "#AD3350FF",
mainFontColor: "#FFFFFF",
secondFontColor: "#FFFFFF",
mainBackgroundColor: "#9F2F4A",
secondBackgroundColor: "#EA6F8C",
borderColor: "#AD3350",
},
{
name: "#000000,#FFDB00",
mainFontColor: "#B3B3B3FF",
secondFontColor: "#000000FF",
mainBackgroundColor: "#000000FF",
secondBackgroundColor: "#FFDB00FF",
borderColor: "#1D1D1DFF",
mainFontColor: "#B3B3B3",
secondFontColor: "#000000",
mainBackgroundColor: "#000000",
secondBackgroundColor: "#FFDB00",
borderColor: "#1D1D1D",
},
{
name: "#000000,#FFFFFF",
mainFontColor: "#B3B3B3FF",
secondFontColor: "#000000FF",
mainBackgroundColor: "#000000FF",
secondBackgroundColor: "#FFFFFFFF",
borderColor: "#1D1D1DFF",
mainFontColor: "#B3B3B3",
secondFontColor: "#000000",
mainBackgroundColor: "#000000",
secondBackgroundColor: "#FFFFFF",
borderColor: "#1D1D1D",
},
];

View File

@ -401,47 +401,65 @@
<span class="block font-semibold">{{
store.language.color
}}</span>
<NFormItem class="mt-1" :label="store.language.mainColor">
<NColorPicker
:modes="['hex']"
v-model:value="mainBackgroundColor"
@complete="changeMainBackgroundColor"
:to="false"
></NColorPicker>
</NFormItem>
<NFormItem class="mt-1" :label="store.language.secondaryColor">
<NColorPicker
:modes="['hex']"
v-model:value="secondBackgroundColor"
@complete="changeSecondBackgroundColor"
:to="false"
></NColorPicker>
</NFormItem>
<NFormItem class="mt-1" :label="store.language.fontMainColor">
<NColorPicker
:modes="['hex']"
v-model:value="mainFontColor"
@complete="changeMainFontColor"
:to="false"
></NColorPicker>
</NFormItem>
<NFormItem
class="mt-1"
:label="store.language.fontSecondaryColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="secondFontColor"
@complete="changeSecondFontColor"
:to="false"
></NColorPicker>
</NFormItem>
<div class="flex items-center">
<NFormItem
class="mt-1 flex-1"
:label="store.language.mainColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="mainBackgroundColor"
@complete="changeMainBackgroundColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
<NFormItem
class="mt-1 flex-1 ml-[10px]"
:label="store.language.fontMainColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="mainFontColor"
@complete="changeMainFontColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
</div>
<div class="flex items-center">
<NFormItem
class="mt-1 flex-1"
:label="store.language.secondaryColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="secondBackgroundColor"
@complete="changeSecondBackgroundColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
<NFormItem
class="mt-1 flex-1 ml-[10px]"
:label="store.language.fontSecondaryColor"
>
<NColorPicker
:modes="['hex']"
v-model:value="secondFontColor"
@complete="changeSecondFontColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
</div>
<NFormItem class="mt-1" :label="store.language.borderColor">
<NColorPicker
:modes="['hex']"
v-model:value="borderColor"
@complete="changeBorderColor"
:to="false"
:show-alpha="false"
></NColorPicker>
</NFormItem>
</NForm>