What You’ll Learn
  • what are the different parts that make up a theme
  • what plugins are used upon creating themes

Overview
anchor

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/themeexternal link folder and in it the extensions/theme/src/index.tsexternal link file, we’d see the following:

extensions/theme/src/index.ts

Respectively, via the ThemePluginexternal link, PbPageLayoutPluginexternal link, and FbFormLayoutPluginexternal link plugins, the file achieves the following:

  1. registers the central theme object
  2. registers the Static page layout, to be used with pages created with the Page Builder application
  3. 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
anchor

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 Emotionexternal link - 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.