Your whole site takes its accent color from one setting. Pick a primary color, choose how light or dark it looks in each mode, and the buttons, links and highlights follow.
XFORG builds a palette of ten shades from the primary color you choose. The shades are numbered 0 to 9: shade 5 is exactly the color you picked, 0 to 4 are lighter versions and 6 to 9 are darker ones.
Buttons, links, badges and anything else set to use the theme color draw from this palette. Which shade they use depends on whether the visitor is in light or dark mode, and you choose that shade for each mode.
1
Open the theme settings
In your admin panel, go to System Configuration and choose Theme.
2
Pick a Primary color
In the Theme card, choose a color with the picker or type its hex code.
3
Choose the Light mode shade
A number from 0 to 9. The screen recommends 6 to 9, which keeps the color strong on a white background. Use 5 if you want exactly the color you picked.
4
Choose the Dark mode shade
Also 0 to 9. The recommendation is 1 to 4, so the color stays readable on a dark background.
5
Click Update settings
All three fields are required. Your site uses the new colors as soon as the save succeeds.
The same screen holds your logos and default metadata. Saving it saves every card at once.
Your site follows each visitor's device setting and shows light or dark mode to match. If you want visitors to choose for themselves, add the Theme switch element to your menu or footer.
Text set to the auto or dimmed color adapts to both modes on its own. A fixed custom color does not, so dark text you chose for a light section may disappear in dark mode.
After changing colors, check a few pages in both modes. It takes a minute and catches most contrast problems.
For changes the theme settings do not cover, go to Pages and Menus and open Custom CSS. The CSS you save there is added to every page of your site. Click Submit new code to save it.
Every element in the page builder also has a CSS section, with a CSS class, an HTML ID and a Custom CSS field that applies only to that element.
Site-wide CSS reaches every page at once. Test a new rule on a single element first, and keep a copy of the CSS before you replace it.
