Design System Tab and Theme Import

How to sync, import and export your theme files

Design System Tab

When you press the "Design Sytem" tab it will take you to the Design System tab for the App you're working on. When you start with Quest, by default, we seed the Quest Design Kit as the design system for your App. The Quest Design Kit is based on MUI so if you've picked a Chakra App, the seeded design system will be based on the Chakra Design Kit.

From here, you can view information about the theme files for the design system. In the top-left you can rename the Design System / Theme files to match what you'd prefer. On the top-right side you'll see which Component library the theme files are from, either MUI or Chakra UI as well as the NPM Version it is coming from.

Below that, you'll see information about the actual theme files used in your Application. First you'll see the name of the themes. The theme source can be either "Seeded", "Synced" or "Imported" to tell you where the theme comes from. Syncing a design system is done by modifying a Figma design kit. Importing a theme is done through the "Import" button on the right side. You can additionally "Download" the theme files to view them locally. If there are any errors with imported theme files, you may see an error alert to warn you of issues.

If you're using Quest Design Kit or MUI 5.9 Kit, you'll see 2 theme files. If you're using Chakra UI or MUI 5.11, you'll only see the one theme file as those kits are not set up by default to support dark and light mode.

If there are any issues and your components are not working properly, you can always "Restore" back to the last synced or possibly the seeded theme. This ensures you will never break your App and can always rollback to a working version. If "Restore" is disabled, your most recent Theme file is from your design system sync. You can make the necessary changes in your Design System and sync it or you can download the Theme file from Quest, modify and upload it directly within Quest.

When importing theme files, declared variables in light and dark theme files must have different names in order to allow for Dark/Light Preview in Quest. Each module should have a default export of a theme. Icons from imported files are currently not supported in preview/edit mode. We still honor them in exported App but you will not see them in Quest Editor. Icons must be added manually to the folder from which they are imported in theme module. Please note we are using absolute path and theme file path is 'src/'.

Below that you'll see information about the latest sync or import of the design system / theme files. "Last Sync" or "Last Import" will give you a time or day. Additionally "Synced by" or "Imported by" will show what user took the last action. "Synced From" will show what Figma file by name was the used for the Sync to help keep track in case you have multiple files. This section is designed to help keep teams in sync while working on theme files.

In the bottom section, you'll find help links relevant to the design system / component library that you're using for your App. Additionally, you can choose what is the default view in Quest Editor when looking at components: Light or Dark mode. Light and Dark mode can easily be toggled in the Quest Editor to see either but this will simply help start the Quest Editor in your mode of choice.