From 8bce241170cd5b40b200c3b00d104677c35ba8e5 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 26 Apr 2021 10:46:55 +0900 Subject: [PATCH] :art: --- src/client/pages/user/index.vue | 6 +-- src/client/scripts/theme.ts | 2 + src/client/themes/d-astro.json5 | 76 ++++++++++++++++++++++++++++++ src/client/themes/l-light.json5 | 2 +- src/client/themes/l-vivid.json5 | 82 +++++++++++++++++++++++++++++++++ 5 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 src/client/themes/d-astro.json5 create mode 100644 src/client/themes/l-vivid.json5 diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue index a1fe7ec09..717ca5d8f 100644 --- a/src/client/pages/user/index.vue +++ b/src/client/pages/user/index.vue @@ -161,15 +161,15 @@
- + {{ number(user.notesCount) }} {{ $ts.notes }} - + {{ number(user.followingCount) }} {{ $ts.following }} - + {{ number(user.followersCount) }} {{ $ts.followers }} diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts index b0bf620a7..09441c8a7 100644 --- a/src/client/scripts/theme.ts +++ b/src/client/scripts/theme.ts @@ -18,9 +18,11 @@ export const builtinThemes = [ require('@client/themes/l-light.json5'), require('@client/themes/l-apricot.json5'), require('@client/themes/l-rainy.json5'), + require('@client/themes/l-vivid.json5'), require('@client/themes/d-dark.json5'), require('@client/themes/d-persimmon.json5'), + require('@client/themes/d-astro.json5'), require('@client/themes/d-black.json5'), ] as Theme[]; diff --git a/src/client/themes/d-astro.json5 b/src/client/themes/d-astro.json5 new file mode 100644 index 000000000..a88e949c3 --- /dev/null +++ b/src/client/themes/d-astro.json5 @@ -0,0 +1,76 @@ +{ + id: '080a01c5-377d-4fbb-88cc-6bb5d04977ea', + base: 'dark', + name: 'Mi Astro', + author: 'syuilo', + props: { + bg: '#232125', + fg: '#efdab9', + cwBg: '#687390', + cwFg: '#393f4f', + link: '#78b0a0', + warn: '#ecb637', + badge: '#31b1ce', + error: '#ec4137', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: '#2a272b', + accent: '#81c08b', + header: ':alpha<0.7<@bg', + infoBg: '#253142', + infoFg: '#fff', + renote: '#659CC8', + shadow: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(255, 255, 255, 0.1)', + hashtag: '#ff9156', + mention: '#ffd152', + modalBg: 'rgba(0, 0, 0, 0.5)', + success: '#86b300', + buttonBg: 'rgba(255, 255, 255, 0.05)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#707b97', + indicator: '@accent', + mentionMe: '#fb5d38', + messageBg: ':lighten<5<@bg', + navActive: '@accent', + infoWarnBg: '#42321c', + infoWarnFg: '#ffbd3e', + navHoverFg: ':lighten<17<@fg', + dateLabelFg: '@fg', + inputBorder: '#959da2', + panelBorder: 'rgba(0, 0, 0, 0)', + panelShadow: '" 0 8px 24px rgba(0, 0, 0, 0.12)', + accentDarken: ':darken<10<@accent', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@accent', + accentLighten: ':lighten<10<@accent', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':lighten<3<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + htmlThemeColor: '@bg', + panelHighlight: ':lighten<3<@panel', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + 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', + 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', + }, +} diff --git a/src/client/themes/l-light.json5 b/src/client/themes/l-light.json5 index fdc1700b9..27a973c88 100644 --- a/src/client/themes/l-light.json5 +++ b/src/client/themes/l-light.json5 @@ -10,7 +10,7 @@ props: { bg: '#f9f9f9', fg: '#676767', - divider: 'rgb(223, 223, 223)', + divider: '#e8e8e8', header: ':alpha<0.7<@panel', navBg: '#fff', panel: '#fff', diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5 new file mode 100644 index 000000000..a21e053b0 --- /dev/null +++ b/src/client/themes/l-vivid.json5 @@ -0,0 +1,82 @@ +{ + id: '6128c2a9-5c54-43fe-a47d-17942356470b', + + name: 'Mi Vivid', + author: 'syuilo', + + base: 'light', + + props: { + bg: '#fafafa', + fg: '#444', + cwBg: '#b1b9c1', + cwFg: '#fff', + link: '#ff9400', + warn: '#ecb637', + badge: '#31b1ce', + error: '#ec4137', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: '#fff', + accent: '#008cff', + header: ':alpha<0.7<@panel', + infoBg: '#e5f5ff', + infoFg: '#72818a', + renote: '@accent', + shadow: 'rgba(0, 0, 0, 0.1)', + divider: 'rgba(0, 0, 0, 0.08)', + hashtag: '#92d400', + mention: '@accent', + modalBg: 'rgba(0, 0, 0, 0.3)', + success: '#86b300', + buttonBg: 'rgba(0, 0, 0, 0.05)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#bbc4ce', + indicator: '@accent', + mentionMe: '@mention', + messageBg: '@panel', + navActive: '@accent', + infoWarnBg: '#fff0db', + infoWarnFg: '#573c08', + navHoverFg: ':darken<17<@fg', + dateLabelFg: '@fg', + inputBorder: '#dae0e4', + panelBorder: 'rgba(0, 0, 0, 0)', + panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)', + accentDarken: ':darken<10<@accent', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@accent', + accentLighten: ':lighten<10<@accent', + buttonHoverBg: 'rgba(0, 0, 0, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':darken<3<@fg', + fgTransparent: ':alpha<0.5<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + htmlThemeColor: '@bg', + panelHighlight: ':darken<3<@panel', + listItemHoverBg: 'rgba(0, 0, 0, 0.03)', + scrollbarHandle: 'rgba(0, 0, 0, 0.2)', + wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', + fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: '@divider', + scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', + X2: ':darken<2<@panel', + X3: 'rgba(0, 0, 0, 0.05)', + X4: 'rgba(0, 0, 0, 0.1)', + X5: 'rgba(0, 0, 0, 0.05)', + X6: 'rgba(0, 0, 0, 0.25)', + X7: 'rgba(0, 0, 0, 0.05)', + X8: ':lighten<5<@accent', + X9: ':darken<5<@accent', + X10: ':alpha<0.4<@accent', + X11: 'rgba(0, 0, 0, 0.1)', + X12: 'rgba(0, 0, 0, 0.1)', + X13: 'rgba(0, 0, 0, 0.15)', + X14: ':alpha<0.5<@navBg', + X15: ':alpha<0<@panel', + X16: ':alpha<0.7<@panel', + X17: ':alpha<0.8<@bg', + }, +}