mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-25 07:36:24 +09:00
Code

🎨

Browse Source
This commit is contained in:
syuilo 2020-10-19 13:17:11 +09:00
parent fe453c15e3
commit fb07116a4c
26 changed files with 343 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/init.ts
View File

@ -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/

27
src/client/scripts/theme.ts
View File

@ -6,7 +6,7 @@ export type Theme = {
author: string;
desc?: string;
base?: 'dark' | 'light';
props: { [key: string]: string };
props: Record<string, string>;
};
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;

20
src/client/themes/chocolate.json5
View File

@ -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',
},
}

22
src/client/themes/city.json5
View File

@ -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)',
},
}

22
src/client/themes/cosmo.json5 Normal file
View File

@ -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%)',
},
}

3
src/client/themes/black.json5 → src/client/themes/d-battery-saver.json5
View File

@ -1,9 +1,8 @@
{
id: '8c539dc1-0fab-4d47-9194-39c508e9bfe1',
name: 'Black',
name: 'Battery Saver',
author: 'syuilo',
desc: 'Basic dark theme',
base: 'dark',

29
src/client/themes/d-black.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-blue.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-green.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-lime.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-orange.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-persimmon.json5 Normal file
View File

@ -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',
},
}

29
src/client/themes/d-red.json5 Normal file
View File

@ -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',
},
}

22
src/client/themes/danboard.json5
View File

@ -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)',
},
}

17
src/client/themes/halloween.json5
View File

@ -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',
},
}

4
src/client/themes/cafe.json5 → src/client/themes/l-apricot.json5
View File

@ -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',

21
src/client/themes/l-blue.json5 Normal file
View File

@ -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',
},
}

21
src/client/themes/l-green.json5 Normal file
View File

@ -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',
},
}

4
src/client/themes/lilac.json5 → src/client/themes/l-peach.json5
View File

@ -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',

21
src/client/themes/l-red.json5 Normal file
View File

@ -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',
},
}

10
src/client/themes/white.json5 → src/client/themes/l-white.json5
View File

@ -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',
},

28
src/client/themes/lime-gray.json5 Normal file
View File

@ -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)',
},
}

20
src/client/themes/ocean.json5
View File

@ -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',
},
}

22
src/client/themes/olive.json5
View File

@ -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)',
},
}

16
src/client/themes/rainy.json5
View File

@ -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',
},
}

18
src/client/themes/urban.json5
View File

@ -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',
},
}