Introduction

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.

Figma

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: https://api.jsonbin.io/b/5dd6a3603da40e6f298d5b1e which contains all the correct theme values. When switching between themes make sure the "Gastro 360 Dark Theme" Library is enabled.

Sketch

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.