Themeizer
Package 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 themeizerUsing yarn:
$ yarn add themeizerConfiguration
| 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
.envfiles:
// .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
- Using default method to get css
Get css object on server side
const { css } = await Themeizer.init();Add css code with theme classes to your code
<style>
{css}
</style>- Using custom injection
Get the styles object on the server side
const { cssVariablesLibs } = await Themeizer.init();Build theme classes from this object
{Object.entries(colors).map(([themeName, themeObj]) => (
<style>
{`
.theme-${themeName} {
${themeObj.list.join('\n')}
${themeObj.type === 'dark' ? 'color-scheme: dark;' : ''}
}
`}
</style>
))}Themeizer ecosystem
- Figma plugin "Themeizer" - plugin for changing themes in design and publishing them in the cloud;
- themeizer - package for embedding themes from "Themeizer" Figma plugin at the server level or at build stage;
- next-themeizer - package for adding "Themeizer" ecosystem interaction configuration to your next.js application;
- themeizer-cli - a package to automatically replace published colors (as well as linear and radial gradients) in style files with a css variable;
- stylelint-themeizer - stylelint plugin for "Themeizer" ecosystem.