Styles
Fonts, colors, light and dark mode, shadows, corners, spacing, motion and custom CSS.
Articles
- Change your colorsThe built-in color schemes, the colors each one sets, and how to change a single color in Styles, Colors.
- Change your fontsFont pairs, the Headings, Body and Monospace fonts, and the Google Fonts list in Styles, Typography.
- Choose light, dark or automatic color modeThe color mode your site opens in, the toggle that lets visitors switch, and a second logo for dark backgrounds.
- Create your own color schemeA named scheme of your own, with a light and a dark version of every color, that sections and blocks can pick like a built-in one.
- Add custom CSSWhere to put your own CSS in a Fantasma theme, how block CSS and CSS classes work, and every CSS variable the theme sets.
- How styles workThe design settings your whole theme shares, the named presets blocks pick from, and the Style book that shows them all on one sheet.
- Motion and page transitionsThe page transition, the Quick, Default and Slow durations, and the Subtle, Balanced and Expressive easings on the Motion screen of Styles.
- Shadows and cornersThe named shadows and corner sizes blocks pick from, with their default values and every setting.
- Text styles and font sizesHow body text, headings H1 to H6, links, captions, quotes and code look across your theme, and the named font sizes they use.
- Upload your own fontAdd a font family from your own files, with the formats, sizes and limits Fantasma accepts.
- Page widths and spacingThe four content widths, the space between sections, and the named spacing sizes on the Layout screen of Styles.
Styles, the paintbrush icon in the icon rail, hold the design your whole theme shares: fonts and text sizes, color schemes and the light or dark mode, shadows, corners, page widths, spacing and motion. Blocks pick from these presets, so one change in Styles reaches every page.
Start with how styles work, then set your fonts and colors.
Where to start
How styles work
The design settings your whole theme shares, the named presets blocks pick from, and the Style book that shows them all on one sheet.
Change your fonts
Font pairs, the Headings, Body and Monospace fonts, and the Google Fonts list in Styles, Typography.
Change your colors
The built-in color schemes, the colors each one sets, and how to change a single color in Styles, Colors.
Light and dark mode
The color mode your site opens in, the toggle that lets visitors switch, and a second logo for dark backgrounds.
Text styles and font sizes
How body text, headings H1 to H6, links, captions, quotes and code look across your theme, and the named font sizes they use.
Add custom CSS
Where to put your own CSS in a Fantasma theme, how block CSS and CSS classes work, and every CSS variable the theme sets.