From d8f3e9d4a37885c89c2fe9826e448c10b4957031 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 30 Dec 2018 12:45:31 +0900
Subject: [PATCH] :art:

---
 src/client/app/theme.ts             |  8 +++++++-
 src/client/theme/colorful.json5     | 22 ++++++++++++++++++++++
 src/client/theme/gruvbox-dark.json5 |  2 +-
 src/client/theme/mauve.json5        | 20 ++++++++++++++++++++
 src/client/theme/natural.json5      | 22 ++++++++++++++++++++++
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/client/theme/colorful.json5
 create mode 100644 src/client/theme/mauve.json5
 create mode 100644 src/client/theme/natural.json5

diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 3a7627c50..39537da36 100644
--- a/src/client/app/theme.ts
+++ b/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) {
diff --git a/src/client/theme/colorful.json5 b/src/client/theme/colorful.json5
new file mode 100644
index 000000000..7daa45e21
--- /dev/null
+++ b/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'
+	},
+}
diff --git a/src/client/theme/gruvbox-dark.json5 b/src/client/theme/gruvbox-dark.json5
index 0cb16d92f..65479f90e 100644
--- a/src/client/theme/gruvbox-dark.json5
+++ b/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',
diff --git a/src/client/theme/mauve.json5 b/src/client/theme/mauve.json5
new file mode 100644
index 000000000..aa1eb92f5
--- /dev/null
+++ b/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',
+	},
+}
diff --git a/src/client/theme/natural.json5 b/src/client/theme/natural.json5
new file mode 100644
index 000000000..74e9cd700
--- /dev/null
+++ b/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)'
+	},
+}