diff --git a/src/client/init.ts b/src/client/init.ts index 96e8e90552..4a08f09997 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -51,7 +51,7 @@ if (_DEV_) { document.addEventListener('touchend', () => {}, { passive: true }); if (localStorage.getItem('theme') == null) { - applyTheme(require('@/themes/white.json5')); + applyTheme(require('@/themes/l-white.json5')); } //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts index 476a41ace5..c1fc88bf0e 100644 --- a/src/client/scripts/theme.ts +++ b/src/client/scripts/theme.ts @@ -6,7 +6,7 @@ export type Theme = { author: string; desc?: string; base?: 'dark' | 'light'; - props: { [key: string]: string }; + props: Record; }; export const lightTheme: Theme = require('../themes/_light.json5'); @@ -15,18 +15,19 @@ export const darkTheme: Theme = require('../themes/_dark.json5'); export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X')); export const builtinThemes = [ - require('../themes/white.json5'), - require('../themes/black.json5'), - require('../themes/lilac.json5'), - require('../themes/halloween.json5'), - require('../themes/city.json5'), - require('../themes/rainy.json5'), - require('../themes/urban.json5'), - require('../themes/cafe.json5'), - require('../themes/chocolate.json5'), - require('../themes/danboard.json5'), - require('../themes/olive.json5'), - require('../themes/ocean.json5'), + require('../themes/l-white.json5'), + require('../themes/l-red.json5'), + require('../themes/l-green.json5'), + require('../themes/l-blue.json5'), + require('../themes/l-apricot.json5'), + + require('../themes/d-black.json5'), + require('../themes/d-red.json5'), + require('../themes/d-green.json5'), + require('../themes/d-blue.json5'), + require('../themes/d-persimmon.json5'), + + require('../themes/d-battery-saver.json5'), ] as Theme[]; let timeout = null; diff --git a/src/client/themes/chocolate.json5 b/src/client/themes/chocolate.json5 deleted file mode 100644 index c068d430f8..0000000000 --- a/src/client/themes/chocolate.json5 +++ /dev/null @@ -1,20 +0,0 @@ -{ - id: 'bd6577b4-8154-4a2d-b7ce-7bf59f1fa3f5', - - name: 'Chocolate', - author: 'syuilo', - desc: 'So sweet', - - base: 'dark', - - props: { - accent: 'rgb(199, 69, 32)', - bg: 'rgb(35, 25, 21)', - fg: 'rgb(216, 208, 199)', - panel: 'rgb(64, 39, 27)', - renote: '@accent', - link: '@accent', - mention: '@accent', - hashtag: '@accent', - }, -} diff --git a/src/client/themes/city.json5 b/src/client/themes/city.json5 deleted file mode 100644 index d8424065c9..0000000000 --- a/src/client/themes/city.json5 +++ /dev/null @@ -1,22 +0,0 @@ -{ - id: '8e4aa0ab-a439-43c8-b67d-16d5c03936de', - - name: 'City', - author: 'Zheneha', - - base: 'dark', - - props: { - accent: 'rgb(255, 153, 0)', - panel: 'rgb(30, 30, 30)', - bg: 'rgb(0, 0, 0)', - fg: 'rgb(255, 255, 255)', - infoFg: '@accent', - infoBg: 'rgb(0, 0, 0)', - header: 'rgb(37, 37, 37)', - mention: '@accent', - hashtag: '@accent', - link: '@accent', - renote: 'rgb(118, 179, 40)', - }, -} diff --git a/src/client/themes/cosmo.json5 b/src/client/themes/cosmo.json5 new file mode 100644 index 0000000000..bd6bad8e0f --- /dev/null +++ b/src/client/themes/cosmo.json5 @@ -0,0 +1,22 @@ +{ + id: '', + + name: 'Cosmo', + author: 'syuilo', + desc: '', + + base: 'dark', + + props: { + accent: '#d04343', + panel: '#1d2130', + bg: '#0e0f17', + fg: '#b1c2e3', + renote: '@accent', + link: '#57b5ab', + mention: '#7b61d4', + mentionMe: '#c061d4', + hashtag: '#d4d461', + divider: 'rgb(225 211 255 / 20%)', + }, +} diff --git a/src/client/themes/black.json5 b/src/client/themes/d-battery-saver.json5 similarity index 88% rename from src/client/themes/black.json5 rename to src/client/themes/d-battery-saver.json5 index e00f308fd2..e6499ace96 100644 --- a/src/client/themes/black.json5 +++ b/src/client/themes/d-battery-saver.json5 @@ -1,9 +1,8 @@ { id: '8c539dc1-0fab-4d47-9194-39c508e9bfe1', - name: 'Black', + name: 'Battery Saver', author: 'syuilo', - desc: 'Basic dark theme', base: 'dark', diff --git a/src/client/themes/d-black.json5 b/src/client/themes/d-black.json5 new file mode 100644 index 0000000000..1e30d56473 --- /dev/null +++ b/src/client/themes/d-black.json5 @@ -0,0 +1,29 @@ +{ + id: '8050783a-7f63-445a-b270-36d0f6ba1677', + + name: 'Mi Black', + author: 'syuilo', + desc: 'Default light theme', + + base: 'dark', + + props: { + bg: '#272727', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: '#363636', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/d-blue.json5 b/src/client/themes/d-blue.json5 new file mode 100644 index 0000000000..96e6240e90 --- /dev/null +++ b/src/client/themes/d-blue.json5 @@ -0,0 +1,29 @@ +{ + id: 'ab4eb6d5-dcc0-4457-8a3c-98aad8ea3979', + + name: 'Mi D Blue', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(81 185 189)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/d-green.json5 b/src/client/themes/d-green.json5 new file mode 100644 index 0000000000..f1f90d1c78 --- /dev/null +++ b/src/client/themes/d-green.json5 @@ -0,0 +1,29 @@ +{ + id: '326dc4bf-29d9-45b4-889e-bdc33e84919b', + + name: 'Mi D Green', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(152, 196, 69)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/d-lime.json5 b/src/client/themes/d-lime.json5 new file mode 100644 index 0000000000..cd49fb24cb --- /dev/null +++ b/src/client/themes/d-lime.json5 @@ -0,0 +1,29 @@ +{ + id: '326dc4bf-29d9-45b4-889e-bdc33e84919b', + + name: 'Mi D Lime', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(152, 196, 69)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/d-orange.json5 b/src/client/themes/d-orange.json5 new file mode 100644 index 0000000000..b7e9973392 --- /dev/null +++ b/src/client/themes/d-orange.json5 @@ -0,0 +1,29 @@ +{ + id: '60960086-26da-4f3c-bb0c-f6a4f89e0f60', + + name: 'Mi D Orange', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(196 115 69)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/d-persimmon.json5 b/src/client/themes/d-persimmon.json5 new file mode 100644 index 0000000000..2c32e0797b --- /dev/null +++ b/src/client/themes/d-persimmon.json5 @@ -0,0 +1,29 @@ +{ + id: 'c503d768-7c70-4db2-a4e6-08264304bc8d', + + name: 'Ai Persimmon', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(206, 102, 65)', + bg: 'rgb(41, 43, 41)', + fg: '#cdd8c7', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: '#1f211f', + renote: '@accent', + mention: '@accent', + mentionMe: '#de6161', + hashtag: '#68bad0', + link: '#a1c758', + }, +} diff --git a/src/client/themes/d-red.json5 b/src/client/themes/d-red.json5 new file mode 100644 index 0000000000..0f137322c0 --- /dev/null +++ b/src/client/themes/d-red.json5 @@ -0,0 +1,29 @@ +{ + id: '60960086-26da-4f3c-bb0c-f6a4f89e0f60', + + name: 'Mi D Red', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(196 115 69)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + renote: '@accent', + mention: '#da6d35', + mentionMe: '#d44c4c', + hashtag: '#4cb8d4', + link: '@accent', + }, +} diff --git a/src/client/themes/danboard.json5 b/src/client/themes/danboard.json5 deleted file mode 100644 index 9490716f35..0000000000 --- a/src/client/themes/danboard.json5 +++ /dev/null @@ -1,22 +0,0 @@ -{ - id: '17587283-dd92-4a2c-a22c-be0637c9e22a', - - name: 'Danboard', - author: 'syuilo', - - base: 'light', - - props: { - accent: 'rgb(218, 141, 49)', - bg: 'rgb(218, 212, 190)', - fg: 'rgb(115, 108, 92)', - panel: 'rgb(236, 232, 220)', - renote: 'rgb(100, 152, 106)', - link: 'rgb(100, 152, 106)', - mention: '@accent', - hashtag: 'rgb(100, 152, 106)', - header: 'rgba(239, 227, 213, 0.75)', - navBg: 'rgb(216, 206, 182)', - inputBorder: 'rgba(0, 0, 0, 0.1)', - }, -} diff --git a/src/client/themes/halloween.json5 b/src/client/themes/halloween.json5 deleted file mode 100644 index 1394c793ed..0000000000 --- a/src/client/themes/halloween.json5 +++ /dev/null @@ -1,17 +0,0 @@ -{ - id: '42e4f09b-67d5-498c-af7d-29faa54745b0', - - name: 'Halloween', - author: 'syuilo', - desc: 'Hello, Happy Halloween!', - - base: 'dark', - - props: { - accent: '#d67036', - panel: '#1f1d30', - bg: '#0f0e17', - fg: '#b1bee3', - renote: '@accent', - }, -} diff --git a/src/client/themes/cafe.json5 b/src/client/themes/l-apricot.json5 similarity index 88% rename from src/client/themes/cafe.json5 rename to src/client/themes/l-apricot.json5 index b86ea3f6ec..7fbc2b47c7 100644 --- a/src/client/themes/cafe.json5 +++ b/src/client/themes/l-apricot.json5 @@ -1,14 +1,14 @@ { id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b', - name: 'Cafe', + name: 'Ai Apricot', author: 'syuilo', base: 'light', props: { accent: 'rgb(234, 154, 82)', - bg: '#DDD9D1', + bg: '#e6e5e2', fg: 'rgb(149, 143, 139)', panel: '#EEECE8', renote: '@accent', diff --git a/src/client/themes/l-blue.json5 b/src/client/themes/l-blue.json5 new file mode 100644 index 0000000000..06c06da08b --- /dev/null +++ b/src/client/themes/l-blue.json5 @@ -0,0 +1,21 @@ +{ + id: 'ad18a23b-6af6-4af0-9ed4-600568250574', + + name: 'Mi L Blue', + author: 'syuilo', + + base: 'light', + + props: { + accent: '#4dbccc', + bg: '#fff', + fg: '#5d5d5d', + divider: 'rgb(223, 223, 223)', + header: ':alpha<0.7<@bg', + navBg: '@bg', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderDivider: '@divider', + messageBg: '#dedede', + }, +} diff --git a/src/client/themes/l-green.json5 b/src/client/themes/l-green.json5 new file mode 100644 index 0000000000..5a9eb8e0a2 --- /dev/null +++ b/src/client/themes/l-green.json5 @@ -0,0 +1,21 @@ +{ + id: 'a55af79a-12bf-4f8d-a0cc-718957ad59b4', + + name: 'Mi L Green', + author: 'syuilo', + + base: 'light', + + props: { + accent: '#8bcc4d', + bg: '#fff', + fg: '#5d5d5d', + divider: 'rgb(223, 223, 223)', + header: ':alpha<0.7<@bg', + navBg: '@bg', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderDivider: '@divider', + messageBg: '#dedede', + }, +} diff --git a/src/client/themes/lilac.json5 b/src/client/themes/l-peach.json5 similarity index 87% rename from src/client/themes/lilac.json5 rename to src/client/themes/l-peach.json5 index 084f3fc406..1bedf02e49 100644 --- a/src/client/themes/lilac.json5 +++ b/src/client/themes/l-peach.json5 @@ -1,14 +1,14 @@ { id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36', - name: 'Lilac', + name: 'Mi L Peach', author: 'syuilo', base: 'light', props: { accent: 'rgb(206, 147, 191)', - bg: 'rgb(253, 242, 243)', + bg: '#fff8f8', fg: 'rgb(161, 139, 146)', divider: '#ece7e7', renote: '@accent', diff --git a/src/client/themes/l-red.json5 b/src/client/themes/l-red.json5 new file mode 100644 index 0000000000..22139c3aaa --- /dev/null +++ b/src/client/themes/l-red.json5 @@ -0,0 +1,21 @@ +{ + id: '957db7cb-30fb-4c80-bf0b-04198e7ae7e3', + + name: 'Mi L Red', + author: 'syuilo', + + base: 'light', + + props: { + accent: '#fb734d', + bg: '#fff', + fg: '#5d5d5d', + divider: 'rgb(223, 223, 223)', + header: ':alpha<0.7<@bg', + navBg: '@bg', + panel: '@bg', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderDivider: '@divider', + messageBg: '#dedede', + }, +} diff --git a/src/client/themes/white.json5 b/src/client/themes/l-white.json5 similarity index 52% rename from src/client/themes/white.json5 rename to src/client/themes/l-white.json5 index 4a5e3f23ef..9daa60c119 100644 --- a/src/client/themes/white.json5 +++ b/src/client/themes/l-white.json5 @@ -1,16 +1,20 @@ { id: '4eea646f-7afa-4645-83e9-83af0333cd37', - name: 'White', + name: 'Mi White', author: 'syuilo', - desc: 'Basic light theme', + desc: 'Default light theme', base: 'light', props: { - bg: '#F6F7F7', + bg: '#f9f9f9', + fg: '#636b71', + divider: 'rgb(223, 223, 223)', header: ':alpha<0.7<@bg', navBg: '@bg', + panel: '#fff', + panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)', panelHeaderDivider: '@divider', messageBg: '#dedede', }, diff --git a/src/client/themes/lime-gray.json5 b/src/client/themes/lime-gray.json5 new file mode 100644 index 0000000000..33f4508dd7 --- /dev/null +++ b/src/client/themes/lime-gray.json5 @@ -0,0 +1,28 @@ +{ + id: '326dc4bf-29d9-45b4-889e-bdc33e84919b', + + name: 'Lime Gray', + author: 'syuilo', + + base: 'dark', + + props: { + accent: 'rgb(152, 196, 69)', + bg: 'rgb(54, 54, 54)', + fg: 'rgb(199, 209, 216)', + fgHighlighted: '#fff', + divider: 'rgba(255, 255, 255, 0.14)', + panel: 'rgb(54, 54, 54)', + panelShadow: '" 0 0 0 1px var(--divider)', + panelHeaderBg: '@panel', + panelHeaderDivider: '@divider', + infoFg: '@accent', + infoBg: 'rgb(0, 0, 0)', + header: ':alpha<0.7<@bg', + navBg: 'rgb(71, 71, 71)', + mention: '@accent', + hashtag: '@accent', + link: '@accent', + renote: 'rgb(118, 179, 40)', + }, +} diff --git a/src/client/themes/ocean.json5 b/src/client/themes/ocean.json5 deleted file mode 100644 index 84c9d403c5..0000000000 --- a/src/client/themes/ocean.json5 +++ /dev/null @@ -1,20 +0,0 @@ -{ - id: '7e5e263e-c6c1-44e4-a3d2-39198e3cddb8', - - name: 'Ocean', - author: 'simirall', - - base: 'dark', - - props: { - accent: '#1da1f2', - bg: '#10171E', - fg: '#fdfdfd', - panel: '#15202B', - header: 'rgba(20, 32, 43, 0.75)', - renote: '#17bf63', - link: '@accent', - mention: '@accent', - hashtag: '@accent', - }, -} diff --git a/src/client/themes/olive.json5 b/src/client/themes/olive.json5 deleted file mode 100644 index 67e9b77764..0000000000 --- a/src/client/themes/olive.json5 +++ /dev/null @@ -1,22 +0,0 @@ -{ - id: '0d92cf9c-ed9e-42fe-b715-be4899f54d12', - - name: 'Olive', - author: 'syuilo', - - base: 'light', - - props: { - accent: 'rgb(158, 177, 95)', - bg: 'rgb(230, 230, 223)', - fg: 'rgb(103, 115, 92)', - panel: 'rgb(243, 241, 233)', - renote: '@accent', - link: '@accent', - mention: '@accent', - hashtag: '@accent', - header: 'rgba(211, 214, 200, 0.75)', - navBg: 'rgb(220, 219, 206)', - inputBorder: 'rgba(0, 0, 0, 0.1)', - }, -} diff --git a/src/client/themes/rainy.json5 b/src/client/themes/rainy.json5 deleted file mode 100644 index a7dc181643..0000000000 --- a/src/client/themes/rainy.json5 +++ /dev/null @@ -1,16 +0,0 @@ -{ - id: '2d7d1479-acb8-4e2e-85bb-565a2d8e6966', - - name: 'Rainy', - author: 'syuilo', - - base: 'light', - - props: { - accent: 'rgb(147, 199, 206)', - bg: 'rgb(220, 229, 232)', - fg: 'rgb(139, 153, 161)', - renote: '@accent', - panelHeaderDivider: '@divider', - }, -} diff --git a/src/client/themes/urban.json5 b/src/client/themes/urban.json5 deleted file mode 100644 index 342d3b9cab..0000000000 --- a/src/client/themes/urban.json5 +++ /dev/null @@ -1,18 +0,0 @@ -{ - id: 'b9392635-8c3d-4397-aaf7-796e49781899', - - name: 'Urban', - author: 'syuilo', - - base: 'dark', - - props: { - accent: 'rgb(212, 104, 48)', - panel: 'rgb(38, 44, 53)', - bg: 'rgb(26, 29, 33)', - fg: 'rgb(199, 209, 216)', - shadow: 'rgba(0, 0, 0, 0.2)', - header: 'rgba(51, 64, 72, 0.75)', - renote: '@accent', - }, -}