@@ -50,53 +49,6 @@ export default Vue.extend({
this.connection.on('reversi_invited', this.onReversiInvited);
this.connection.on('reversi_no_invites', this.onReversiNoInvites);
-
- const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
- const isHisasiburi = ago >= 3600;
- this.$store.state.i.lastUsedAt = new Date();
-
- if (isHisasiburi) {
- (this.$refs.welcomeback as any).style.display = 'block';
- (this.$refs.main as any).style.overflow = 'hidden';
-
- anime({
- targets: this.$refs.welcomeback,
- top: '0',
- opacity: 1,
- delay: 1000,
- duration: 500,
- easing: 'easeOutQuad'
- });
-
- anime({
- targets: this.$refs.mainContainer,
- opacity: 0,
- delay: 1000,
- duration: 500,
- easing: 'easeOutQuad'
- });
-
- setTimeout(() => {
- anime({
- targets: this.$refs.welcomeback,
- top: '-48px',
- opacity: 0,
- duration: 500,
- complete: () => {
- (this.$refs.welcomeback as any).style.display = 'none';
- (this.$refs.main as any).style.overflow = 'initial';
- },
- easing: 'easeInQuad'
- });
-
- anime({
- targets: this.$refs.mainContainer,
- opacity: 1,
- duration: 500,
- easing: 'easeInQuad'
- });
- }, 2500);
- }
}
},
beforeDestroy() {
@@ -118,9 +70,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c3ae05fef..ba122cc3e 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,10 +121,8 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index a57b82129..f06f5245b 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 53512e804..a25f70147 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457b..ce33332fa 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index 1c6a829cd..f8c8aafa6 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 4118afef1..2c7134ed4 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 82ccfeaff..32f74bfe3 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -3,7 +3,7 @@
-
![]()
+
{{ host }}
{{ name }}
@@ -122,9 +122,8 @@ export default Vue.extend({
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 00c08409a..545261225 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -21,7 +21,6 @@ const defaultSettings = {
circleIcons: true,
contrastedAcct: true,
showFullAcct: false,
- gradientWindowHeader: false,
showReplyTarget: true,
showMyRenotes: true,
showRenotedMyNotes: true,
@@ -45,6 +44,9 @@ const defaultDeviceSettings = {
apiViaStream: true,
autoPopout: false,
darkmode: false,
+ darkTheme: 'dark',
+ lightTheme: 'light',
+ themes: [],
enableSounds: true,
soundVolume: 0.5,
lang: null,
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
new file mode 100644
index 000000000..555f8411f
--- /dev/null
+++ b/src/client/app/theme.ts
@@ -0,0 +1,102 @@
+import * as tinycolor from 'tinycolor2';
+
+type Theme = {
+ meta: {
+ id: string;
+ name: string;
+ author: string;
+ base?: string;
+ vars: any;
+ };
+} & {
+ [key: string]: string;
+};
+
+export function applyTheme(theme: Theme, persisted = true) {
+ if (theme.meta.base) {
+ const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
+ theme = Object.assign({}, base, theme);
+ }
+
+ const props = compile(theme);
+
+ Object.entries(props).forEach(([k, v]) => {
+ if (k == 'meta') return;
+ document.documentElement.style.setProperty(`--${k}`, v.toString());
+ });
+
+ if (persisted) {
+ localStorage.setItem('theme', JSON.stringify(props));
+ }
+}
+
+function compile(theme: Theme): { [key: string]: string } {
+ function getColor(code: string): tinycolor.Instance {
+ // ref
+ if (code[0] == '@') {
+ return getColor(theme[code.substr(1)]);
+ }
+ if (code[0] == '$') {
+ return getColor(theme.meta.vars[code.substr(1)]);
+ }
+
+ // func
+ if (code[0] == ':') {
+ const parts = code.split('<');
+ const func = parts.shift().substr(1);
+ const arg = parseFloat(parts.shift());
+ const color = getColor(parts.join('<'));
+
+ switch (func) {
+ case 'darken': return color.darken(arg);
+ case 'lighten': return color.lighten(arg);
+ case 'alpha': return color.setAlpha(arg);
+ }
+ }
+
+ return tinycolor(code);
+ }
+
+ const props = {};
+
+ Object.entries(theme).forEach(([k, v]) => {
+ if (k == 'meta') return;
+ const c = getColor(v);
+ props[k] = genValue(c);
+ });
+
+ const primary = getColor(props['primary']);
+
+ for (let i = 1; i < 10; i++) {
+ const color = primary.clone().setAlpha(i / 10);
+ props['primaryAlpha0' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().lighten(i);
+ props['primaryLighten' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().darken(i);
+ props['primaryDarken' + i] = genValue(color);
+ }
+
+ return props;
+}
+
+function genValue(c: tinycolor.Instance): string {
+ return c.toRgbString();
+}
+
+export const lightTheme = require('../theme/light.json');
+export const darkTheme = require('../theme/dark.json');
+export const pinkTheme = require('../theme/pink.json');
+export const halloweenTheme = require('../theme/halloween.json');
+
+export const builtinThemes = [
+ lightTheme,
+ darkTheme,
+ pinkTheme,
+ halloweenTheme
+];
diff --git a/src/client/assets/title.dark.svg b/src/client/assets/title.dark.svg
deleted file mode 100644
index 194741e67..000000000
--- a/src/client/assets/title.dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:75266a683d673ae75ae34b7f02de128960b29f21f768c95f0079011f181d45f5
-size 13034
diff --git a/src/client/assets/title.light.svg b/src/client/assets/title.light.svg
deleted file mode 100644
index 58ccf4f48..000000000
--- a/src/client/assets/title.light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8a5cc1859b1fb8fe06ac956ef2d81890d99c74c0a81627ad2e287418cae3fcaf
-size 13058
diff --git a/src/client/assets/title.svg b/src/client/assets/title.svg
new file mode 100644
index 000000000..b46bb3db1
--- /dev/null
+++ b/src/client/assets/title.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fc7c5a5f19aaa342b6cae6a6a0c7b163a037a3b07bb1f558aff369fbe4eb091
+size 12954
diff --git a/src/client/const.styl b/src/client/const.styl
deleted file mode 100644
index b6560701d..000000000
--- a/src/client/const.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-json('../const.json')
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
diff --git a/src/client/style.styl b/src/client/style.styl
index 6d1e53e5a..8ebba2f15 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -1,10 +1,8 @@
@charset 'utf-8'
-@import "./const"
-
/*
::selection
- background $theme-color
+ background var(--primary)
color #fff
*/
@@ -24,10 +22,8 @@ html, body
a
text-decoration none
- color $theme-color
+ color var(--primary)
cursor pointer
- tap-highlight-color rgba($theme-color, 0.7) !important
- -webkit-tap-highlight-color rgba($theme-color, 0.7) !important
&:hover
text-decoration underline
@@ -35,3 +31,9 @@ a
*
cursor pointer
+@css {
+ a {
+ tap-highlight-color: var(--primaryAlpha07) !important;
+ -webkit-tap-highlight-color: var(--primaryAlpha07) !important;
+ }
+}
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
new file mode 100644
index 000000000..74447b8f2
--- /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 000000000..fb34db57a
--- /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 000000000..0d50dc5ca
--- /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 000000000..ddb56b46e
--- /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"
+}
diff --git a/webpack.config.ts b/webpack.config.ts
index 382208057..3b14ee4a8 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -134,6 +134,8 @@ module.exports = {
preserveWhitespace: false
}
}
+ }, {
+ loader: 'vue-svg-inline-loader'
}, {
loader: 'replace',
query: {