Every colour setting
Every colour setting
Section titled “Every colour setting”Customize > Color Options > Individual Colors Customize > Color Options > Dark Mode Colors
Individual Colors let you change the colour of one element, such as the header background or the footer link colour. Whatever you set there beats the colour that comes from your chosen palette, but only for that one element. Dark Mode Colors do the same thing, but only while your site is in dark mode.
You only see the controls for the palette you are using right now. Reign keeps a separate set of choices for each palette, so switching palettes never wipes your work. If a palette you just picked shows no controls, publish and reload the Customizer. To pick a palette first, see Color palette. To understand which setting wins when two disagree, see how the color system works.
Every colour picker has a small reset arrow that puts the palette colour back. Most pickers also let you set transparency. The labels below match what you see in the Customizer.
Top bar
Section titled “Top bar”- Top Bar Background Color
- Top Bar Text Color
- Top Bar Text Color [Hover]
Header
Section titled “Header”- Header Background Color
- Header Layout 4 Navigation Background Color (Individual Colors only, and only while the header layout is set to layout 4)
- Site Title Font Color
- Header Icon Color
- Header Icon Color [Hover]
Main menu
Section titled “Main menu”- Main Menu Item Font Color
- Main Menu Item Font Color [Hover]
- Main Menu Item Font Color [Active]
- Main Menu Item Border OR Background Color [Hover]
- Main Menu Item Border OR Background Color [Active]
In Dark Mode Colors the last two read “Main Menu Border OR Background Color [Hover]” and “Main Menu Border OR Background Color [Active]” (no word “Item”).
Sub menu
Section titled “Sub menu”- Sub Menu Item Background Color
- Sub Menu Item Font Color
- Sub Menu Item Font Color [Hover]
- Sub Menu Item Background Color [Hover]
Mobile menu
Section titled “Mobile menu”- Mobile Panel Background Color
- Mobile Menu Color
- Mobile Menu Color [Hover]
- Mobile Menu Color [Active]
- Mobile Menu Background Color [Active]
Left panel
Section titled “Left panel”- Left Panel Background Color
- Left Panel Toggle Color
- Left Panel Menu Color
- Left Panel Background Color [Active]
- Left Panel Menu Color [Active]
- Left Panel Background Color [Hover]
- Left Panel Font Color [Hover]
- Left Panel Tooltip Background Color
- Left Panel Tooltip Color
Body and content
Section titled “Body and content”- Body Background Color
- Body Text Color
- Alternate Text Color (meta details and supporting text)
- Sections Background Color
- Secondary Background Color
- Theme Color (your main and active colour)
- Headings Color
- Link Color
- Link Color [Hover]
- Content Link Color
- Content Link Color [Hover]
- Border Color
- HR Color
Buttons
Section titled “Buttons”- Button Text Color
- Button Text Color [Hover]
- Button Background Color
- Button Background Color [Hover]
Footer
Section titled “Footer”- Footer Background Color
- Footer Widget Title Color
- Footer Text Color
- Footer Link Color
- Footer Link Color [Hover]
Copyright bar
Section titled “Copyright bar”- Copyright Background Color
- Copyright Text Color
- Copyright Link Color
- Copyright Link Color [Hover]
In light mode, form colours are not in Individual Colors. They live under Customize > Forms in Form Field Colors and Focus State Colors. See Forms.
In dark mode they are in Dark Mode Colors, under these labels:
- Form Text Color
- Form Background Color
- Form Border Color
- Form Placeholder Color
- Form Text Color [Focus]
- Form Background Color [Focus]
- Form Border Color [Focus]
- Form Placeholder Color [Focus]
One extra control
Section titled “One extra control”If the Youzify plugin is active, Individual Colors also shows Override Youzify Default Appearance Mode? with Yes and No choices. It is set to Yes by default.