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 @@
<% if @global_config['DISPLAY_MANIFEST'] %>
-
+
-
+
<% if ENV['IOS_APP_IDENTIFIER'].present? %>
'>
@@ -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