From a408226509eedec52fbb24dbb91be0d85838afcb Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 18 Mar 2019 13:29:58 +0900 Subject: Refactor --- src/client/app/init.ts | 4 +- src/client/app/theme.ts | 60 ++++---- src/client/theme/black.json5 | 39 ----- src/client/theme/cafe.json5 | 21 --- src/client/theme/colorful.json5 | 23 --- src/client/theme/dark.json5 | 234 ----------------------------- src/client/theme/gray.json5 | 21 --- src/client/theme/gruvbox-dark.json5 | 29 ---- src/client/theme/halloween.json5 | 21 --- src/client/theme/japanese-sushi-set.json5 | 20 --- src/client/theme/light.json5 | 234 ----------------------------- src/client/theme/mauve.json5 | 20 --- src/client/theme/monokai.json5 | 29 ---- src/client/theme/pink.json5 | 20 --- src/client/theme/rainy.json5 | 21 --- src/client/theme/tweet-deck.json5 | 44 ------ src/client/themes/cafe.json5 | 21 +++ src/client/themes/colorful.json5 | 23 +++ src/client/themes/dark.json5 | 234 +++++++++++++++++++++++++++++ src/client/themes/future.json5 | 39 +++++ src/client/themes/gray.json5 | 21 +++ src/client/themes/gruvbox-dark.json5 | 29 ++++ src/client/themes/halloween.json5 | 21 +++ src/client/themes/japanese-sushi-set.json5 | 20 +++ src/client/themes/lavender.json5 | 20 +++ src/client/themes/light.json5 | 234 +++++++++++++++++++++++++++++ src/client/themes/mauve.json5 | 20 +++ src/client/themes/monokai.json5 | 29 ++++ src/client/themes/rainy.json5 | 21 +++ src/client/themes/tweet-deck.json5 | 44 ++++++ 30 files changed, 808 insertions(+), 808 deletions(-) delete mode 100644 src/client/theme/black.json5 delete mode 100644 src/client/theme/cafe.json5 delete mode 100644 src/client/theme/colorful.json5 delete mode 100644 src/client/theme/dark.json5 delete mode 100644 src/client/theme/gray.json5 delete mode 100644 src/client/theme/gruvbox-dark.json5 delete mode 100644 src/client/theme/halloween.json5 delete mode 100644 src/client/theme/japanese-sushi-set.json5 delete mode 100644 src/client/theme/light.json5 delete mode 100644 src/client/theme/mauve.json5 delete mode 100644 src/client/theme/monokai.json5 delete mode 100644 src/client/theme/pink.json5 delete mode 100644 src/client/theme/rainy.json5 delete mode 100644 src/client/theme/tweet-deck.json5 create mode 100644 src/client/themes/cafe.json5 create mode 100644 src/client/themes/colorful.json5 create mode 100644 src/client/themes/dark.json5 create mode 100644 src/client/themes/future.json5 create mode 100644 src/client/themes/gray.json5 create mode 100644 src/client/themes/gruvbox-dark.json5 create mode 100644 src/client/themes/halloween.json5 create mode 100644 src/client/themes/japanese-sushi-set.json5 create mode 100644 src/client/themes/lavender.json5 create mode 100644 src/client/themes/light.json5 create mode 100644 src/client/themes/mauve.json5 create mode 100644 src/client/themes/monokai.json5 create mode 100644 src/client/themes/rainy.json5 create mode 100644 src/client/themes/tweet-deck.json5 diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 0575992358..4b9f341612 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -16,11 +16,11 @@ import App from './app.vue'; import checkForUpdate from './common/scripts/check-for-update'; import MiOS from './mios'; import { version, codename, lang, locale } from './config'; -import { builtinThemes, applyTheme, blackTheme } from './theme'; +import { builtinThemes, applyTheme, futureTheme } from './theme'; import Dialog from './common/views/components/dialog.vue'; if (localStorage.getItem('theme') == null) { - applyTheme(blackTheme); + applyTheme(futureTheme); } //#region FontAwesome diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts index ba5eabad2f..0f05f9e64b 100644 --- a/src/client/app/theme.ts +++ b/src/client/app/theme.ts @@ -10,26 +10,26 @@ export type Theme = { props: { [key: string]: string }; }; -export const lightTheme: Theme = require('../theme/light.json5'); -export const darkTheme: Theme = require('../theme/dark.json5'); -export const pinkTheme: Theme = require('../theme/pink.json5'); -export const blackTheme: Theme = require('../theme/black.json5'); -export const halloweenTheme: Theme = require('../theme/halloween.json5'); -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 rainyTheme: Theme = require('../theme/rainy.json5'); -export const mauveTheme: Theme = require('../theme/mauve.json5'); -export const grayTheme: Theme = require('../theme/gray.json5'); -export const tweetDeckTheme: Theme = require('../theme/tweet-deck.json5'); +export const lightTheme: Theme = require('../themes/light.json5'); +export const darkTheme: Theme = require('../themes/dark.json5'); +export const lavenderTheme: Theme = require('../themes/lavender.json5'); +export const futureTheme: Theme = require('../themes/future.json5'); +export const halloweenTheme: Theme = require('../themes/halloween.json5'); +export const cafeTheme: Theme = require('../themes/cafe.json5'); +export const japaneseSushiSetTheme: Theme = require('../themes/japanese-sushi-set.json5'); +export const gruvboxDarkTheme: Theme = require('../themes/gruvbox-dark.json5'); +export const monokaiTheme: Theme = require('../themes/monokai.json5'); +export const colorfulTheme: Theme = require('../themes/colorful.json5'); +export const rainyTheme: Theme = require('../themes/rainy.json5'); +export const mauveTheme: Theme = require('../themes/mauve.json5'); +export const grayTheme: Theme = require('../themes/gray.json5'); +export const tweetDeckTheme: Theme = require('../themes/tweet-deck.json5'); export const builtinThemes = [ lightTheme, darkTheme, - pinkTheme, - blackTheme, + lavenderTheme, + futureTheme, halloweenTheme, cafeTheme, japaneseSushiSetTheme, @@ -42,41 +42,41 @@ export const builtinThemes = [ tweetDeckTheme, ]; -export function applyTheme(theme: Theme, persisted = true) { - document.documentElement.classList.add('changing-theme'); +export function applyTheme(themes: Theme, persisted = true) { + document.documentElement.classList.add('changing-themes'); setTimeout(() => { - document.documentElement.classList.remove('changing-theme'); + document.documentElement.classList.remove('changing-themes'); }, 1000); // Deep copy - const _theme = JSON.parse(JSON.stringify(theme)); + const _themes = JSON.parse(JSON.stringify(themes)); - if (_theme.base) { - const base = [lightTheme, darkTheme].find(x => x.id == _theme.base); - _theme.vars = Object.assign({}, base.vars, _theme.vars); - _theme.props = Object.assign({}, base.props, _theme.props); + if (_themes.base) { + const base = [lightTheme, darkTheme].find(x => x.id == _themes.base); + _themes.vars = Object.assign({}, base.vars, _themes.vars); + _themes.props = Object.assign({}, base.props, _themes.props); } - const props = compile(_theme); + const props = compile(_themes); for (const [k, v] of Object.entries(props)) { document.documentElement.style.setProperty(`--${k}`, v.toString()); } if (persisted) { - localStorage.setItem('theme', JSON.stringify(props)); + localStorage.setItem('themes', JSON.stringify(props)); } } -function compile(theme: Theme): { [key: string]: string } { +function compile(themes: Theme): { [key: string]: string } { function getColor(code: string): tinycolor.Instance { // ref if (code[0] == '@') { - return getColor(theme.props[code.substr(1)]); + return getColor(themes.props[code.substr(1)]); } if (code[0] == '$') { - return getColor(theme.vars[code.substr(1)]); + return getColor(themes.vars[code.substr(1)]); } // func @@ -98,7 +98,7 @@ function compile(theme: Theme): { [key: string]: string } { const props = {}; - for (const [k, v] of Object.entries(theme.props)) { + for (const [k, v] of Object.entries(themes.props)) { props[k] = genValue(getColor(v)); } diff --git a/src/client/theme/black.json5 b/src/client/theme/black.json5 deleted file mode 100644 index 7b36d4e50e..0000000000 --- a/src/client/theme/black.json5 +++ /dev/null @@ -1,39 +0,0 @@ -{ - 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/theme/cafe.json5 b/src/client/theme/cafe.json5 deleted file mode 100644 index 084f69299c..0000000000 --- a/src/client/theme/cafe.json5 +++ /dev/null @@ -1,21 +0,0 @@ -{ - 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/theme/colorful.json5 b/src/client/theme/colorful.json5 deleted file mode 100644 index 5b7441e1cf..0000000000 --- a/src/client/theme/colorful.json5 +++ /dev/null @@ -1,23 +0,0 @@ -{ - 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/theme/dark.json5 b/src/client/theme/dark.json5 deleted file mode 100644 index 13c55999e5..0000000000 --- a/src/client/theme/dark.json5 +++ /dev/null @@ -1,234 +0,0 @@ -{ - 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/theme/gray.json5 b/src/client/theme/gray.json5 deleted file mode 100644 index 59494f278a..0000000000 --- a/src/client/theme/gray.json5 +++ /dev/null @@ -1,21 +0,0 @@ -{ - 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/theme/gruvbox-dark.json5 b/src/client/theme/gruvbox-dark.json5 deleted file mode 100644 index 2d03153190..0000000000 --- a/src/client/theme/gruvbox-dark.json5 +++ /dev/null @@ -1,29 +0,0 @@ -{ - 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/theme/halloween.json5 b/src/client/theme/halloween.json5 deleted file mode 100644 index 608105903a..0000000000 --- a/src/client/theme/halloween.json5 +++ /dev/null @@ -1,21 +0,0 @@ -{ - 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/theme/japanese-sushi-set.json5 b/src/client/theme/japanese-sushi-set.json5 deleted file mode 100644 index 94edecca52..0000000000 --- a/src/client/theme/japanese-sushi-set.json5 +++ /dev/null @@ -1,20 +0,0 @@ -{ - 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/theme/light.json5 b/src/client/theme/light.json5 deleted file mode 100644 index 65bd3b1216..0000000000 --- a/src/client/theme/light.json5 +++ /dev/null @@ -1,234 +0,0 @@ -{ - 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/theme/mauve.json5 b/src/client/theme/mauve.json5 deleted file mode 100644 index b2ec28b445..0000000000 --- a/src/client/theme/mauve.json5 +++ /dev/null @@ -1,20 +0,0 @@ -{ - 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/theme/monokai.json5 b/src/client/theme/monokai.json5 deleted file mode 100644 index 1ecd68730e..0000000000 --- a/src/client/theme/monokai.json5 +++ /dev/null @@ -1,29 +0,0 @@ -{ - 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/theme/pink.json5 b/src/client/theme/pink.json5 deleted file mode 100644 index e3078ad516..0000000000 --- a/src/client/theme/pink.json5 +++ /dev/null @@ -1,20 +0,0 @@ -{ - 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/theme/rainy.json5 b/src/client/theme/rainy.json5 deleted file mode 100644 index 26ff3a6c86..0000000000 --- a/src/client/theme/rainy.json5 +++ /dev/null @@ -1,21 +0,0 @@ -{ - 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/theme/tweet-deck.json5 b/src/client/theme/tweet-deck.json5 deleted file mode 100644 index aac9e3d009..0000000000 --- a/src/client/theme/tweet-deck.json5 +++ /dev/null @@ -1,44 +0,0 @@ -{ - 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', - }, -} 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', + }, +} -- cgit v1.2.3-freya