Learn
Creating Themes with System States
Toolabs DSM lets you create themeable and adaptive design systems beyond light/dark mode or color only themes.
With states, you can generate n-ary cartesian product of multi-dimensional state declarations and obtain a scalable design system:
Initially, you start with a default state . Every token you create has its base value in this state.
Later, if you want all or some of your design tokens to have a different value under some condition, then you just need to:
- Create a new system state representing this condition
- Switch DSM to this new state. (Before you make any change, all tokens inherit their values from the parent state , which is the default state in this example)
- Change the value of tokens which will have a different value in active state than its base/inherited value
➥ When working with themeable tokens, it is useful to be aware of whether you are not in the default state or not. Because, the changes you will make to tokens will be visible only for the active state and states inheriting active state. See below how the blue and orange indicators work.
Here are some good articles on themeable design :