From 800711b448709b52f3bf15acd94fb5930eacbed0 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Fri, 17 Jan 2025 09:57:49 -0600
Subject: [PATCH] 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.
---
 barkmanui/src/App.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index 78ec832..062b61c 100644
--- a/barkmanui/src/App.tsx
+++ b/barkmanui/src/App.tsx
@@ -2,15 +2,33 @@ import { Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
 import InventoryList from "./features/inventory/InventoryList.tsx";
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import {createTheme, MantineProvider} from '@mantine/core';
 import '@mantine/core/styles.css';
 
 // Create a client
 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() {
-  return <MantineProvider defaultColorScheme="auto">{ (
+  return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
       <QueryClientProvider client={queryClient}>
     <>
         <Routes>