Page Builder > Theming
Introduction
An overview of how theming works in Webiny's Page Builder application.
- what are the different parts that make up a theme
- what plugins are used upon creating themes
Overview
By default, every Webiny project includes the default website theme which defines different visual aspects of your website, for example the default set of colors, typography, the default page layout, and more.
In a new Webiny project, if we were to open the extensions/theme
folder and in it the extensions/theme/src/index.ts file, we’d see the following:
Respectively, via the ThemePlugin, PbPageLayoutPlugin, and FbFormLayoutPlugin plugins, the file achieves the following:
- registers the central theme object
- registers the Static page layout, to be used with pages created with the Page Builder application
- registers the Default form layout layout, to be used with forms created with the Form Builder application
In the following sections, we cover the essential information and best practices related to the theme object and page layouts.
How Styling Works
Before we dive into the theme object and page layouts, it’s useful to know how styling works inside Webiny.
For styling, Webiny relies on Emotion - a library that provides a set of tools for writing CSS styles with JavaScript. Emotion is a CSS-in-JS library, which means that it allows writing CSS styles directly inside JavaScript code.
As we’ll be able to see in the following sections, Emotion is used when defining the theme object and styling page layouts. It is also used upon creating and styling custom page elements.
More information on all of this will be outlined in the next couple of sections.