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:
import { ThemeProvider } from '@mui/material/styles';
import { StyledEngineProvider } from '@mui/material/styles';
​
// NOTE: replace the theme with your theme filename
import questTheme from "./QuestDesignSystemDarkTheme";
Then wrap your App or main component in the theme as follows:
<ThemeProvider theme={questTheme}>
  <StyledEngineProvider injectFirst>
    <Layout>
      <App />
    </Layout>
  </StyledEngineProvider>
</ThemeProvider>
Doing this will easily allow you to use the theme generated from Quest for your React App.
Last modified 6mo ago