Light & Dark Mode

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 full 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 full MUI Figma 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. 
Previewing your component in Light Mode with toggle at the top
Previewing your component in Dark Mode with toggle at the top
If you've designed your components to fully use the Light mode styles from the MUI file, 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. 
Light Mode / Dark Mode default toggle in App Settings
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.
​

Features - Previous

Previewing with Custom Fonts

Next - Features

Creating a custom Tooltip

Last modified 25d ago

Copy link