Colors scheme

Navigate to customizer

Customizing >> Colors

Reign has a couple of inbuilt five-color schemes.

You can toggle to anyone to get a preview inside the customizer. It will help to start with any color combination and use color options below them to set up the color elements of each object.

Color Option: We have the following Color options for each section.

Topbar

  1. TopBar Background Color Allows you to choose a background color for the top bar.
  2. TopBar Text Color Allows you to choose a text color for content written inside the top bar.
  3. TopBar Text Allows you to choose a hover color for links used inside the top bar.

Header

  1. Header Background Color Allows you can choose a background color for your header.
  2. Site Title Font Color Allows you to choose a site title color for your site.
  3. Header Icon Color Allows you to choose icon color.
  4. Header Icon Hover Color Allows you to choose an icon hover color.

Menus 

  1. Main Menu Item font color Allows you to choose a menu text color. (This setting will work for the Main Menu Hover Style one, two, and, three)
  2. Main Menu Item font Color [Hover] Allows you to choose a text hover color. (This setting will work for the Main Menu Hover Style layouts one, two, and three)
  3. Main Menu Text Color[Active] Allows you to choose an active text color. (This setting will work for the main Menu Hover Style one, two, and three)
  4. Main Menu Background Color[Hover] Allows you to choose a background hover color. (This setting will work as a border color  for the Main Menu Hover Style one, two, and three and as a background color for the hover styles four, five, and six)
  5. Main Menu Background Color [Active] Allows you to choose an active background color. (This setting will work as a border color  for the Main Menu Hover Style one, two, and three and as a background color for the hover styles four, five, and six)
  6. Sub Menu Background Color Allows you to choose a background color for the sub-menu.
  7. Sub Menu Text Color Allows you to choose a menu text color.
  8. Sub Menu Text Hover Color Allows you to choose a text hover color.
  9. Sub Menu Background Hover Color Allows you to choose a background hover color.

Reign Color Scheme

Top Bar & Header color scheme options

Body

  1. BodyBody Background Color Allows you to choose a body text color for the site.
  2. Body Text Color Allows you to choose a body text color for the site.
  3. Sections Background Color Allows you to choose a section background color for the site.
  4. Theme Color Allows you to choose a primary color or active color for the site.

Content

  1. Headings color Allows you to choose the color of a heading for the site.
  2. Link Color Allows you to choose a link color for the site.
  3. Link Hover Color Allows you to choose a link hover color for the site.
  4. Content Link Color Allows you to choose the link color of the content area for your site.
  5. Content Link Hover Color Allows you to choose links to the hover color of the content area for your site.
  6. Button Text Color Allows you to choose a button text color for the site.
  7. Button Text Hover Color Allows you to choose a button text hover color for the site.
  8. Button Background Color Allows you to choose a button background color for your site.
  9. Button Background Hover Color Allows you to choose a button background hover color for your site.
  10. Border Color Allows you to choose the site border color.
  11. HR Color Allows you to choose an hr color for the site.

Reign Color Scheme

Heading, Link Content, Button color scheme options

Left Panel

  1. Left Panel Background Color allows managing the background color of the left panel.
  2. Left Panel toggle Color allows managing the color of the left panel toggle.
  3. Left Panel Font Color allows managing the color of the left panel menu item.
  4. Left Panel Font Color[Hover] allows managing the color of the left panel menu item hover.
  5. Left Panel Font Color[Active] allows managing the color of the left panel menu item active.
  6. Left Panel Background Color[Hover] allows managing the background color of the left panel menu item hover.
  7. Left Panel Background Color[Active] allows managing the background color of the left panel menu item active.

Footer

  1. Footer Background Color Allows you can choose the footer background color.
  2. Footer Widget Title Color Allows you can choose the footer widget title color.
  3. Footer Text Color Allows you can choose footer text color.
  4. Footer Link Hover Color Allows you can choose footer links to hover color.
  5. Copyright Background Color Allows you can choose the copyright background color.
  6. Copyright Text Color Allows you can choose copyright text color.
  7. Copyright Link Color Allows you can choose copyright link color.
  8. Copyright Link Hover Color Allows you can choose copyright links to hover color.

Reign Color Scheme

Footer Link, Content, Background, Widget Title Copyright section color scheme options

Forms

  1. Form Text Color Allows you to choose the form’s text color.
  2. Form Background ColorAllows you to choose the form’s background color.
  3. Form Border Color Allows you to choose the form’s border color.
  4. Form Placeholder ColorAllows you to choose the form’s placeholder color.
  5. Form Focus Text Color Allows you to choose the form’s focus text color.
  6. Form Focus Background Color Allows you to choose the form’s focus background color.
  7. Form Focus Border Color Allows you to choose the form’s focus border color.
  8. Form Focus Placeholder Color Allows you to choose the form’s focus placeholder color.

Form Feild Colors

Form Feilds Focus Color

Dark Mode

Update on September 26, 2023