Light & Dark Mode
How-to work with and preview light and dark mode in your designs
Quest fully supports creating a light and dark mode design for your components. In order to take advantage of light & dark mode, you'll want to utilize the the fully free Quest Design Kit or paid version of the MUI design system.
In order to design a light mode theme, you'll want to use the Color Styles under "Light" and "Dark" in the Quest Design Kit file. For each light mode color, there is a corresponding dark mode color. So by assigning a light mode color to text, frame, shape or line, it will get a dark mode version of that color if your product team is planning to support dark mode.
If you've designed your components to fully use the Light mode styles from the Quest Design Kit, you can toggle the light/dark mode with the button at the top near the download icon. In the 2 image examples above, the background color of the card component is set to "Light/Background/Default", text is set to "Light/Text/Primary" and the button was copied and pasted from the light mode variant set. Toggling to Dark mode preview switches all of those colors so you can visual confirm it will look good in dark mode.
You cannot mix light and dark mode styles in the same component.
If you'd prefer to default things in your editor view to light or dark mode, you can use the toggle in the App Details page which you can get to from the 3 dot icon on the App thumbnail in the Workspaces tab. This is purely an easy way for you to default what mode you're in when you open your components in the editor mode in Quest. This does not have any affect to how it will be used in your App at all. To use dark or light mode, you'll have to write custom code to handle when you'd like to change to which mode such as time of day or by giving users some interactive button in your App.
When you export your App from Quest, you will get both light and dark mode theme files.
Learn more about how to add the themes to your app.
Last updated
