Skip to main content

Introduction

What You’ll Learn
  • what is a theme
  • how a theme is used in Webiny applications
  • how to register a theme

Overview#

Styling is one of the more important tasks you might want to do on a website. The theme passes on the visual identity of your brand and ensures a uniform presentation across all the channels.

Webiny applications, like Page Builder and Form Builder, support themes and layouts to control the visual presentation of your content. These are implemented as plugins in the theme package.

There are a few main things you need to understand about Webiny themes. This article covers these basics concepts.

There isn't a Single Theme#

Webiny doesn't have a concept of a "global" theme that is shared across all applications. Each application, or in some cases even plugins, can register their own theme.

With this approach each time you install a new app or a plugin, it automatically comes with all the visuals and layouts you need to start using it immediately.

Webiny is a serverless application framework upon which powerful serverless applications can be built. Those applications might have complex theme requirements. And, managing CSS styles for those applications within a single theme file doesn't work well most of the time. However, this one-theme-per-app concept removes that complexity since every app automatically ships with its own theme package.

As a benefit, each time you update Webiny, or one of its applications or, plugins, you are sure that your website works fine after the update. Because each app update automatically updates the theme just for that app you don't need to worry that there are incompatibilities between applications on the theme side which cause the website to break.

Registering a Theme#

Each theme in Webiny is also a plugin in itself. This means you register it as any other plugin in your applications.

The file located at apps/admin/code/src/plugins/index.ts contains all the plugins needed for the Admin Area project application.

Here we import the theme styles from the theme package as shown below:

// Some code is removed for the sake of brevity.
import theme from "theme";
plugins.register = [
/**
* App theme controls page builder and form builder layouts, styles, etc.
*/
theme()
//..
];
//..

That's all it takes to register a theme. The same principle applies if you want to register your own theme.

Creating and registering a new theme is just a question of creating a new package and replacing the existing theme plugin with your own. We'll cover in greater detail how this plugin should look like and what it should contain.

Last updated on by Adrian Smijulj