Refactor

14 files changed, 776 insertions, 0 deletions

diff --git a/src/client/themes/cafe.json5 b/src/client/themes/cafe.json5
new file mode 100644
index 0000000000..084f69299c
--- /dev/null
+++ b/src/client/themes/cafe.json5
@@ -0,0 +1,21 @@
+{
+	id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b',
+
+	name: 'Cafe',
+	author: 'syuilo',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(234, 154, 82)',
+		secondary: 'rgb(238, 236, 232)',
+		text: 'rgb(149, 143, 139)',
+	},
+
+	props: {
+		renoteGradient: '#ffe1c7',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+		mfmMention: '#56907b',
+	},
+}
diff --git a/src/client/themes/colorful.json5 b/src/client/themes/colorful.json5
new file mode 100644
index 0000000000..5b7441e1cf
--- /dev/null
+++ b/src/client/themes/colorful.json5
@@ -0,0 +1,23 @@
+{
+	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',
+		mfmMentionForeground: '#fff',
+		mfmUrl: '#86b300',
+		mfmLink: '#399ee6',
+		mfmHashtag: '#fa8d3e'
+	},
+}
diff --git a/src/client/themes/dark.json5 b/src/client/themes/dark.json5
new file mode 100644
index 0000000000..13c55999e5
--- /dev/null
+++ b/src/client/themes/dark.json5
@@ -0,0 +1,234 @@
+{
+	id: 'dark',
+
+	name: 'Dark',
+	author: 'syuilo',
+	desc: 'Default dark theme',
+	kind: 'dark',
+
+	vars: {
+		primary: '#fb4e4e',
+		secondary: '#282C37',
+		text: '#d6dae0',
+	},
+
+	props: {
+		primary: '$primary',
+		primaryForeground: '#fff',
+		secondary: '$secondary',
+		bg: ':darken<8<$secondary',
+		text: '$text',
+		textHighlighted: ':lighten<7<$text',
+
+		scrollbarTrack: ':darken<5<$secondary',
+		scrollbarHandle: ':lighten<5<$secondary',
+		scrollbarHandleHover: ':lighten<10<$secondary',
+
+		link: '$primary',
+		linkTapHighlight: ':alpha<0.7<@link',
+
+		notificationIndicator: '$primary',
+
+		switchActive: '$primary',
+		switchActiveTrack: ':alpha<0.4<@switchActive',
+		radioActive: '$primary',
+
+		face: '$secondary',
+		faceText: '#fff',
+		faceHeader: ':lighten<5<$secondary',
+		faceHeaderText: '$text',
+		faceDivider: 'rgba(0, 0, 0, 0.3)',
+		faceTextButton: '$text',
+		faceTextButtonHover: ':lighten<10<$text',
+		faceTextButtonActive: ':darken<10<$text',
+		faceClearButtonHover: 'rgba(0, 0, 0, 0.1)',
+		faceClearButtonActive: 'rgba(0, 0, 0, 0.2)',
+		popupBg: ':lighten<5<$secondary',
+		popupFg: '$text',
+
+		subNoteBg: 'rgba(0, 0, 0, 0.18)',
+		subNoteText: ':alpha<0.7<$text',
+		renoteGradient: '#314027',
+		renoteText: '#9dbb00',
+		quoteBorder: '#4e945e',
+		noteText: '#fff',
+		noteHeaderName: '#fff',
+		noteHeaderBadgeFg: '#758188',
+		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.25)',
+		noteHeaderAdminFg: '#f15f71',
+		noteHeaderAdminBg: '#5d282e',
+		noteHeaderAcct: ':alpha<0.65<$text',
+		noteHeaderInfo: ':alpha<0.5<$text',
+
+		noteActions: ':alpha<0.45<$text',
+		noteActionsHover: ':alpha<0.6<$text',
+		noteActionsReplyHover: '#0af',
+		noteActionsRenoteHover: '#8d0',
+		noteActionsReactionHover: '#fa0',
+		noteActionsHighlighted: ':alpha<0.7<$text',
+
+		noteAttachedFile: 'rgba(255, 255, 255, 0.1)',
+
+		modalBackdrop: 'rgba(0, 0, 0, 0.5)',
+
+		dateDividerBg: ':darken<2<$secondary',
+		dateDividerFg: ':alpha<0.7<$text',
+
+		switchTrack: 'rgba(255, 255, 255, 0.15)',
+		radioBorder: 'rgba(255, 255, 255, 0.6)',
+		inputBorder: 'rgba(255, 255, 255, 0.7)',
+		inputLabel: 'rgba(255, 255, 255, 0.7)',
+		inputText: '#fff',
+
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonActiveBg: 'rgba(255, 255, 255, 0.15)',
+
+		autocompleteItemHoverBg: 'rgba(255, 255, 255, 0.1)',
+		autocompleteItemText: 'rgba(255, 255, 255, 0.8)',
+		autocompleteItemTextSub: 'rgba(255, 255, 255, 0.3)',
+
+		cwButtonBg: '#687390',
+		cwButtonFg: '#393f4f',
+		cwButtonHoverBg: '#707b97',
+
+		reactionPickerButtonHoverBg: 'rgba(255, 255, 255, 0.18)',
+
+		reactionViewerButtonBg: 'rgba(255, 255, 255, 0.1)',
+		reactionViewerButtonHoverBg: 'rgba(255, 255, 255, 0.2)',
+
+		pollEditorInputBg: 'rgba(0, 0, 0, 0.25)',
+
+		pollChoiceText: '#fff',
+		pollChoiceBorder: 'rgba(255, 255, 255, 0.1)',
+
+		urlPreviewBorder: 'rgba(0, 0, 0, 0.4)',
+		urlPreviewBorderHover: 'rgba(255, 255, 255, 0.2)',
+		urlPreviewTitle: '$text',
+		urlPreviewText: ':alpha<0.7<$text',
+		urlPreviewInfo: ':alpha<0.8<$text',
+
+		calendarWeek: '#43d5dc',
+		calendarSaturdayOrSunday: '#ff6679',
+		calendarDay: '$text',
+
+		materBg: 'rgba(0, 0, 0, 0.3)',
+
+		chartCaption: ':alpha<0.6<$text',
+
+		announcementsBg: '#253a50',
+		announcementsTitle: '#539eff',
+		announcementsText: '#fff',
+
+		googleSearchBg: 'rgba(0, 0, 0, 0.2)',
+		googleSearchFg: '#dee4e8',
+		googleSearchBorder: 'rgba(255, 255, 255, 0.2)',
+		googleSearchHoverBorder: 'rgba(255, 255, 255, 0.3)',
+		googleSearchHoverButton: 'rgba(255, 255, 255, 0.1)',
+
+		mfmTitleBg: 'rgba(0, 0, 0, 0.2)',
+		mfmQuote: ':alpha<0.7<$text',
+		mfmQuoteLine: ':alpha<0.6<$text',
+		mfmUrl: '$primary',
+		mfmLink: '@mfmUrl',
+		mfmMention: '$primary',
+		mfmMentionForeground: '@primaryForeground',
+		mfmHashtag: '$primary',
+
+		suspendedInfoBg: '#611d1d',
+		suspendedInfoFg: '#ffb4b4',
+		remoteInfoBg: '#42321c',
+		remoteInfoFg: '#ffbd3e',
+
+		infoBg: '#253142',
+		infoFg: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+
+		messagingRoomBg: '@bg',
+		messagingRoomInfo: '#fff',
+		messagingRoomDateDividerLine: 'rgba(255, 255, 255, 0.1)',
+		messagingRoomDateDividerText: 'rgba(255, 255, 255, 0.3)',
+		messagingRoomMessageInfo: 'rgba(255, 255, 255, 0.4)',
+		messagingRoomMessageBg: '$secondary',
+		messagingRoomMessageFg: '#fff',
+
+		formButtonBorder: 'rgba(255, 255, 255, 0.1)',
+		formButtonHoverBg: ':alpha<0.2<$primary',
+		formButtonHoverBorder: ':alpha<0.5<$primary',
+		formButtonActiveBg: ':alpha<0.12<$primary',
+
+		desktopHeaderBg: ':lighten<5<$secondary',
+		desktopHeaderFg: '$text',
+		desktopHeaderHoverFg: '#fff',
+		desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.1)',
+		desktopHeaderSearchHoverBg: 'rgba(255, 255, 255, 0.04)',
+		desktopHeaderSearchFg: '#fff',
+		desktopNotificationBg: ':alpha<0.9<$secondary',
+		desktopNotificationFg: ':alpha<0.7<$text',
+		desktopNotificationShadow: 'rgba(0, 0, 0, 0.4)',
+		desktopPostFormBg: '@face',
+		desktopPostFormTextareaBg: 'rgba(0, 0, 0, 0.25)',
+		desktopPostFormTextareaFg: '#fff',
+		desktopPostFormTransparentButtonFg: '$primary',
+		desktopPostFormTransparentButtonActiveGradientStart: ':darken<8<$secondary',
+		desktopPostFormTransparentButtonActiveGradientEnd: ':darken<3<$secondary',
+		desktopRenoteFormFooter: ':lighten<5<$secondary',
+		desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.15)',
+		desktopTimelineSrc: '@faceTextButton',
+		desktopTimelineSrcHover: '@faceTextButtonHover',
+		desktopWindowTitle: '@faceHeaderText',
+		desktopWindowShadow: 'rgba(0, 0, 0, 0.5)',
+		desktopDriveBg: '@bg',
+		desktopDriveFolderBg: ':alpha<0.2<$primary',
+		desktopDriveFolderHoverBg: ':alpha<0.3<$primary',
+		desktopDriveFolderActiveBg: ':alpha<0.3<:darken<10<$primary',
+		desktopDriveFolderFg: '#fff',
+		desktopSettingsNavItem: ':alpha<0.8<$text',
+		desktopSettingsNavItemHover: ':lighten<10<$text',
+
+		deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
+		deckColumnBg: ':darken<3<@face',
+
+		mobileHeaderBg: ':lighten<5<$secondary',
+		mobileHeaderFg: '$text',
+		mobileNavBackdrop: 'rgba(0, 0, 0, 0.7)',
+		mobilePostFormDivider: 'rgba(0, 0, 0, 0.2)',
+		mobilePostFormTextareaBg: 'rgba(0, 0, 0, 0.3)',
+		mobilePostFormButton: '$text',
+		mobileDriveNavBg: ':alpha<0.75<$secondary',
+		mobileHomeTlItemHover: 'rgba(255, 255, 255, 0.1)',
+		mobileUserPageName: '#fff',
+		mobileUserPageAcct: '$text',
+		mobileUserPageDescription: '$text',
+		mobileUserPageFollowedBg: 'rgba(0, 0, 0, 0.3)',
+		mobileUserPageFollowedFg: '$text',
+		mobileUserPageStatusHighlight: '#fff',
+		mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.3)',
+		mobileAnnouncement: 'rgba(30, 129, 216, 0.2)',
+		mobileAnnouncementFg: '#fff',
+		mobileSignedInAsBg: '#273c34',
+		mobileSignedInAsFg: '#49ab63',
+		mobileSignoutBg: '#652222',
+		mobileSignoutFg: '#ff5f56',
+
+		reversiBannerGradientStart: '#45730e',
+		reversiBannerGradientEnd: '#464300',
+		reversiDescBg: 'rgba(255, 255, 255, 0.1)',
+		reversiListItemShadow: 'rgba(0, 0, 0, 0.7)',
+		reversiMapSelectBorder: 'rgba(255, 255, 255, 0.1)',
+		reversiMapSelectHoverBorder: 'rgba(255, 255, 255, 0.2)',
+		reversiRoomFormShadow: 'rgba(0, 0, 0, 0.7)',
+		reversiRoomFooterBg: ':alpha<0.9<$secondary',
+		reversiGameHeaderLine: ':alpha<0.5<$secondary',
+		reversiGameEmptyCell: ':lighten<2<$secondary',
+		reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
+		reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
+
+		adminDashboardHeaderFg: ':alpha<0.9<$text',
+		adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.3)',
+		adminDashboardCardBg: '$secondary',
+		adminDashboardCardFg: '$text',
+		adminDashboardCardDivider: 'rgba(0, 0, 0, 0.3)',
+	},
+}
diff --git a/src/client/themes/future.json5 b/src/client/themes/future.json5
new file mode 100644
index 0000000000..7b36d4e50e
--- /dev/null
+++ b/src/client/themes/future.json5
@@ -0,0 +1,39 @@
+{
+	id: 'bb5a8287-a072-4b0a-8ae5-ea2a0d33f4f2',
+
+	name: 'Future',
+	author: 'syuilo',
+	desc: 'Sci-fi flavored',
+
+	base: 'dark',
+
+	vars: {
+		c0: '#0e0e0e',
+		c1: 'rgb(255, 105, 78)',
+		c2: 'rgb(99, 197, 210)',
+		c4: 'rgb(253, 254, 214)',
+		c3: 'rgb(204, 254, 253)',
+		primary: '$c1',
+		secondary: '#191919',
+		text: '$c3',
+	},
+
+	props: {
+		bg: '$c0',
+		noteText: '$c4',
+		noteHeaderAcct: ':alpha<0.65<$c4',
+		noteHeaderInfo: ':alpha<0.5<$c4',
+		subNoteText: ':alpha<0.7<$c4',
+		renoteGradient: 'rgba(0, 0, 0, 0)',
+		renoteText: '$c2',
+		quoteBorder: '$c2',
+		mfmHashtag: '$c1',
+		mfmUrl: '$c2',
+		mfmLink: '$c2',
+		mfmMention: '$c1',
+		mfmMentionForeground: '#fff',
+		notificationIndicator: '$c2',
+		link: '$c2',
+		desktopHeaderBg: '$secondary',
+	},
+}
diff --git a/src/client/themes/gray.json5 b/src/client/themes/gray.json5
new file mode 100644
index 0000000000..59494f278a
--- /dev/null
+++ b/src/client/themes/gray.json5
@@ -0,0 +1,21 @@
+{
+	id: '56ff14eb-1e6d-4c0c-9e84-71eb156234e5',
+
+	name: 'Gray',
+	author: 'syuilo',
+
+	base: 'light',
+
+	vars: {
+		primary: '#C03233',
+		secondary: 'rgb(213, 213, 213)',
+		text: 'rgb(102, 102, 102)',
+	},
+
+	props: {
+		renoteGradient: '#bdbdbd',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+		desktopPostFormBg: '#ececec',
+	},
+}
diff --git a/src/client/themes/gruvbox-dark.json5 b/src/client/themes/gruvbox-dark.json5
new file mode 100644
index 0000000000..2d03153190
--- /dev/null
+++ b/src/client/themes/gruvbox-dark.json5
@@ -0,0 +1,29 @@
+{
+	id: '0c6e70e2-a1ec-4053-9b1a-b6082fe016cb',
+
+	name: 'Gruvbox Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	vars: {
+		primary: 'rgb(215, 153, 33)',
+		secondary: 'rgb(40, 40, 40)',
+		text: 'rgb(235, 219, 178)',
+	},
+
+	props: {
+		renoteGradient: '#58581e',
+		renoteText: 'rgb(169, 174, 36)',
+		quoteBorder: 'rgb(169, 174, 36)',
+		mfmMention: 'rgb(177, 98, 134)',
+		mfmMentionForeground: '#fff',
+		mfmUrl: 'rgb(69, 133, 136)',
+		mfmLink: 'rgb(104, 157, 106)',
+		mfmHashtag: 'rgb(251, 73, 52)',
+		notificationIndicator: 'rgb(184, 187, 38)',
+		switchActive: 'rgb(254, 128, 25)',
+		radioActive: 'rgb(131, 165, 152)',
+		link: 'rgb(104, 157, 106)',
+	},
+}
diff --git a/src/client/themes/halloween.json5 b/src/client/themes/halloween.json5
new file mode 100644
index 0000000000..608105903a
--- /dev/null
+++ b/src/client/themes/halloween.json5
@@ -0,0 +1,21 @@
+{
+	id: '42e4f09b-67d5-498c-af7d-29faa54745b0',
+
+	name: 'Halloween',
+	author: 'syuilo',
+	desc: 'Hello, Happy Halloween!',
+
+	base: 'dark',
+
+	vars: {
+		primary: '#d67036',
+		secondary: '#1f1d30',
+		text: '#b1bee3',
+	},
+
+	props: {
+		renoteGradient: '#5d2d1a',
+		renoteText: '#ff6c00',
+		quoteBorder: '#c3631c',
+	},
+}
diff --git a/src/client/themes/japanese-sushi-set.json5 b/src/client/themes/japanese-sushi-set.json5
new file mode 100644
index 0000000000..94edecca52
--- /dev/null
+++ b/src/client/themes/japanese-sushi-set.json5
@@ -0,0 +1,20 @@
+{
+	id: '2b0a0654-cdb4-4c9a-8244-736b647d3c2a',
+
+	name: 'Japanese Sushi Set',
+	author: 'Noizenecio',
+
+	base: 'dark',
+
+	vars: {
+		primary: 'rgb(234, 136, 50)',
+		secondary: 'rgb(34, 36, 42)',
+		text: 'rgb(221, 209, 203)',
+	},
+
+	props: {
+		renoteGradient: '#6d3d14',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+	},
+}
diff --git a/src/client/themes/lavender.json5 b/src/client/themes/lavender.json5
new file mode 100644
index 0000000000..e3078ad516
--- /dev/null
+++ b/src/client/themes/lavender.json5
@@ -0,0 +1,20 @@
+{
+	id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
+
+	name: 'Lavender',
+	author: 'sokuyuku',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(206, 147, 191)',
+		secondary: 'rgb(253, 242, 243)',
+		text: 'rgb(161, 139, 146)',
+	},
+
+	props: {
+		renoteGradient: '#f7e4ec',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+	},
+}
diff --git a/src/client/themes/light.json5 b/src/client/themes/light.json5
new file mode 100644
index 0000000000..65bd3b1216
--- /dev/null
+++ b/src/client/themes/light.json5
@@ -0,0 +1,234 @@
+{
+	id: 'light',
+
+	name: 'Light',
+	author: 'syuilo',
+	desc: 'Default light theme',
+	kind: 'light',
+
+	vars: {
+		primary: '#fb4e4e',
+		secondary: '#fff',
+		text: '#666',
+	},
+
+	props: {
+		primary: '$primary',
+		primaryForeground: '#fff',
+		secondary: '$secondary',
+		bg: ':darken<8<$secondary',
+		text: '$text',
+		textHighlighted: ':darken<7<$text',
+
+		scrollbarTrack: '#fff',
+		scrollbarHandle: '#00000033',
+		scrollbarHandleHover: '#00000066',
+
+		link: '$primary',
+		linkTapHighlight: ':alpha<0.7<@link',
+
+		notificationIndicator: '$primary',
+
+		switchActive: '$primary',
+		switchActiveTrack: ':alpha<0.4<@switchActive',
+		radioActive: '$primary',
+
+		face: '$secondary',
+		faceText: '$text',
+		faceHeader: ':lighten<5<$secondary',
+		faceHeaderText: '$text',
+		faceDivider: 'rgba(0, 0, 0, 0.082)',
+		faceTextButton: ':alpha<0.7<$text',
+		faceTextButtonHover: ':alpha<0.7<:darken<7<$text',
+		faceTextButtonActive: ':alpha<0.7<:darken<10<$text',
+		faceClearButtonHover: 'rgba(0, 0, 0, 0.025)',
+		faceClearButtonActive: 'rgba(0, 0, 0, 0.05)',
+		popupBg: ':lighten<5<$secondary',
+		popupFg: '$text',
+
+		subNoteBg: 'rgba(0, 0, 0, 0.01)',
+		subNoteText: ':alpha<0.7<$text',
+		renoteGradient: '#edfde2',
+		renoteText: '#9dbb00',
+		quoteBorder: '#c0dac6',
+		noteText: '$text',
+		noteHeaderName: ':darken<2<$text',
+		noteHeaderBadgeFg: '#aaa',
+		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.05)',
+		noteHeaderAdminFg: '#f15f71',
+		noteHeaderAdminBg: '#ffdfdf',
+		noteHeaderAcct: ':alpha<0.7<@noteHeaderName',
+		noteHeaderInfo: ':alpha<0.7<@noteHeaderName',
+
+		noteActions: ':alpha<0.3<$text',
+		noteActionsHover: ':alpha<0.9<$text',
+		noteActionsReplyHover: '#0af',
+		noteActionsRenoteHover: '#8d0',
+		noteActionsReactionHover: '#fa0',
+		noteActionsHighlighted: '#888',
+
+		noteAttachedFile: 'rgba(0, 0, 0, 0.05)',
+
+		modalBackdrop: 'rgba(0, 0, 0, 0.1)',
+
+		dateDividerBg: ':darken<2<$secondary',
+		dateDividerFg: ':alpha<0.7<$text',
+
+		switchTrack: 'rgba(0, 0, 0, 0.25)',
+		radioBorder: 'rgba(0, 0, 0, 0.4)',
+		inputBorder: 'rgba(0, 0, 0, 0.42)',
+		inputLabel: 'rgba(0, 0, 0, 0.54)',
+		inputText: '#000',
+
+		buttonBg: 'rgba(0, 0, 0, 0.05)',
+		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+		buttonActiveBg: 'rgba(0, 0, 0, 0.15)',
+
+		autocompleteItemHoverBg: 'rgba(0, 0, 0, 0.1)',
+		autocompleteItemText: 'rgba(0, 0, 0, 0.8)',
+		autocompleteItemTextSub: 'rgba(0, 0, 0, 0.3)',
+
+		cwButtonBg: '#b1b9c1',
+		cwButtonFg: '#fff',
+		cwButtonHoverBg: '#bbc4ce',
+
+		reactionPickerButtonHoverBg: '#eee',
+
+		reactionViewerButtonBg: 'rgba(0, 0, 0, 0.05)',
+		reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0.1)',
+
+		pollEditorInputBg: '#fff',
+
+		pollChoiceText: '#000',
+		pollChoiceBorder: 'rgba(0, 0, 0, 0.1)',
+
+		urlPreviewBorder: 'rgba(0, 0, 0, 0.1)',
+		urlPreviewBorderHover: 'rgba(0, 0, 0, 0.2)',
+		urlPreviewTitle: '$text',
+		urlPreviewText: ':alpha<0.7<$text',
+		urlPreviewInfo: ':alpha<0.8<$text',
+
+		calendarWeek: '#19a2a9',
+		calendarSaturdayOrSunday: '#ef95a0',
+		calendarDay: '$text',
+
+		materBg: 'rgba(0, 0, 0, 0.1)',
+
+		chartCaption: ':alpha<0.6<$text',
+
+		announcementsBg: '#f3f9ff',
+		announcementsTitle: '#4078c0',
+		announcementsText: '#57616f',
+
+		googleSearchBg: '#fff',
+		googleSearchFg: '#55595c',
+		googleSearchBorder: 'rgba(0, 0, 0, 0.2)',
+		googleSearchHoverBorder: 'rgba(0, 0, 0, 0.3)',
+		googleSearchHoverButton: 'rgba(0, 0, 0, 0.05)',
+
+		mfmTitleBg: 'rgba(0, 0, 0, 0.07)',
+		mfmQuote: ':alpha<0.6<$text',
+		mfmQuoteLine: ':alpha<0.5<$text',
+		mfmUrl: '$primary',
+		mfmLink: '@mfmUrl',
+		mfmMention: '$primary',
+		mfmMentionForeground: '@primaryForeground',
+		mfmHashtag: '$primary',
+
+		suspendedInfoBg: '#ffdbdb',
+		suspendedInfoFg: '#570808',
+		remoteInfoBg: '#fff0db',
+		remoteInfoFg: '#573c08',
+
+		infoBg: '#e5f5ff',
+		infoFg: '#72818a',
+		infoWarnBg: '#fff0db',
+		infoWarnFg: '#573c08',
+
+		messagingRoomBg: '#fff',
+		messagingRoomInfo: '#000',
+		messagingRoomDateDividerLine: 'rgba(0, 0, 0, 0.1)',
+		messagingRoomDateDividerText: 'rgba(0, 0, 0, 0.3)',
+		messagingRoomMessageInfo: 'rgba(0, 0, 0, 0.4)',
+		messagingRoomMessageBg: '#eee',
+		messagingRoomMessageFg: '#333',
+
+		formButtonBorder: 'rgba(0, 0, 0, 0.1)',
+		formButtonHoverBg: ':alpha<0.12<$primary',
+		formButtonHoverBorder: ':alpha<0.3<$primary',
+		formButtonActiveBg: ':alpha<0.12<$primary',
+
+		desktopHeaderBg: ':lighten<5<$secondary',
+		desktopHeaderFg: '$text',
+		desktopHeaderHoverFg: ':darken<7<$text',
+		desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.05)',
+		desktopHeaderSearchHoverBg: 'rgba(0, 0, 0, 0.08)',
+		desktopHeaderSearchFg: '#000',
+		desktopNotificationBg: ':alpha<0.9<$secondary',
+		desktopNotificationFg: ':alpha<0.7<$text',
+		desktopNotificationShadow: 'rgba(0, 0, 0, 0.2)',
+		desktopPostFormBg: ':lighten<33<$primary',
+		desktopPostFormTextareaBg: '#fff',
+		desktopPostFormTextareaFg: '#333',
+		desktopPostFormTransparentButtonFg: ':alpha<0.5<$primary',
+		desktopPostFormTransparentButtonActiveGradientStart: ':lighten<30<$primary',
+		desktopPostFormTransparentButtonActiveGradientEnd: ':lighten<33<$primary',
+		desktopRenoteFormFooter: ':lighten<33<$primary',
+		desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.08)',
+		desktopTimelineSrc: '$text',
+		desktopTimelineSrcHover: ':darken<7<$text',
+		desktopWindowTitle: '$text',
+		desktopWindowShadow: 'rgba(0, 0, 0, 0.2)',
+		desktopDriveBg: '#fff',
+		desktopDriveFolderBg: ':lighten<31<$primary',
+		desktopDriveFolderHoverBg: ':lighten<27<$primary',
+		desktopDriveFolderActiveBg: ':lighten<25<$primary',
+		desktopDriveFolderFg: ':darken<10<$primary',
+		desktopSettingsNavItem: ':alpha<0.8<$text',
+		desktopSettingsNavItemHover: ':darken<10<$text',
+
+		deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
+		deckColumnBg: ':darken<4<@face',
+
+		mobileHeaderBg: ':lighten<5<$secondary',
+		mobileHeaderFg: '$text',
+		mobileNavBackdrop: 'rgba(0, 0, 0, 0.2)',
+		mobilePostFormDivider: 'rgba(0, 0, 0, 0.1)',
+		mobilePostFormTextareaBg: '#fff',
+		mobilePostFormButton: '$text',
+		mobileDriveNavBg: ':alpha<0.75<$secondary',
+		mobileHomeTlItemHover: 'rgba(0, 0, 0, 0.05)',
+		mobileUserPageName: '#757c82',
+		mobileUserPageAcct: '#969ea5',
+		mobileUserPageDescription: '#757c82',
+		mobileUserPageFollowedBg: '#a7bec7',
+		mobileUserPageFollowedFg: '#fff',
+		mobileUserPageStatusHighlight: '#787e86',
+		mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.07)',
+		mobileAnnouncement: 'rgba(155, 196, 232, 0.2)',
+		mobileAnnouncementFg: '#3f4967',
+		mobileSignedInAsBg: '#fcfff5',
+		mobileSignedInAsFg: '#2c662d',
+		mobileSignoutBg: '#fff6f5',
+		mobileSignoutFg: '#cc2727',
+
+		reversiBannerGradientStart: '#8bca3e',
+		reversiBannerGradientEnd: '#d6cf31',
+		reversiDescBg: 'rgba(0, 0, 0, 0.1)',
+		reversiListItemShadow: 'rgba(0, 0, 0, 0.15)',
+		reversiMapSelectBorder: 'rgba(0, 0, 0, 0.1)',
+		reversiMapSelectHoverBorder: 'rgba(0, 0, 0, 0.2)',
+		reversiRoomFormShadow: 'rgba(0, 0, 0, 0.1)',
+		reversiRoomFooterBg: ':alpha<0.9<$secondary',
+		reversiGameHeaderLine: '#c4cdd4',
+		reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
+		reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
+		reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.09)',
+
+		adminDashboardHeaderFg: ':alpha<0.9<$text',
+		adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.1)',
+		adminDashboardCardBg: '$secondary',
+		adminDashboardCardFg: '$text',
+		adminDashboardCardDivider: 'rgba(0, 0, 0, 0.082)',
+	},
+}
diff --git a/src/client/themes/mauve.json5 b/src/client/themes/mauve.json5
new file mode 100644
index 0000000000..b2ec28b445
--- /dev/null
+++ b/src/client/themes/mauve.json5
@@ -0,0 +1,20 @@
+{
+	id: '252b2caf-86c2-4c3f-a73f-e1fc1cfa5298',
+
+	name: 'Mauve',
+	author: 'とわこ',
+
+	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/themes/monokai.json5 b/src/client/themes/monokai.json5
new file mode 100644
index 0000000000..1ecd68730e
--- /dev/null
+++ b/src/client/themes/monokai.json5
@@ -0,0 +1,29 @@
+{
+	id: 'fef11dc4-6b17-436e-b374-73282c44ddc0',
+
+	name: 'Monokai',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	vars: {
+		primary: '#f92672',
+		secondary: '#272822',
+		text: '#f8f8f2',
+	},
+
+	props: {
+		renoteGradient: '#3f500f',
+		renoteText: '#a6e22e',
+		quoteBorder: '#a6e22e',
+		mfmMention: '#ae81ff',
+		mfmMentionForeground: '#fff',
+		mfmUrl: '#66d9ef',
+		mfmLink: '#e6db74',
+		mfmHashtag: '#fd971f',
+		notificationIndicator: '#66d9ef',
+		switchActive: 'rgb(166, 226, 46)',
+		radioActive: '#fd971f',
+		link: '#e6db74',
+	},
+}
diff --git a/src/client/themes/rainy.json5 b/src/client/themes/rainy.json5
new file mode 100644
index 0000000000..26ff3a6c86
--- /dev/null
+++ b/src/client/themes/rainy.json5
@@ -0,0 +1,21 @@
+{
+	id: '2058b33e-5127-4e63-ae67-a900f3a11723',
+
+	name: 'Rainy',
+	author: 'syuilo',
+	desc: 'It\'s a rainy day.',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(100, 184, 193)',
+		secondary: 'rgb(228, 234, 234)',
+		text: 'rgb(85, 94, 92)',
+	},
+
+	props: {
+		renoteGradient: '#bcd0d0',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+	},
+}
diff --git a/src/client/themes/tweet-deck.json5 b/src/client/themes/tweet-deck.json5
new file mode 100644
index 0000000000..aac9e3d009
--- /dev/null
+++ b/src/client/themes/tweet-deck.json5
@@ -0,0 +1,44 @@
+{
+	name: 'Tweet Deck',
+	id: '06f82fb4-0dad-4d70-8a3f-56cae91e1163',
+	author: 'simirall',
+	desc: 'Tweet like a pro.',
+	base: 'dark',
+	vars: {
+		primary: '#1da1f2',
+		secondary: '#15202b',
+		text: '#fdfdfd',
+	},
+	props: {
+		bg: '#10171e',
+		faceHeader: '$secondary',
+		faceTextButton: '$primary',
+		renoteGradient: '$secondary',
+		renoteText: '#17bf63',
+		quoteBorder: '#38444d',
+		noteHeaderAdminFg: '$primary',
+		noteHeaderAdminBg: '$secondary',
+		noteActionsReplyHover: '$primary',
+		noteActionsRenoteHover: '#17bf63',
+		noteActionsReactionHover: '#e0245e',
+		calendarWeek: '$primary',
+		calendarSaturdayOrSunday: '#e0245e',
+		announcementsBg: '$secondary',
+		announcementsTitle: '$primary',
+		suspendedInfoBg: '$secondary',
+		suspendedInfoFg: '$primary',
+		remoteInfoBg: '$secondary',
+		remoteInfoFg: '$primary',
+		desktopHeaderBg: '#1c2938',
+		desktopHeaderFg: '#a9adae',
+		desktopHeaderHoverFg: '#fff',
+		desktopPostFormTransparentButtonFg: '#a9adae',
+		desktopTimelineSrc: '$primary',
+		desktopTimelineSrcHover: '#fff',
+		deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.0)',
+		reversiBannerGradientStart: '$primary',
+		reversiBannerGradientEnd: '$primary',
+		reversiGameEmptyCellMyTurn: ':lighten<5<$primary',
+		reversiGameEmptyCellCanPut: ':lighten<4<$primary',
+	},
+}