enhance(client): update themes

This commit is contained in:
syuilo 2022-07-10 15:36:02 +09:00
parent e7f4ec72b4
commit bbe4824955
5 changed files with 52 additions and 109 deletions

View file

@ -1,6 +1,6 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { globalEvents } from '@/events';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events';
export type Theme = { export type Theme = {
id: string; id: string;
@ -31,11 +31,11 @@ export const getBuiltinThemes = () => Promise.all(
'd-astro', 'd-astro',
'd-future', 'd-future',
'd-botanical', 'd-botanical',
'd-lime-green',
'd-orange-green',
'd-cherry', 'd-cherry',
'd-ice', 'd-ice',
'd-pumpkin', ].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
'd-black',
].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default))
); );
export const getBuiltinThemesRef = () => { export const getBuiltinThemesRef = () => {

View file

@ -1,17 +0,0 @@
{
id: '8c539dc1-0fab-4d47-9194-39c508e9bfe1',
name: 'Mi Black',
author: 'syuilo',
base: 'dark',
props: {
divider: '#2d2d2d',
panel: '#131313',
panelHeaderBg: '@panel',
panelHeaderDivider: '@divider',
shadow: 'rgba(255, 255, 255, 0.05)',
modalBg: 'rgba(255, 255, 255, 0.1)',
},
}

View file

@ -0,0 +1,24 @@
{
id: '02816013-8107-440f-877e-865083ffe194',
name: 'Mi Lime+Green Dark',
author: 'syuilo',
base: 'dark',
props: {
accent: '#b4e900',
bg: '#0C1210',
fg: '#dee7e4',
fgHighlighted: '#fff',
fgOnAccent: '#192320',
divider: '#e7fffb24',
panel: '#192320',
panelHeaderBg: '@panel',
panelHeaderDivider: '@divider',
popup: '#293330',
renote: '@accent',
mentionMe: '#ffaa00',
link: '#2bceff',
},
}

View file

@ -0,0 +1,24 @@
{
id: 'dc489603-27b5-424a-9b25-1ff6aec9824a',
name: 'Mi Orange+Green Dark',
author: 'syuilo',
base: 'dark',
props: {
accent: '#e97f00',
bg: '#0C1210',
fg: '#dee7e4',
fgHighlighted: '#fff',
fgOnAccent: '#192320',
divider: '#e7fffb24',
panel: '#192320',
panelHeaderBg: '@panel',
panelHeaderDivider: '@divider',
popup: '#293330',
renote: '@accent',
mentionMe: '#ffaa00',
link: '#2bceff',
},
}

View file

@ -1,88 +0,0 @@
{
id: '0b64fef3-02c7-20b5-dd87-b3f77e2b4301',
name: 'Mi Pumpkin Dark',
author: 'syuilo',
base: 'dark',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: 'rgb(37, 32, 47)',
fg: '#e0d5c0',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390',
cwFg: '#393f4f',
link: 'rgb(172, 193, 68)',
warn: '#ecb637',
badge: '#31b1ce',
error: '#ec4137',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: 'rgb(242, 133, 36)',
header: ':alpha<0.7<@panel',
infoBg: '#253142',
infoFg: '#fff',
renote: 'rgb(110, 179, 72)',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: 'rgb(188, 90, 255)',
mention: 'rgb(72, 179, 139)',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#86b300',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#707b97',
indicator: '@accent',
mentionMe: '@accent',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
fgOnAccent: '#000',
infoWarnBg: '#42321c',
infoWarnFg: '#ffbd3e',
navHoverFg: ':lighten<17<@fg',
dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
}