diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 80cbb6de0..912e7ca7e 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -146,6 +146,12 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
     },
 
+    setColorScheme(darkMode = 'light') {
+      IFrameHelper.sendMessage('set-color-scheme', {
+        darkMode: getDarkMode(darkMode),
+      });
+    },
+
     reset() {
       if (window.$chatwoot.isOpen) {
         IFrameHelper.events.toggleBubble();
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index d4611b3a4..d8a809d5d 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -117,6 +117,7 @@ export default {
       'setReferrerHost',
       'setWidgetColor',
       'setBubbleVisibility',
+      'setColorScheme',
     ]),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
     ...mapActions('campaign', [
@@ -307,6 +308,8 @@ export default {
         } else if (message.event === 'set-locale') {
           this.setLocale(message.locale);
           this.setBubbleLabel();
+        } else if (message.event === 'set-color-scheme') {
+          this.setColorScheme(message.darkMode);
         } else if (message.event === 'toggle-open') {
           this.$store.dispatch('appConfig/toggleWidgetOpen', message.isOpen);
 
diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js
index 91149a2c3..a87276672 100644
--- a/app/javascript/widget/store/modules/appConfig.js
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -1,5 +1,6 @@
 import {
   SET_BUBBLE_VISIBILITY,
+  SET_COLOR_SCHEME,
   SET_REFERRER_HOST,
   SET_WIDGET_APP_CONFIG,
   SET_WIDGET_COLOR,
@@ -55,6 +56,9 @@ export const actions = {
   setWidgetColor({ commit }, widgetColor) {
     commit(SET_WIDGET_COLOR, widgetColor);
   },
+  setColorScheme({ commit }, darkMode) {
+    commit(SET_COLOR_SCHEME, darkMode);
+  },
   setReferrerHost({ commit }, referrerHost) {
     commit(SET_REFERRER_HOST, referrerHost);
   },
@@ -83,6 +87,9 @@ export const mutations = {
   [SET_BUBBLE_VISIBILITY]($state, hideMessageBubble) {
     $state.hideMessageBubble = hideMessageBubble;
   },
+  [SET_COLOR_SCHEME]($state, darkMode) {
+    $state.darkMode = darkMode;
+  },
 };
 
 export default {
diff --git a/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js b/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
index 58441e0c8..2ae31ab2e 100644
--- a/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
@@ -24,4 +24,11 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([['SET_WIDGET_COLOR', '#eaeaea']]);
     });
   });
+
+  describe('#setColorScheme', () => {
+    it('creates actions for dark mode properly', () => {
+      actions.setColorScheme({ commit }, 'dark');
+      expect(commit.mock.calls).toEqual([['SET_DARK_MODE', 'dark']]);
+    });
+  });
 });
diff --git a/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js b/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js
index dc17014fc..e79235e28 100644
--- a/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js
+++ b/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js
@@ -24,4 +24,12 @@ describe('#mutations', () => {
       expect(state.widgetColor).toEqual('#00bcd4');
     });
   });
+
+  describe('#SET_COLOR_SCHEME', () => {
+    it('sets dark mode properly', () => {
+      const state = { darkMode: 'light' };
+      mutations.SET_COLOR_SCHEME(state, 'dark');
+      expect(state.darkMode).toEqual('dark');
+    });
+  });
 });
diff --git a/app/javascript/widget/store/types.js b/app/javascript/widget/store/types.js
index dca4d5dc9..17398b682 100644
--- a/app/javascript/widget/store/types.js
+++ b/app/javascript/widget/store/types.js
@@ -2,6 +2,7 @@ export const CLEAR_CONVERSATION_ATTRIBUTES = 'CLEAR_CONVERSATION_ATTRIBUTES';
 export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES';
 export const SET_WIDGET_APP_CONFIG = 'SET_WIDGET_APP_CONFIG';
 export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
+export const SET_COLOR_SCHEME = 'SET_COLOR_SCHEME';
 export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
 export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN';
 export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';