From 82eb4d67940f153c7db32373b72fb388a22dbf4b Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan.official@gmail.com>
Date: Mon, 9 Jun 2025 13:59:25 -0500
Subject: [PATCH] feat: allow custom primary brand color

---
 app/controllers/dashboard_controller.rb           | 2 +-
 app/javascript/dashboard/App.vue                  | 3 ++-
 app/javascript/dashboard/helper/themeHelper.js    | 6 ++++++
 app/javascript/shared/store/globalConfig.js       | 2 ++
 app/views/layouts/vueapp.html.erb                 | 8 ++++++--
 config/installation_config.yml                    | 4 ++++
 enterprise/config/premium_installation_config.yml | 2 ++
 7 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index a2cb466f1..04af70ed9 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -23,7 +23,7 @@ class DashboardController < ActionController::Base
       'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
       'INSTALLATION_NAME',
       'WIDGET_BRAND_URL', 'TERMS_URL',
-      'BRAND_URL', 'BRAND_NAME',
+      'BRAND_URL', 'BRAND_NAME', 'BRAND_PRIMARY_COLOR',
       'PRIVACY_URL',
       'DISPLAY_MANIFEST',
       'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index e51958e9e..2f1105961 100644
--- a/app/javascript/dashboard/App.vue
+++ b/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);
   },
diff --git a/app/javascript/dashboard/helper/themeHelper.js b/app/javascript/dashboard/helper/themeHelper.js
index 159d94373..b118c0b5c 100644
--- a/app/javascript/dashboard/helper/themeHelper.js
+++ b/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);
+};
diff --git a/app/javascript/shared/store/globalConfig.js b/app/javascript/shared/store/globalConfig.js
index 608a31ec1..bdeebf0f1 100644
--- a/app/javascript/shared/store/globalConfig.js
+++ b/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 = {
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 4be41f8b2..d936fe972 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -6,9 +6,9 @@
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"/>
     <% if @global_config['DISPLAY_MANIFEST'] %>
-      <meta name="msapplication-TileColor" content="#1f93ff">
+      <meta name="msapplication-TileColor" content="<%= @global_config['BRAND_PRIMARY_COLOR'] || '#1f93ff' %>">
       <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-      <meta name="theme-color" content="#1f93ff">
+      <meta name="theme-color" content="<%= @global_config['BRAND_PRIMARY_COLOR'] || '#1f93ff' %>">
       <meta name="description" content="Chatwoot is a customer support solution that helps companies engage customers over Messenger, Twitter, Telegram, WeChat, Whatsapp. Simply connect your channels and converse with your customers from a single place. Easily add new agents to your system and have them own and resolve conversations with customers.Chatwoot also gives you real-time reports to measure your team's performance, canned responses to easily respond to frequently asked questions and private notes for agents to collaborate among themselves.">
       <% if ENV['IOS_APP_IDENTIFIER'].present? %>
         <meta name="apple-itunes-app" content='app-id=<%= ENV['IOS_APP_IDENTIFIER'] %>'>
@@ -52,6 +52,10 @@
         selectedLocale: '<%= I18n.locale %>'
       }
       window.globalConfig = <%= raw @global_config.to_json %>
+      if (window.globalConfig.BRAND_PRIMARY_COLOR) {
+        document.documentElement.style.setProperty('--w-500', window.globalConfig.BRAND_PRIMARY_COLOR);
+        document.documentElement.style.setProperty('--color-woot', window.globalConfig.BRAND_PRIMARY_COLOR);
+      }
       window.browserConfig = {
         browser_name: '<%= browser.name %>',
       }
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 66538d4ab..60d9ae1e7 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -41,6 +41,10 @@
   value: 'Chatwoot'
   display_title: 'Brand Name'
   description: 'The name that would be used in emails and the widget'
+- name: BRAND_PRIMARY_COLOR
+  value: '#1F93FF'
+  display_title: 'Brand Primary Color'
+  description: 'The primary brand color used across the dashboard'
 - name: TERMS_URL
   value: 'https://www.chatwoot.com/terms-of-service'
   display_title: 'Terms URL'
diff --git a/enterprise/config/premium_installation_config.yml b/enterprise/config/premium_installation_config.yml
index 0f102b083..cae8f2089 100644
--- a/enterprise/config/premium_installation_config.yml
+++ b/enterprise/config/premium_installation_config.yml
@@ -13,6 +13,8 @@
   value: 'https://www.chatwoot.com'
 - name: BRAND_NAME
   value: 'Chatwoot'
+- name: BRAND_PRIMARY_COLOR
+  value: '#1F93FF'
 - name: TERMS_URL
   value: 'https://www.chatwoot.com/terms-of-service'
 - name: PRIVACY_URL