Merge pull request #2781 from syuilo/theme

Theme

4 files changed, 442 insertions, 0 deletions

diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
new file mode 100644
index 0000000000..74447b8f2f
--- /dev/null
+++ b/src/client/theme/dark.json
@@ -0,0 +1,204 @@
+{
+	"meta": {
+		"id": "dark",
+		"name": "Dark",
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#282C37",
+			"text": "#d6dae0"
+		}
+	},
+
+	"primary": "$primary",
+	"primaryForeground": "#fff",
+	"secondary": "$secondary",
+	"bg": ":darken<8<$secondary",
+	"text": "$text",
+
+	"scrollbarTrack": ":darken<5<$secondary",
+	"scrollbarHandle": ":lighten<5<$secondary",
+	"scrollbarHandleHover": ":lighten<10<$secondary",
+
+	"face": "$secondary",
+	"faceText": "#fff",
+	"faceHeader": ":lighten<5<$secondary",
+	"faceHeaderText": "#e3e5e8",
+	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"faceTextButton": "#9baec8",
+	"faceTextButtonHover": "#b2c1d5",
+	"faceTextButtonActive": "#b2c1d5",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
+	"popupBg": ":lighten<5<$secondary",
+	"popupFg": "#d6dce2",
+
+	"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": "#606984",
+	"noteHeaderInfo": "#606984",
+
+	"noteActions": "#606984",
+	"noteActionsHover": "#a1a8bf",
+	"noteActionsReplyHover": "#0af",
+	"noteActionsRenoteHover": "#8d0",
+	"noteActionsReactionHover": "#fa0",
+	"noteActionsHighlighted": "#707b97",
+
+	"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)",
+
+	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
+
+	"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": "#c5ced6",
+
+	"materBg": "rgba(0, 0, 0, 0.3)",
+
+	"chartCaption": ":alpha<0.6<$text",
+
+	"announcementsBg": "#253a50",
+	"announcementsTitle": "#539eff",
+	"announcementsText": "#fff",
+
+	"donationBg": "#5d5242",
+	"donationFg": "#e4dbce",
+
+	"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",
+
+	"suspendedInfoBg": "#611d1d",
+	"suspendedInfoFg": "#ffb4b4",
+	"remoteInfoBg": "#42321c",
+	"remoteInfoFg": "#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)",
+
+	"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)",
+	"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"
+}
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
new file mode 100644
index 0000000000..fb34db57a8
--- /dev/null
+++ b/src/client/theme/halloween.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
+		"name": "Halloween",
+		"author": "syuilo",
+		"base": "dark",
+		"vars": {
+			"primary": "#d67036",
+			"secondary": "#1f1d30",
+			"text": "#b1bee3"
+		}
+	},
+
+	"renoteGradient": "#5d2d1a",
+	"renoteText": "#ff6c00",
+	"quoteBorder": "#c3631c"
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
new file mode 100644
index 0000000000..0d50dc5caa
--- /dev/null
+++ b/src/client/theme/light.json
@@ -0,0 +1,204 @@
+{
+	"meta": {
+		"id": "light",
+		"name": "Light",
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#fff",
+			"text": "#666"
+		}
+	},
+
+	"primary": "$primary",
+	"primaryForeground": "#fff",
+	"secondary": "$secondary",
+	"bg": ":darken<8<$secondary",
+	"text": "$text",
+
+	"scrollbarTrack": "#fff",
+	"scrollbarHandle": "#00000033",
+	"scrollbarHandleHover": "#00000066",
+
+	"face": "$secondary",
+	"faceText": "#444",
+	"faceHeader": ":lighten<5<$secondary",
+	"faceHeaderText": "#888",
+	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"faceTextButton": "#ccc",
+	"faceTextButtonHover": "#aaa",
+	"faceTextButtonActive": "#999",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
+	"popupBg": ":lighten<5<$secondary",
+	"popupFg": "#586069",
+
+	"subNoteBg": "rgba(0, 0, 0, 0.01)",
+	"subNoteText": ":alpha<0.7<$text",
+	"renoteGradient": "#edfde2",
+	"renoteText": "#9dbb00",
+	"quoteBorder": "#c0dac6",
+	"noteText": "#717171",
+	"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",
+
+	"reactionViewerBorder": "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": "#777",
+
+	"materBg": "rgba(0, 0, 0, 0.1)",
+
+	"chartCaption": ":alpha<0.6<$text",
+
+	"announcementsBg": "#f3f9ff",
+	"announcementsTitle": "#4078c0",
+	"announcementsText": "#57616f",
+
+	"donationBg": "#fbead4",
+	"donationFg": "#777d71",
+
+	"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",
+
+	"suspendedInfoBg": "#ffdbdb",
+	"suspendedInfoFg": "#570808",
+	"remoteInfoBg": "#fff0db",
+	"remoteInfoFg": "#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": "#7b8c88",
+	"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": "#6f7477",
+	"desktopTimelineSrcHover": "#525a5f",
+	"desktopWindowTitle": "#666",
+	"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)",
+
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
+	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
+	"mobilePostFormTextareaBg": "#fff",
+	"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.9)"
+}
diff --git a/src/client/theme/pink.json b/src/client/theme/pink.json
new file mode 100644
index 0000000000..ddb56b46e1
--- /dev/null
+++ b/src/client/theme/pink.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "e9c8c01d-9c15-48d0-9b5c-3d00843b5b36",
+		"name": "Pink",
+		"author": "syuilo",
+		"base": "light",
+		"vars": {
+			"primary": "rgb(251, 78, 112)",
+			"secondary": "rgb(255, 218, 240)",
+			"text": "rgb(113, 91, 102)"
+		}
+	},
+
+	"renoteGradient": "#ffb1c9",
+	"renoteText": "#ff588d",
+	"quoteBorder": "#ff6c9b"
+}