🎨

src/client/app/theme.ts

@@ -19,6 +19,9 @@ export const cafeTheme: Theme = require('../theme/cafe.json5');
 export const japaneseSushiSetTheme: Theme = require('../theme/japanese-sushi-set.json5');
 export const gruvboxDarkTheme: Theme = require('../theme/gruvbox-dark.json5');
 export const monokaiTheme: Theme = require('../theme/monokai.json5');
+export const colorfulTheme: Theme = require('../theme/colorful.json5');
+export const naturalTheme: Theme = require('../theme/natural.json5');
+export const mauveTheme: Theme = require('../theme/mauve.json5');
 
 export const builtinThemes = [
 	lightTheme,
@@ -29,7 +32,10 @@ export const builtinThemes = [
 	cafeTheme,
 	japaneseSushiSetTheme,
 	gruvboxDarkTheme,
-	monokaiTheme
+	monokaiTheme,
+	colorfulTheme,
+	naturalTheme,
+	mauveTheme,
 ];
 
 export function applyTheme(theme: Theme, persisted = true) {

src/client/theme/colorful.json5

@@ -0,0 +1,22 @@
+{
+	id: '2d066d6e-bd39-4f23-bd48-686d5c1c6ae8',
+
+	name: 'Colorful',
+	author: 'syuilo',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(255, 153, 64)',
+		secondary: 'rgb(255, 255, 255)',
+		text: 'rgb(108, 118, 128)',
+	},
+
+	props: {
+		bg: 'rgb(250, 250, 250)',
+		mfmMention: '#f07171',
+		mfmUrl: '#86b300',
+		mfmLink: '#399ee6',
+		mfmHashtag: '#fa8d3e'
+	},
+}

src/client/theme/gruvbox-dark.json5

@@ -1,7 +1,7 @@
 {
 	id: '0c6e70e2-a1ec-4053-9b1a-b6082fe016cb',
 
-	name: 'gruvbox dark',
+	name: 'Gruvbox Dark',
 	author: 'syuilo',
 
 	base: 'dark',

src/client/theme/mauve.json5

@@ -0,0 +1,20 @@
+{
+	id: '252b2caf-86c2-4c3f-a73f-e1fc1cfa5298',
+
+	name: 'Mauve',
+	author: 'とわこ & syuilo',
+
+	base: 'dark',
+
+	vars: {
+		primary: 'rgb(133, 88, 150)',
+		secondary: 'rgb(54, 43, 59)',
+		text: 'rgb(229, 223, 231)',
+	},
+
+	props: {
+		renoteGradient: '#54415d',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+	},
+}

src/client/theme/natural.json5

@@ -0,0 +1,22 @@
+{
+	id: 'b4b7d5fc-08d0-4915-b1cf-4090771e1a84',
+
+	name: 'Natural',
+	author: 'syuilo',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(0, 179, 104)',
+		secondary: '#fef8ec',
+		text: 'rgb(136, 132, 119)',
+	},
+
+	props: {
+		bg: 'rgb(248, 239, 221)',
+		mfmMention: 'rgb(238, 150, 43)',
+		mfmUrl: 'rgb(0, 189, 214)',
+		mfmLink: 'rgb(255, 87, 146)',
+		mfmHashtag: 'rgb(179, 134, 0)'
+	},
+}