From 37d6ba914822301801db7b55ffaf8430636c3934 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 20 Jul 2026 02:06:13 +0100
Subject: [PATCH] Add primary color override and disabled color properties in
 ThemeContext. Update CSS custom properties for primary and disabled colors
 based on theme mode and user-defined overrides, enhancing theme customization
 capabilities.

---
 .../Dashboard/context/ThemeContext.jsx        | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/context/ThemeContext.jsx b/src/components/Dashboard/context/ThemeContext.jsx
index 7fac467..96f2689 100644
--- a/src/components/Dashboard/context/ThemeContext.jsx
+++ b/src/components/Dashboard/context/ThemeContext.jsx
@@ -12,6 +12,8 @@ const ThemeContext = createContext()
 
 const COLORS = {
   colorPrimary: '#0091FF',
+  colorPrimaryDisabledDark: '#0e3a5b',
+  colorPrimaryDisabledLight: '#e6f8ff',
   colorSuccess: '#30D158',
   colorWarning: '#FF9230',
   colorError: '#FF4245',
@@ -38,6 +40,8 @@ export const ThemeProvider = ({ children }) => {
     return savedCompact ? JSON.parse(savedCompact) : false
   })
 
+  const [primaryColorOverride, setPrimaryColorOverride] = useState(null)
+
   // System theme detection
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -124,7 +128,16 @@ export const ThemeProvider = ({ children }) => {
   // Set CSS custom properties for theme colors
   useEffect(() => {
     const root = document.documentElement
-    root.style.setProperty('--color-primary', COLORS.colorPrimary)
+    root.style.setProperty(
+      '--color-primary',
+      primaryColorOverride == null ? COLORS.colorPrimary : primaryColorOverride
+    )
+    root.style.setProperty(
+      '--color-primary-disabled',
+      isDarkMode
+        ? COLORS.colorPrimaryDisabledDark
+        : COLORS.colorPrimaryDisabledLight
+    )
     root.style.setProperty('--color-success', COLORS.colorSuccess)
     root.style.setProperty('--color-warning', COLORS.colorWarning)
     root.style.setProperty('--color-error', COLORS.colorError)
@@ -139,12 +152,20 @@ export const ThemeProvider = ({ children }) => {
       '--layout-header-bg',
       isDarkMode ? '#141414' : '#ffffff'
     )
-  }, [isDarkMode])
+    root.style.setProperty(
+      '--layout-modal-bg',
+      isDarkMode ? '#1f1f1f' : '#ffffff'
+    )
+  }, [isDarkMode, primaryColorOverride])
 
   const themeConfig = {
     algorithm: getThemeAlgorithm(),
     token: {
       ...COLORS,
+      colorPrimary:
+        primaryColorOverride == null
+          ? COLORS.colorPrimary
+          : primaryColorOverride,
       borderRadius: '12px'
     },
     components: {
@@ -166,6 +187,7 @@ export const ThemeProvider = ({ children }) => {
         setThemeMode,
         setDensityMode,
         getColors,
+        setPrimaryColorOverride,
         themeConfig
       }}
     >