@webiny/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/theme

Or if you prefer yarn:

yarn add @webiny/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

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

Creates a new theme object.

import { createTheme } from "@webiny/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: { ... }
    }
});