Quest Home
Searchโฆ
๐
Welcome to Quest
Getting Started
Quest Overview
Helpful Resources
Quick Start
Fundamentals
Customizing & Using the Design Kit
Creating Custom Components
Setting Up Props & Bindings
Creating responsive components
Features
Working with Variants & States
Naming Conventions
Previewing with Custom Fonts
Creating a custom Tooltip
Creating a Floating Popover
Creating a Dialog pop-up
Using the MUI Data Grid & Table
Data & List Bindings
File Upload
Nesting Components
How to use a Theme in your Application
Design Tips and Tricks
Supported MUI Components & How-to Make Edits
๐
Help
Releases
FAQs
Plugin Alerts / Errors
๐ก
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
How to use a Theme in your Application
To use a theme in your application, you need to import the appropriate theme (either light or dark) as follows:
1
import { ThemeProvider } from '@mui/material/styles';
2
import { StyledEngineProvider } from '@mui/material/styles';
3
โ
4
// NOTE: replace the theme with your theme filename
5
import questTheme from "./QuestDesignSystemDarkTheme";
Copied!
Then wrap your App or main component in the theme as follows:
1
<ThemeProvider theme={questTheme}>
2
<StyledEngineProvider injectFirst>
3
<Layout>
4
<App />
5
</Layout>
6
</StyledEngineProvider>
7
</ThemeProvider>
Copied!
Doing this will easily allow you to use the theme generated from Quest for your React App.
Features - Previous
Nesting Components
Next - Features
Design Tips and Tricks
Last modified
17d ago
Copy link