feat: allow custom primary brand color

app/javascript/dashboard/App.vue

@@ -10,7 +10,7 @@ import vueActionCable from './helper/actionCable';
 import { useRouter } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
-import { setColorTheme } from './helper/themeHelper';
+import { setColorTheme, setBrandColor } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useFontSize } from 'dashboard/composables/useFontSize';
@@ -87,6 +87,7 @@ export default {
   },
   mounted() {
     this.initializeColorTheme();
+    setBrandColor(this.$store.getters['globalConfig/get'].brandPrimaryColor);
     this.listenToThemeChanges();
     this.setLocale(window.chatwootConfig.selectedLocale);
   },

app/javascript/dashboard/helper/themeHelper.js

@@ -15,3 +15,9 @@ export const setColorTheme = isOSOnDarkMode => {
     document.documentElement.style.setProperty('color-scheme', 'light');
   }
 };
+
+export const setBrandColor = color => {
+  if (!color) return;
+  document.documentElement.style.setProperty('--w-500', color);
+  document.documentElement.style.setProperty('--color-woot', color);
+};

app/javascript/shared/store/globalConfig.js

@@ -4,6 +4,7 @@ const {
   APP_VERSION: appVersion,
   AZURE_APP_ID: azureAppId,
   BRAND_NAME: brandName,
+  BRAND_PRIMARY_COLOR: brandPrimaryColor,
   CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
   CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
   DIRECT_UPLOADS_ENABLED: directUploadsEnabled,
@@ -42,6 +43,7 @@ const state = {
   privacyURL,
   termsURL,
   widgetBrandURL,
+  brandPrimaryColor,
 };
 
 export const getters = {