Introduction

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 apps/theme folder and in it the apps/theme/index.ts file, we’d see the following:

Respectively, via the ThemePlugin, PbPageLayoutPlugin, and FbFormLayoutPlugin 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

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.