Added theme configuration

This commit is contained in:
Mitchell Magro 2025-06-18 16:09:34 +02:00
parent 83c27dc11c
commit eb70db4f2f
5 changed files with 27 additions and 25 deletions

View File

@ -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 (

View File

@ -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',
})); }));

View File

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

View File

@ -15,6 +15,7 @@ const lightPalette = {
text: { text: {
primary: '#000000', primary: '#000000',
secondary: '#555555', secondary: '#555555',
tertiary: '#fff',
}, },
}; };