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