feat(hubspot): add dark mode support and light color scheme for chat widget

- Removed production check to ensure HubSpot script loads in all environments.
- Implemented dark mode CSS injection when the dark theme is active.
- Added a style block to enforce a light color scheme for the HubSpot chat widget, improving visibility and user experience.
This commit is contained in:
Chamika J
2025-07-31 15:44:04 +05:30
parent 7635676289
commit b1bdf0ac11

View File

@@ -15,7 +15,7 @@ class HubSpotManager {
* Load HubSpot script with dark mode support * Load HubSpot script with dark mode support
*/ */
init() { init() {
if (!this.isProduction) return; // if (!this.isProduction) return;
const loadHubSpot = () => { const loadHubSpot = () => {
const script = document.createElement('script'); const script = document.createElement('script');
@@ -52,6 +52,7 @@ class HubSpotManager {
existingStyle.remove(); existingStyle.remove();
} }
// Apply dark mode CSS if dark theme is active
if (isDark) { if (isDark) {
this.injectDarkModeCSS(); this.injectDarkModeCSS();
} }
@@ -122,3 +123,10 @@ document.addEventListener('DOMContentLoaded', () => {
// Make available globally for potential cleanup // Make available globally for potential cleanup
window.HubSpotManager = hubspot; window.HubSpotManager = hubspot;
}); });
// Add this style to ensure the chat widget uses the light color scheme
(function() {
var style = document.createElement('style');
style.innerHTML = '#hubspot-messages-iframe-container { color-scheme: light !important; }';
document.head.appendChild(style);
})();