Tutorial 2x xenForo Color Palette and Basic Colors: Chart with IDs - Bảng màu xenForo và các màu cơ bản: Biểu đồ có ID cho XenForo 2.3

PVS · 18/11/2024

xenForo Color Palette and Basic Colors: Chart with IDs - Bảng màu xenForo và các màu cơ bản: Biểu đồ có ID cho XenForo 2.3

Màu sắc được sử dụng trong Style Properties: Color Palette. Bạn có thể sử dụng ID trong các template CSS XenForo.

Color	ID	Default	Alternate
Color1	@xf-paletteColor1	hsl(206, 80%, 95%)	hsl(206, 60%, 75%)
Color2	@xf-paletteColor2	hsl(204, 80%, 80%)	hsl(204, 60%, 60%)
Color3	@xf-paletteColor3	hsl(205, 80%, 60%)	hsl(205, 60%, 40%)
Color4	@xf-paletteColor4	hsl(205, 80%, 40%)	hsl(205, 60%, 20%)
Color5	@xf-paletteColor5	hsl(205, 80%, 30%)	hsl(205, 60%, 10%)
Accent1	@xf-paletteAccent1	hsl(35, 90%, 95%)	hsl(35, 85%, 80%)
Accent2	@xf-paletteAccent2	hsl(35, 90%, 50%)	hsl(35, 85%, 45%)
Accent3	@xf-paletteAccent3	hsl(35, 90%, 30%)	hsl(35, 85%, 15%)
Neutral1	@xf-paletteNeutral1	hsl(0, 0%, 100%)	hsl(0, 0%, 100%)
Neutral2	@xf-paletteNeutral2	hsl(0, 0%, 54%)	hsl(0, 0%, 54%)
Neutral3	@xf-paletteNeutral3	hsl(0, 0%, 8%)	hsl(0, 0%, 8%)

Màu sắc được sử dụng trong Style Properties: Basic Colors. Bạn có thể sử dụng ID trong các mẫu CSS XenForo.

