This package contains simple MUI themes that you can drop in to your React application to achieve the intended look and feel for Hexagon applications.
# With yarn:
yarn add @hxnova/theme
# With npm:
npm install --save @hxnova/theme
Our themes expect that you have the following dependencies installed in your project. You can install them quickly with the following commands if you haven't already:
# With yarn:
yarn add @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers @mui/x-tree-view
# With npm:
npm install --save @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers @mui/x-tree-view
In your main React application entry point, wrap your whole app with the ThemeProvider and pass in a Nova theme to the theme
prop. You should also include the CssBaseline
component from MUI — this component includes a CSS reset to standardize default styles across browsers for a more consistent experience.
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '@hxnova/theme';
...
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your Application Contents Here */}
</ThemeProvider>
If you want to support both light
and dark
themes in your application, you can dynamically switch which theme you pass into the ThemeProvider
.
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import lightTheme, {
LanguageType,
useThemeWithLocale,
darkTheme,
} from "@hxnova/theme";
const themeMode = localStorage.getItem("theme") || "light"; // Or read from redux
const theme = themeMode === "dark" ? darkTheme : lightTheme;
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your Application Contents Here */}
</ThemeProvider>;