لوحة ألوان xenForo والألوان الأساسية: مخطط بالمعرفات
الألوان المستخدمة في خصائص النمط لوحة الألوان.
كما يمكنك استخدام المعرفات في قوالب XenForo CSS.
xenForo color palette and primary colors: chart with IDs
Colors used in Style Properties: Basic Colors. You can use IDs in XenForo CSS templates.
حظ موفق للجميع
كما يمكنك استخدام المعرفات في قوالب XenForo CSS.
xenForo color palette and primary colors: chart with IDs
| 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%) |
Colors used in Style Properties: Basic Colors. You can use IDs in XenForo CSS templates.
| 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 |
| Select edit color | @xf-selectedItemColor | @xf-paletteAccent3 | @xf-paletteAccent1 |
| Selecteditbackgroundcolor | @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%) |
حظ موفق للجميع
