The Styles sections of the Theme Editor is further broken down into subsections, which can be accessed by clicking elements in the theme preview (the area to the left) or by using the navigation menu (highlighted below).
For details on the other options, check out the articles below:
This article focuses on Global Styles.
Preset
Select Light or Dark from the Preset dropdown to automatically update the Background and Text fields, as you can see in the examples below.
Light
Dark
✔️ TIP: While working in the Header, Footer, CSS, JavaScript, and Advanced Settings editor, you can click the icon highlighted below to switch between a light/dark theme. These particular presets don't affect your actual theme, like the one discussed above; they are provided simply to make working in these editors easier.
Brand Color
The Brand Color option affects various styles within the application to make theming as quick and easy as possible. As you can see in the examples below, the Brand Color can affect styles like the main background, text color, and link color.
Example 1
Example 2
✔️ TIP: If there are any elements that inherit the brand color that you want to set individually, check the appropriate article aimed at that element, as well as the theme variables articles for additional settings.
Body
The options in the Body section control most text in your community, including discussion threads.
Background
You can set the main background color for the community. This is typically white in lighter themes, black in dark themes.
If you have a technical resource, you can use Theme Variables to adjust this more granularly, and to set an image as the background.
Text
This controls the default colour of the text in most elements, including user discussions. This is typically black in lighter themes, white in dark themes. Certain text elements can be modified on a more granular basis. For more information, check out the article on the particular feature you are trying to change.
Links
Choose what color links should have by default.
If you have a technical resource, you can use Theme Variables to adjust this more granularly and to set individual states (such as active, focus and visited).
Link Decoration
If you set link decoration to Auto, underlining will only appear when the user hovers over the link. If you set it to Always, the underlining will always appear.
Font
Choose from a number of font options.
If you have a technical resource, you can use Theme Variables to adjust this more granularly and to update font size and weight.
For more granular information on updating your font see:
https://success.vanillaforums.com/kb/articles/285-setting-your-font-in-the-theme-editor
Buttons & Inputs
The options in the Buttons & Inputs section control all aspects of your community's primary and secondary buttons.
Border Radius
Border Radius controls how rounded button corners are.
Button Type
For both your primary and secondary buttons, you can choose to have a solid or outlined button.
Referencing the image above, the primary button is set to Solid, while the secondary button is set to Outline. This is generally recommended, to help give your primary buttons a more prominent appearance (hence their name).
Background
Sets the button's background color.
Text
Sets the button's text color. For ease of reading and accessibility, you'll want to choose an easy-to-read text color dependent on your button background color.
Again referencing the image above, you'll notice the blue primary button has white text, while the white secondary button has black text; both of these are great choices for accessibility.
