Colors Guide
Use this to build a consistent palette fast. Keep your existing xprofile field coverage, but apply colors in a safer order.
Fast path: Block -> Sidebar -> Textarea bg/text -> Sidebar hover colors -> check readability.
What Colors Controls
Colors handles core surfaces and form readability. Links, buttons, nav, widgets, and activity colors live in their own sections.
Colors section controls in your settings screen.
Looks-Good-Fast Method
- Set Profile Block Background Color for your main card surface.
- Set Profile Sidebar Color in same family, slightly darker/lighter.
- Set Textarea Background + Text Color together for contrast.
- Set Sidebar Hover + Secondary Hover so interaction is visible.
- Wait for Saved! before moving into Links/Buttons/Nav sections.
Field-by-Field (Keep As-Is)
- Profile Block Background Color: base card/surface color.
- Textarea Background Color: text input background.
- Textarea Text Color: text input readability color.
- Profile Sidebar Color: sidebar/menu base color.
- Profile Sidebar Hover Color: primary hover state.
- Profile Sidebar Hover Secondary Color: secondary hover layer/depth.
Common mistake: setting hover colors too close to base sidebar color, making hover feel broken.
Color Control Map
Core Surfaces
- Colors section: block/sidebar/textarea and sidebar hover states.
Main Text
- Typography section: primary text/readability colors.
Links Accent
- Links section: link + link-hover color behavior.
Buttons Accent
- Buttons section: button surface/text and hover variants.
Navigation States
- Navigation section: active + hover tab/menu visuals.
Cards/Feed Layers
- Widgets + Activity sections for deeper component-specific coloring.
Palette Templates
Cyber Glass Starter
Block
#0b1220Sidebar
#08101cText
#e8f0ffAccent
#22d3eeNeon Night Starter
Block
#120a1aSidebar
#0c0612Text
#f7e9ffAccent
#ff4fd8Forest Starter
Block
#0f1a14Sidebar
#0b120eText
#eaf4eeAccent
#d6b25eSoft Pastel Starter
Block
#f6f3ffSidebar
#efeaffText
#23212bAccent
#7c5cffCommon Mistakes and Fixes
- Text vanishes: increase contrast between surface and text (Typography handles main text).
- Inputs hard to read: always set Textarea Background + Text together.
- Palette chaos: reduce to one main color and one accent.
- Hover looks broken: make hover color visibly different from base.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
