themeizer
v1.1.2
Published
Package for embedding themes from "Themeizer" Figma plugin at the server level or at build stage
Downloads
131
Maintainers
vordgiReadme
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.