The Styles sections of our Theme Editor is further broken down into subsections, which can be accessed by clicking around your theme preview, or by using the navigation menu:
For details on the other options, see the appropriate focused article
This article focuses on Global Styles.
Light vs Dark: in a single click you can choose to have a light or dark theme:
The Brand color settings affect various settings within the application to make theming as quick and easy as possible during setup.
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 docs for additional settings.
In this example, I’ve set (only) the Brand Color to French Rose:
It will also affect several hover states:
This controls most text in the application, 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 Border Radius controls how rounded the corners on the buttons are:
Primary Buttons vs Secondary Options
There are several primary and secondary buttons in Vanilla, here are some examples where the primary button is set to Rose Pink and the Secondary Button is white:
You can choose to have a Solid or Outlined button:
Primary Button as Solid
Primary Button as Outline
Control the background color of the button
Control the text color of the button