You have a lot of control of your theme's fonts and colors by using global theme variables.
We strongly recommend that you start your theming with editing variables to rough in the basic look and feel of your site. For some, this will be enough to get a beautify, on brand theme. For others, having the right fonts and colors offers a great starting point for more complex designs.
Customizing Global Styles
In the theme editor there is a WYSIWYG editor for these variables. For file based themes you can set the values of the variables in your variables.json
asset.
Basic Customizations
global.mainColors.bg
: The background color of your site.global.mainColors.fg
: The foreground (text) color of your site.global.mainColors.primary
: The primary (brand) color of your site. This is the default color for elements like the title bar and links.global.links.default
: Your link color.
You can get your theme up and running pretty well with just the basic customizations because many of the other styles are calculated from them. If you want to do further customizations then read on.
Advanced Customizations
global.body.backgroundImage
: Give the URL of a background image for the main content of the site.global.fonts.families.body
: Change the font family of the site. Note that if you are using a custom font then you will have to load it yourself.global.meta.text.color
: Meta text is small text that gives additional information such as dates. It should be a subtle color. It defaults to 85% of the global foreground color.global.links.state
: Your link hover/active color if you want a specific color for these states.