mirror of
https://github.com/BarkProductions/barkman.git
synced 2026-06-13 06:11:55 +00:00
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:
+20
-2
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user