Customizing Themes
As you know, Themes are preconfigured colour schemes for content – e.g. dark theme, light theme, dark transparent, etc. – meant to make it easy for the editor to keep content to a consistent theme. Themes are infinitely nestable, meaning that everything inside e.g. a row or a paragraph will have the theme set on the parent, unless a more specific theme is set.
By default, Themes in Swift are applied via CSS on four main levels – website, page, row & paragraph/column – but you can easily customize Swift to e.g. set themes on elements within a paragraph/column. The recommended way of accomplishing this is to use custom css to extend specific themes – this is the recommendation because it means you don’t have to add settings to paragraphs (increased complexity for editors) or themes (increased complexity when upgrading).
To exemplify, here’s how you add lined headings to the default theme light theme (Figure 1.1).
- First read & follow the procedure for including custom CSS in Swift
- Open your custom.css file and add the CSS which modifies the theme you want to change:
Keep in mind that order to make themes selectable by editors they must be added via the Themes tool. Let’s try another example (Figure 1.3).
To make this happen:
- Go to Content > Swift Tools > Design > Themes and create a theme with the name theme-multi
- Apply the theme-multi theme to a Feature column – set Styling > Space around to Medium on the paragraph
- Open custom.css and add the following css: