fix: dbot dark_mode production

packages/bot-skeleton/src/scratch/dbot.js

@@ -9,7 +9,6 @@ import { getSavedWorkspaces, saveWorkspaceToRecent } from '../utils/local-storag
 import { observer as globalObserver } from '../utils/observer';
 import ApiHelpers from '../services/api/api-helpers';
 import Interpreter from '../services/tradeEngine/utils/interpreter';
-import { setColors } from './hooks/colours';
 import { api_base } from '../services/api/api-base';
 
 class DBot {
@@ -24,7 +23,6 @@ class DBot {
      */
     async initWorkspace(public_path, store, api_helpers_store, is_mobile) {
         const recent_files = await getSavedWorkspaces();
-        setColors();
         return new Promise((resolve, reject) => {
             __webpack_public_path__ = public_path; // eslint-disable-line no-global-assign
             ApiHelpers.setInstance(api_helpers_store);

packages/bot-skeleton/src/scratch/hooks/colours.js

@@ -1,73 +1,65 @@
-const isDarkModeEnabled = () => {
-    const ui_store = localStorage.getItem('ui_store');
+const darkMode = () => {
+    const workspace = Blockly;
+    workspace.Colours.RootBlock = {
+        colour: '#183046',
+        colourSecondary: '#F2F3F5',
+        colourTertiary: '#151717',
+    };
+    workspace.Colours.Base = {
+        colour: '#C2C2C2',
+        colourSecondary: '#0e0e0e',
+        colourTertiary: '#0e0e0e',
+    };
 
-    if (ui_store && ui_store.length > 0) {
-        return JSON.parse(ui_store).is_dark_mode_on || false;
-    }
-    return false;
-};
-
-export const setColors = () => {
-    if (isDarkModeEnabled()) {
-        Blockly.Colours.RootBlock = {
-            colour: '#183046',
-            colourSecondary: '#F2F3F5',
-            colourTertiary: '#151717',
-        };
-        Blockly.Colours.Base = {
-            colour: '#C2C2C2',
-            colourSecondary: '#0e0e0e',
-            colourTertiary: '#0e0e0e',
-        };
+    workspace.Colours.Special1 = {
+        colour: '#C2C2C2',
+        colourSecondary: '#0e0e0e',
+        colourTertiary: '#6d7278',
+    };
 
-        Blockly.Colours.Special1 = {
-            colour: '#C2C2C2',
-            colourSecondary: '#0e0e0e',
-            colourTertiary: '#6d7278',
-        };
+    workspace.Colours.Special2 = {
+        colour: '#C2C2C2',
+        colourSecondary: '#0e0e0e',
+        colourTertiary: '#D27954',
+    };
 
-        Blockly.Colours.Special2 = {
-            colour: '#C2C2C2',
-            colourSecondary: '#0e0e0e',
-            colourTertiary: '#D27954',
-        };
+    workspace.Colours.Special3 = {
+        colour: '#C2C2C2',
+        colourSecondary: '#0e0e0e',
+        colourTertiary: '#D27954',
+    };
+};
 
-        Blockly.Colours.Special3 = {
-            colour: '#C2C2C2',
-            colourSecondary: '#0e0e0e',
-            colourTertiary: '#D27954',
-        };
-    } else {
-        Blockly.Colours.RootBlock = {
-            colour: '#064e72',
-            colourSecondary: '#064e72',
-            colourTertiary: '#6d7278',
-        };
+const lightMode = () => {
+    const workspace = Blockly;
+    workspace.Colours.RootBlock = {
+        colour: '#064e72',
+        colourSecondary: '#064e72',
+        colourTertiary: '#6d7278',
+    };
 
-        Blockly.Colours.Base = {
-            colour: '#e5e5e5',
-            colourSecondary: '#ffffff',
-            colourTertiary: '#6d7278',
-        };
+    workspace.Colours.Base = {
+        colour: '#e5e5e5',
+        colourSecondary: '#ffffff',
+        colourTertiary: '#6d7278',
+    };
 
-        Blockly.Colours.Special1 = {
-            colour: '#e5e5e5',
-            colourSecondary: '#ffffff',
-            colourTertiary: '#6d7278',
-        };
+    workspace.Colours.Special1 = {
+        colour: '#e5e5e5',
+        colourSecondary: '#ffffff',
+        colourTertiary: '#6d7278',
+    };
 
-        Blockly.Colours.Special2 = {
-            colour: '#e5e5e5',
-            colourSecondary: '#ffffff',
-            colourTertiary: '#6d7278',
-        };
+    workspace.Colours.Special2 = {
+        colour: '#e5e5e5',
+        colourSecondary: '#ffffff',
+        colourTertiary: '#6d7278',
+    };
 
-        Blockly.Colours.Special3 = {
-            colour: '#e5e5e5',
-            colourSecondary: '#ffffff',
-            colourTertiary: '#6d7278',
-        };
-    }
+    workspace.Colours.Special3 = {
+        colour: '#e5e5e5',
+        colourSecondary: '#ffffff',
+        colourTertiary: '#6d7278',
+    };
 };
-
-setColors();
+export const setColors = is_dark_mode => (is_dark_mode ? darkMode() : lightMode());

packages/bot-web-ui/src/app/app.jsx

@@ -20,6 +20,7 @@ import RootStore from 'Stores';
 import GTM from 'Utils/gtm';
 import './app.scss';
 import Dashboard from 'Components/dashboard';
+import { setColors } from '../../../bot-skeleton/src/scratch/hooks/colours';
 
 const App = ({ passthrough }) => {
     const { root_store, WS } = passthrough;
@@ -29,6 +30,13 @@ const App = ({ passthrough }) => {
     const root_store_instance = React.useRef(new RootStore(root_store, WS, DBot));
     const { app, common, core } = root_store_instance.current;
     const { onMount, onUnmount, showDigitalOptionsMaltainvestError } = app;
+    const {
+        ui: { is_dark_mode_on },
+    } = root_store;
+
+    React.useEffect(() => {
+        setColors(is_dark_mode_on);
+    }, []);
 
     React.useEffect(() => {
         /**

packages/core/src/App/Containers/Layout/trading-hub-footer.jsx

@@ -16,7 +16,7 @@ import LiveChat from 'App/Components/Elements/LiveChat';
 import WhatsApp from 'App/Components/Elements/WhatsApp/index.ts';
 import { connect } from 'Stores/connect';
 import ServerTime from '../server-time.jsx';
-import { isBot, routes } from '@deriv/shared';
+import { routes } from '@deriv/shared';
 import DarkModeToggleIcon from 'Assets/SvgComponents/footer/ic-footer-light-theme.svg';
 import LightModeToggleIcon from 'Assets/SvgComponents/footer/ic-footer-dark-theme.svg';
 import { Popover } from '@deriv/components';
@@ -60,7 +60,6 @@ const TradingHubFooter = ({
     }
 
     const changeTheme = () => {
-        if (isBot()) return;
         setDarkMode(!is_dark_mode);
     };