Added theme configuration
This commit is contained in:
parent
83c27dc11c
commit
eb70db4f2f
@ -20,11 +20,13 @@ const LinkContainer = styled('div')(({ theme }) => ({
|
|||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// background-color: rgb(69, 190, 171);
|
// background-color: rgb(69, 190, 171);
|
||||||
const LinkText = styled('span')({
|
const LinkText = styled('span')(({ theme }) => ({
|
||||||
|
color: theme.palette.text.tertiary,
|
||||||
marginLeft: '12px',
|
marginLeft: '12px',
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
});
|
}));
|
||||||
|
|
||||||
export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
|
export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -22,7 +22,7 @@ export const Sidebar = styled('div')(({ theme }) => ({
|
|||||||
export const MainContent = styled('div')(({ theme }) => ({
|
export const MainContent = styled('div')(({ theme }) => ({
|
||||||
marginLeft: '240px',
|
marginLeft: '240px',
|
||||||
padding: theme.spacing(3),
|
padding: theme.spacing(3),
|
||||||
backgroundColor: 'green',
|
backgroundColor: theme.palette.secondary.main,
|
||||||
minHeight: '100vh',
|
minHeight: '100vh',
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@ -1,31 +1,16 @@
|
|||||||
import type { Metadata } from "next";
|
import ThemeRegistry from '@/config/ThemeRegistry';
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import type { Metadata } from 'next';
|
||||||
import "./globals.css";
|
|
||||||
|
|
||||||
const geistSans = Geist({
|
|
||||||
variable: "--font-geist-sans",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: 'Your App',
|
||||||
description: "Generated by create next app",
|
description: 'Generated by Next.js',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
}>) {
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body>
|
||||||
{children}
|
<ThemeRegistry>{children}</ThemeRegistry>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
14
config/ThemeRegistry.tsx
Normal file
14
config/ThemeRegistry.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ThemeProvider, CssBaseline } from '@mui/material';
|
||||||
|
import theme from './theme';
|
||||||
|
|
||||||
|
export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={theme}>
|
||||||
|
<CssBaseline />
|
||||||
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -15,6 +15,7 @@ const lightPalette = {
|
|||||||
text: {
|
text: {
|
||||||
primary: '#000000',
|
primary: '#000000',
|
||||||
secondary: '#555555',
|
secondary: '#555555',
|
||||||
|
tertiary: '#fff',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user