LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page

Was this helpful?

  1. Features

Light & Dark Mode

How-to work with and preview light and dark mode in your designs

PreviousPreviewing with Custom FontsNextCreating a custom Tooltip

Last updated 1 year ago

Was this helpful?

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 or paid version of the .

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.

about how to add the themes to your app.

Learn more
Quest Design Kit
MUI design system
Previewing your component in Light Mode with toggle at the top
Previewing your component in Dark Mode with toggle at the top
Light Mode / Dark Mode default toggle in App Settings