Header Styles

Customize the background and link colors for the header of your community site. You can set separate colors for light mode and dark mode.

---

Setting Light Mode Colors

1. Go to Settings → Branding → Community Site
2. Scroll to the Header Styles card
3. Enter a Background Color — this sets the header background in light mode
4. Enter a Links & Text Color — this sets the color of navigation links (e.g., Login) in light mode
5. Click Update Header Styles

Colors can be entered as hex values (e.g. #1c1917), RGB (e.g. rgb(28, 25, 23)), or any valid CSS color name.

---

Setting Dark Mode Colors

1. Go to Settings → Branding → Community Site
2. Scroll to the Header Styles — Dark Mode card
3. Enter a Background Color for dark mode
4. Enter a Links & Text Color for dark mode
5. Click Update Dark Mode Styles

If dark mode colors are not set, the light mode colors are used for both themes.

---

Clearing Header Colors

To remove a custom color and restore the default header appearance, clear the color field and save. Leave both fields blank to use the default theme colors.

---

Tips

• Contrast matters — make sure your link/text color has enough contrast against the background color for readability.
• Test both modes — toggle dark mode in your browser or device settings to preview how the dark mode colors look.
• The header background color extends edge-to-edge across the full width of the page.