cherrypick/src/client/theme/dark.json5

{
	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',

		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',

		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',
		mfmLink: '$primary',
		mfmMention: '$primary',
		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)',
	},
}