Out of the box, the design system delivers support for both light and dark themes. The themes are based on the variables defined for each colour. The colours are not named after the colour name, but rather where and what the colour is used for.

Switching between Themes in Design Tools

For Figma and Sketch there are plugins which allow a user to switch between different colour swatches or layer styles.


If you use the design System with Figma there is the plugin called Themer. When setting up this plugin you can use this json file: which contains all the correct theme values. When switching between themes make sure the "Gastro 360 Dark Theme" Library is enabled.


All theme colors and text styles are separated into two different Sketch Libraries, this way a plugin called Camilo can be used to easily switch between the layer and text styles in both Libraries.