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',
},
}));
// background-color: rgb(69, 190, 171);
const LinkText = styled('span')({
const LinkText = styled('span')(({ theme }) => ({
color: theme.palette.text.tertiary,
marginLeft: '12px',
fontWeight: 500,
});
}));
export default function SidebarLink({ title, path, icon: Icon }: ISidebarLink) {
return (

View File

@ -22,7 +22,7 @@ export const Sidebar = styled('div')(({ theme }) => ({
export const MainContent = styled('div')(({ theme }) => ({
marginLeft: '240px',
padding: theme.spacing(3),
backgroundColor: 'green',
backgroundColor: theme.palette.secondary.main,
minHeight: '100vh',
}));

View File

@ -1,31 +1,16 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
import ThemeRegistry from '@/config/ThemeRegistry';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: 'Your App',
description: 'Generated by Next.js',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
<body>
<ThemeRegistry>{children}</ThemeRegistry>
</body>
</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: {
primary: '#000000',
secondary: '#555555',
tertiary: '#fff',
},
};