Theemo is designed to work in an isolated package containing only theme related assets. That is you can exchange the theme package and the rest of your application stays intact.
In your theme package, install theemo:
yarn add -D theemo
The name of your package is taken as theme name. If this is different, then add
this to your
There are two things to configure:
- Your Token Translation Tool (if you haven't already - refer to respective docs)
Theemo is configured in
theemo.js. Theemo can help you sync tokens from your
design tool into the format of your token translation tool. After running the
build of that, will post-process that output and generate a theemo theme
file ready to be consumed by your framework of choice. Each step has its own
configuration part and is explained in detail on each section. Please refer to:
Theemo CLI contains commands for each of the named tasks above. Imagine your
project uses all steps, it's enough to have one command for each step in
your theme package. Here is a good practice (a
"sync": "yarn theemo sync",
"build": "yarn style-dictionary build",
"generate": "yarn theemo generate",
"magic": "yarn sync && yarn build && yarn generate"
You now have the flexibility to run each command on its own, e.g.
yarn sync to
solely run the synchronization step. The best thing is to run one command.
Inside your project run this:
and magically everything comes together. Theemo will update your
package.json and adjust values:
"colorSchemes": ["light", "dark"],
And you should find a
dist/ocean.css file ready to be consumed.
Your theme is ready to go. Add the theme package as a dependency to your app and start. Things you want to do then:
- Integrate the output of your build into the workflow of your app (CSS Modules, Sass, Android or iOS).
- If you run the theemo generator, load up your CSS file and use it with vanilla css/html mechanics.
- Develop tooling for your framework/library of choice. Parse the
package.jsonto get the information of your theme name, which file and what contexts are.