feat(web): primary colour and shade convars

resource/client.lua

@@ -10,3 +10,10 @@ function RegisterCommand(commandName, callback, restricted)
 		end
 	end)
 end
+
+RegisterNUICallback('getConfig', function(_, cb)
+    cb({
+        primaryColor = GetConvar('ox:primaryColor', 'blue'),
+        primaryShade = GetConvarInt('ox:primaryShade', 8)
+    })
+end)

web/src/App.tsx

@@ -13,8 +13,13 @@ import Dev from './features/dev';
 import { isEnvBrowser } from './utils/misc';
 import SkillCheck from './features/skillcheck';
 import RadialMenu from './features/menu/radial';
+import { theme } from './theme';
+import { MantineProvider } from '@mantine/core';
+import { useConfig } from './providers/ConfigProvider';
 
 const App: React.FC = () => {
+  const { config } = useConfig();
+
   useNuiEvent('setClipboard', (data: string) => {
     setClipboard(data);
   });
@@ -22,7 +27,7 @@ const App: React.FC = () => {
   fetchNui('init');
 
   return (
-    <>
+    <MantineProvider withNormalizeCSS withGlobalStyles theme={{ ...theme, ...config }}>
       <Progressbar />
       <CircleProgressbar />
       <Notifications />
@@ -34,7 +39,7 @@ const App: React.FC = () => {
       <RadialMenu />
       <SkillCheck />
       {isEnvBrowser() && <Dev />}
-    </>
+    </MantineProvider>
   );
 };
 

web/src/main.tsx

@@ -10,6 +10,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { isEnvBrowser } from './utils/misc';
 import LocaleProvider from './providers/LocaleProvider';
 import { MantineProvider } from '@mantine/core';
+import ConfigProvider from './providers/ConfigProvider';
 
 library.add(fas, far, fab);
 
@@ -27,9 +28,9 @@ const root = document.getElementById('root');
 ReactDOM.createRoot(root!).render(
   <React.StrictMode>
     <LocaleProvider>
-      <MantineProvider withNormalizeCSS withGlobalStyles theme={theme}>
+      <ConfigProvider>
         <App />
-      </MantineProvider>
+      </ConfigProvider>
     </LocaleProvider>
   </React.StrictMode>
 );

web/src/providers/ConfigProvider.tsx

@@ -0,0 +1,32 @@
+import { Context, createContext, useContext, useEffect, useState } from 'react';
+import { MantineColor } from '@mantine/core';
+import { fetchNui } from '../utils/fetchNui';
+
+interface Config {
+  primaryColor: MantineColor;
+  primaryShade: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+}
+
+interface ConfigCtxValue {
+  config: Config;
+  setConfig: (config: Config) => void;
+}
+
+const ConfigCtx = createContext<{ config: Config; setConfig: (config: Config) => void } | null>(null);
+
+const ConfigProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [config, setConfig] = useState<Config>({
+    primaryColor: 'blue',
+    primaryShade: 6,
+  });
+
+  useEffect(() => {
+    fetchNui<Config>('getConfig').then((data) => setConfig(data));
+  }, []);
+
+  return <ConfigCtx.Provider value={{ config, setConfig }}>{children}</ConfigCtx.Provider>;
+};
+
+export default ConfigProvider;
+
+export const useConfig = () => useContext<ConfigCtxValue>(ConfigCtx as Context<ConfigCtxValue>);