🎨

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/

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<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;

src/client/themes/chocolate.json5

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

src/client/themes/city.json5

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

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

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

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

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

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

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

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

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

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

src/client/themes/danboard.json5

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

src/client/themes/halloween.json5

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

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

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

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

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

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

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

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

src/client/themes/ocean.json5

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

src/client/themes/olive.json5

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

src/client/themes/rainy.json5

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

src/client/themes/urban.json5

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