Package Exports

themeizer
themeizer/dist/server/Wrapper
themeizer/dist/server/Wrapper.js
themeizer/dist/webpack/loader.js
themeizer/dist/webpack/plugin
themeizer/dist/webpack/plugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (themeizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Themeizer

Plugin for embedding themes from "Themeizer" Figma plugin at the server level or at build stage.

Features

Embedding styles at build time
Manual embedding on the server
Caching and loading every n seconds (revalidate)

Installation

Using npm:

$ npm install themeizer

Using yarn:

$ yarn add themeizer

Configuration

Option	Required	Type	Description
url	true	string	api url to load and read colors
headers	false	JSON	an object of headers required for reading from api
revalidate	false	number	period in which to fetch styles (in minutes)

Add configuration to environment variables. For example, via .env files:

// .env.local
THEMEIZER_OPTIONS={"url":"https://example.com/api/themes","revalidate":0.1,"headers":{"token":"example-token"}}

Usage

Build-time embedding:

Add the meta tag with the data-attribute data-type="themeizer" where you want.

<head>
    ...
    <meta data-type="themeizer" />
    ...
</head>
...

The meta tag will be replaced with style classes, in the format:

.theme-light {
    --primary: #1565C0;
}

.theme-dark {
    --primary: #90CAF9;
}

Server-level style classes inlining

Get the styles object on the server

const { cssVariablesLibs } = await Themeizer.init();

Build theme classes from this object

{Object.entries(colors).map(([themeName, vars]) => (
    <style>
        {`
        .theme-${themeName} {
            ${vars.join('\n')}
        }
        `}
    </style>
))}

License

MIT