@webiny/app-theme

A small package that provides theme-related utilities for Webiny's Page Builder application.

Table of Contents

• Installation
• Overview
• Examples
• Reference
  • Functions
    • createTheme

Installation

npm install --save @webiny/app-theme

Or if you prefer yarn:

yarn add @webiny/app-theme

ℹ️ NOTE

In most cases, manual installation is not needed as the package is already included in every Webiny project.

Overview

A small package that provides theme-related utilities for Webiny's Page Builder application. More specifically, it provides the createTheme factory function, which is used to construct a theme object. The theme object is used to style the website created with the Page Builder application.

Additionally, the package also provides TypeScript types.

Examples

Example	Description
Creating the Theme Object	An example of creating a theme object.

Reference

Functions

createTheme

Type Declaration

export declare const createTheme: (theme: Theme) => Theme;

Creates a new theme object.

import { createTheme } from "@webiny/app-theme";

const theme = createTheme({
    breakpoints: {
        desktop: "@media (max-width: 4000px)",
        tablet: "@media (max-width: 991px)",
        "mobile-landscape": "@media (max-width: 767px)",
        "mobile-portrait": "@media (max-width: 478px)" 
    },
    styles: {
        colors: { ... },
        typography: { ... },
        elements: { ... }
    }
});