cherrypick/src/client/themes/light.json5

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

		driveFileIcon: '$text',

		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: '@bg',
		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)',
	},
}