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

View file

@ -51,7 +51,7 @@ if (_DEV_) {
document.addEventListener('touchend', () => {}, { passive: true }); document.addEventListener('touchend', () => {}, { passive: true });
if (localStorage.getItem('theme') == null) { 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/ //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

View file

@ -6,7 +6,7 @@ export type Theme = {
author: string; author: string;
desc?: string; desc?: string;
base?: 'dark' | 'light'; base?: 'dark' | 'light';
props: { [key: string]: string }; props: Record<string, string>;
}; };
export const lightTheme: Theme = require('../themes/_light.json5'); 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 themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
export const builtinThemes = [ export const builtinThemes = [
require('../themes/white.json5'), require('../themes/l-white.json5'),
require('../themes/black.json5'), require('../themes/l-red.json5'),
require('../themes/lilac.json5'), require('../themes/l-green.json5'),
require('../themes/halloween.json5'), require('../themes/l-blue.json5'),
require('../themes/city.json5'), require('../themes/l-apricot.json5'),
require('../themes/rainy.json5'),
require('../themes/urban.json5'), require('../themes/d-black.json5'),
require('../themes/cafe.json5'), require('../themes/d-red.json5'),
require('../themes/chocolate.json5'), require('../themes/d-green.json5'),
require('../themes/danboard.json5'), require('../themes/d-blue.json5'),
require('../themes/olive.json5'), require('../themes/d-persimmon.json5'),
require('../themes/ocean.json5'),
require('../themes/d-battery-saver.json5'),
] as Theme[]; ] as Theme[];
let timeout = null; let timeout = null;

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

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

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

View file

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

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

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

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

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

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

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

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

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

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

View file

@ -1,14 +1,14 @@
{ {
id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b', id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b',
name: 'Cafe', name: 'Ai Apricot',
author: 'syuilo', author: 'syuilo',
base: 'light', base: 'light',
props: { props: {
accent: 'rgb(234, 154, 82)', accent: 'rgb(234, 154, 82)',
bg: '#DDD9D1', bg: '#e6e5e2',
fg: 'rgb(149, 143, 139)', fg: 'rgb(149, 143, 139)',
panel: '#EEECE8', panel: '#EEECE8',
renote: '@accent', renote: '@accent',

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

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

View file

@ -1,14 +1,14 @@
{ {
id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36', id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
name: 'Lilac', name: 'Mi L Peach',
author: 'syuilo', author: 'syuilo',
base: 'light', base: 'light',
props: { props: {
accent: 'rgb(206, 147, 191)', accent: 'rgb(206, 147, 191)',
bg: 'rgb(253, 242, 243)', bg: '#fff8f8',
fg: 'rgb(161, 139, 146)', fg: 'rgb(161, 139, 146)',
divider: '#ece7e7', divider: '#ece7e7',
renote: '@accent', renote: '@accent',

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

View file

@ -1,16 +1,20 @@
{ {
id: '4eea646f-7afa-4645-83e9-83af0333cd37', id: '4eea646f-7afa-4645-83e9-83af0333cd37',
name: 'White', name: 'Mi White',
author: 'syuilo', author: 'syuilo',
desc: 'Basic light theme', desc: 'Default light theme',
base: 'light', base: 'light',
props: { props: {
bg: '#F6F7F7', bg: '#f9f9f9',
fg: '#636b71',
divider: 'rgb(223, 223, 223)',
header: ':alpha<0.7<@bg', header: ':alpha<0.7<@bg',
navBg: '@bg', navBg: '@bg',
panel: '#fff',
panelShadow: '" 0 8px 24px rgb(21 43 75 / 8%)',
panelHeaderDivider: '@divider', panelHeaderDivider: '@divider',
messageBg: '#dedede', messageBg: '#dedede',
}, },

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

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

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

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

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