Add custom Mantine theme with red as primary color

Integrates a custom theme for the MantineProvider, setting red as the primary color with a defined color palette. This enhances the application's design consistency and customization options.
This commit is contained in:
2025-01-17 09:57:49 -06:00
parent 22ae0241c0
commit 800711b448
+20 -2
View File
@@ -2,15 +2,33 @@ import { Routes, Route} from 'react-router';
import Home from './pages/home.tsx'; import Home from './pages/home.tsx';
import InventoryList from "./features/inventory/InventoryList.tsx"; import InventoryList from "./features/inventory/InventoryList.tsx";
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import {createTheme, MantineProvider} from '@mantine/core';
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
// Create a client // Create a client
const queryClient = new QueryClient() const queryClient = new QueryClient()
import { MantineProvider } from '@mantine/core'; const barkTheme = createTheme({
primaryColor: 'red',
colors: {
'red': [
"#ffe8e8",
"#ffcfd0",
"#fd9d9d",
"#fb6868",
"#fa3c3b",
"#f9211e",
"#fa120f",
"#df0404",
"#c70002",
"#ae0000"
],
},
});
function App() { function App() {
return <MantineProvider defaultColorScheme="auto">{ ( return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<> <>
<Routes> <Routes>