Color	ID	Default	Alternate
Textcolor	@xf-textColor	@xf-paletteNeutral3	darken(@xf-paletteNeutral1, 12%)
Dimmedtextcolor	@xf-textColorDimmed	mix(@xf-textColor, @xf-textColorMuted)	darken(@xf-textColor, 25%)
Mutedtextcolor	@xf-textColorMuted	@xf-paletteNeutral2	darken(@xf-textColor, 35%)
Linkcolor	@xf-linkColor	@xf-paletteColor4	@xf-paletteColor2
Linkhovercolor	@xf-linkHoverColor	@xf-paletteColor5	@xf-paletteColor1
User-generatedcontentlinkcolor	@xf-linkUgcColor	@xf-paletteColor4	@xf-paletteColor2
User-generatedlinkhovercolor	@xf-linkUgcHoverColor	@xf-paletteColor5	@xf-paletteColor1
Contentbackgroundcolor	@xf-contentBg	@xf-paletteNeutral1	@xf-paletteNeutral3
Pagebackgroundcolor	@xf-pageBg	darken(@xf-contentBg, 8%)	darken(@xf-contentBg, 8%)
Alternatecontentbackgroundcolor	@xf-contentAltBg	darken(@xf-contentBg, 4%)	darken(@xf-contentBg, 4%)
Highlightedcontentbackgroundcolor	@xf-contentHighlightBg	@xf-paletteColor1	@xf-paletteColor5
Accentedcontentbackgroundcolor	@xf-contentAccentBg	@xf-paletteAccent1	@xf-paletteAccent3
Inlinemoderationhighlightcolor	@xf-inlineModHighlightColor	@xf-paletteAccent1	@xf-paletteAccent3
Featuretextcolor	@xf-textColorFeature	@xf-paletteColor3	@xf-paletteColor2
Emphasizedtextcolor	@xf-textColorEmphasized	@xf-paletteColor4	@xf-paletteColor1
Accentedcontenttextcolor	@xf-textColorAccentContent	@xf-paletteAccent3	@xf-paletteAccent1
Attention-grabbingtextcolor	@xf-textColorAttention	@xf-paletteAccent2	@xf-paletteAccent2
Bordercolor	@xf-borderColor	xf-intensify(@xf-contentBg, 16%)	xf-intensify(@xf-contentBg, 10%)
Faintbordercolor	@xf-borderColorFaint	xf-diminish(@xf-borderColor, 6%)	xf-diminish(@xf-borderColor, 6%)
Lightbordercolor	@xf-borderColorLight	xf-diminish(@xf-borderColor, 4%)	xf-diminish(@xf-borderColor, 4%)
Heavybordercolor	@xf-borderColorHeavy	xf-intensify(@xf-borderColor, 4%)	xf-intensify(@xf-borderColor, 4%)
Highlightbordercolor	@xf-borderColorHighlight	@xf-paletteColor2	@xf-paletteColor4
Featurebordercolor	@xf-borderColorFeature	@xf-paletteColor3	@xf-paletteColor3
Accentcontentbordercolor	@xf-borderColorAccentContent	mix(@xf-paletteAccent1, @xf-paletteAccent2)	mix(@xf-paletteAccent3, @xf-paletteAccent2)
Attention-grabbingbordercolor	@xf-borderColorAttention	@xf-paletteAccent2	@xf-paletteAccent2
Pagechromebackgroundcolor	@xf-chromeBg	@xf-paletteColor5	@xf-paletteColor5
Pagechrometextcolor	@xf-chromeTextColor	@xf-paletteColor2	@xf-paletteColor2
Pagesub-navigationbackground	@xf-subNavBg	@xf-contentAltBg	@xf-contentAltBg
Pagesub-navigationtextcolor	@xf-subNavTextColor	@xf-linkColor	@xf-linkColor
Majorheadingbackgroundcolor	@xf-majorHeadingBg	@xf-contentHighlightBg	@xf-contentHighlightBg
Majorheadingtextcolor	@xf-majorHeadingTextColor	@xf-textColorEmphasized	@xf-textColorEmphasized
Minorheadingtextcolor	@xf-minorHeadingTextColor	@xf-textColorFeature	@xf-paletteColor1
Blocktabheaderbackgroundcolor	@xf-blockTabHeaderBg	@xf-paletteColor4	@xf-paletteColor4
Blocktabheadertextcolor	@xf-blockTabHeaderTextColor	@xf-paletteColor2	@xf-paletteColor2
Blockfooterbackgroundcolor	@xf-blockFooterBg	@xf-contentAltBg	@xf-contentAltBg
Blockfootertextcolor	@xf-blockFooterTextColor	@xf-textColorDimmed	@xf-textColorDimmed
Defaultbuttontextcolor	@xf-buttonTextColor	@xf-paletteColor1	@xf-paletteColor1
Defaultbuttonbackgroundcolor	@xf-buttonBg	@xf-paletteColor4	@xf-paletteColor4
Primarybuttonbackgroundcolor	@xf-buttonPrimaryBg	@xf-paletteColor3	@xf-paletteColor3
Call-to-actionbuttonbackground	@xf-buttonCtaBg	@xf-paletteAccent2	darken(@xf-paletteAccent2, 10%)
Textinputboxtextcolor	@xf-inputTextColor	@xf-textColor	@xf-textColor
Textinputboxbackgroundcolor	@xf-inputBgColor	xf-intensify(@xf-contentBg, 2%)	xf-intensify(@xf-contentBg, 2%)
Focusedtextboxbackgroundcolor	@xf-inputFocusBgColor	@xf-contentBg	@xf-contentBg
Selecteditemcolor	@xf-selectedItemColor	@xf-paletteAccent3	@xf-paletteAccent1
Selecteditembackgroundcolor	@xf-selectedItemBgColor	@xf-paletteAccent1	@xf-paletteAccent3
Selecteditembordercolor	@xf-selectedItemBorderColor	@xf-paletteAccent2	@xf-paletteAccent2
Successmessagebackground	@xf-successBg	hsl(116, 90%, 95%)	hsl(122, 70%, 20%)
Successmessagetextcolor	@xf-successColor	hsl(122, 90%, 30%)	hsl(116, 70%, 85%)
Successmessagefeaturecolor	@xf-successFeatureColor	hsl(122, 90%, 60%)	hsl(122, 70%, 50%)
Warningmessagebackground	@xf-warningBg	hsl(34, 90%, 95%)	hsl(34, 70%, 20%)
Warningmessagetextcolor	@xf-warningColor	hsl(34, 90%, 30%)	hsl(50, 70%, 85%)
Warningmessagefeaturecolor	@xf-warningFeatureColor	hsl(34, 90%, 60%)	hsl(34, 70%, 50%)
Errormessagebackground	@xf-errorBg	hsl(358, 90%, 95%)	hsl(358, 70%, 20%)
Errormessagetextcolor	@xf-errorColor	hsl(358, 90%, 30%)	hsl(358, 70%, 85%)
Errormessagefeaturecolor	@xf-errorFeatureColor	hsl(358, 90%, 60%)	hsl(358, 70%, 50%)
Positivevotecolor	@xf-votePositiveColor	hsl(122, 70%, 60%)	hsl(122, 50%, 50%)
Negativevotecolor	@xf-voteNegativeColor	hsl(358, 70%, 60%)	hsl(358, 50%, 50%)