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.
Select Light or Dark from the Preset dropdown to automatically update the Background and Text fields, as you can see in the examples below.
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.
✔️ 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.
The options in the Body section control most text in your community, including discussion threads.
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.
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.
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).
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.
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:
Buttons & Inputs
The options in the Buttons & Inputs section control all aspects of your community's primary and secondary buttons.
Border Radius controls how rounded button corners are.
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).
Sets the button's background color.
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.