What You’ll Learn
- what is a theme
- how a theme is used in Webiny applications
- how to register a theme
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
There are a few main things you need to understand about Webiny themes. This article covers these basics concepts.
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.
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
contains all the plugins needed for the Admin Area project application.
Here we import the theme styles from the
theme package as shown below:
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.