@consid/theme
v1.0.3
Published
Official Consid MUI theme for #nextlevel Consid apps
Downloads
14
Keywords
Readme
Official Consid MUI theme
Official Consid theme for #nextlevel consid apps. Use this as a starting point for your next consid branded app.
Installation
This is just a theme for the MUI Material design system. You'll need to install MUI Material according to their guides.
npm i @consid/theme @mui/material @emotion/react @emotion/styled
Add the theme to MUI
Wrap your application with MUI's ThemeProvider
import theme from "@consid/theme";
import { ThemeProvider } from "@mui/material/styles";
export default function Main() {
return (
<ThemeProvider theme={theme}>
<YourApp />
</ThemeProvider>
);
}Other guides
Fonts
Consid uses the Google Font "Plus Jakarta Sans" and so does this theme. You'll need to install the font in your preffered way. The themes calls for a font with the family name Plus Jakarta Sans.
Example:
npm install @fontsource/plus-jakarta-sans
You might need to merge the font into the current theme. Depending on how you install the theme. For example with next/font in next.js:
// lib/themeWithFont.ts
"use client";
import { deepmerge } from "@mui/utils";
import { createTheme, ThemeOptions } from "@mui/material/styles";
import theme from "@consid/theme";
import { Plus_Jakarta_Sans } from "next/font/google";
const jakarta = Plus_Jakarta_Sans({ subsets: ["latin"], display: "swap", style: ["normal"] });
const fontTheme: ThemeOptions = {
typography: {
fontFamily: jakarta.style.fontFamily,
},
};
const themeWithFont = createTheme(deepmerge(theme, fontTheme));
export default themeWithFont;Server Side Rendering
Using something like next.js? MUI needs to render all the styles on the server aswell. There are built in packages to handle this. Read the official MUI documentation. Example for the next.js app-router:
npm install @mui/material-nextjs @emotion/cache
// layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import theme from "@consid/theme";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<AppRouterCacheProvider>
<ThemeProvider theme={theme}>
<body>{children}</body>
</ThemeProvider>
</AppRouterCacheProvider>
</html>
);
}