Official Consid theme for #nextlevel consid apps. Use this as a starting point for your next consid branded app.
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
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>
);
}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;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>
);
}