feat: allow custom primary brand color

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',

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 = {

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 %>',
       }

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'

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