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>
  );
}

FAQs

What is @consid/theme?

Is @consid/theme well maintained?

Package last updated on 13 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@consid/theme

Consid MUI theme

Installation

Add the theme to MUI

Other guides

Fonts

Server Side Rendering

Related posts

PEP 810 Proposes Explicit Lazy Imports for Python 3.15

PodRocket Podcast: Inside the Recent npm Supply Chain Attacks