@consid/theme
Advanced tools
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>
);
}
FAQs
Official Consid MUI theme for #nextlevel Consid apps
The npm package @consid/theme receives a total of 0 weekly downloads. As such, @consid/theme popularity was classified as not popular.
We found that @consid/theme demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
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.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.