diff --git a/config.js b/config.js
index be24f1a654..07c9095a36 100644
--- a/config.js
+++ b/config.js
@@ -907,6 +907,8 @@ var config = {
     //     alwaysVisible: false,
     //     // Indicates whether the toolbar should still autohide when chat is open
     //     autoHideWhileChatIsOpen: false,
+    //     // Default background color for the main toolbar. Accepts any valid CSS color.
+    //     // backgroundColor: '#ffffff',
     // },
 
     // Overrides the buttons displayed in the main toolbar. Depending on the screen size the number of displayed
diff --git a/modules/API/API.js b/modules/API/API.js
index dfea86900d..5450fcb2a8 100755
--- a/modules/API/API.js
+++ b/modules/API/API.js
@@ -340,6 +340,7 @@ function initCommands() {
 
             APP.store.dispatch(setAssumedBandwidthBps(value));
         },
+
         'set-blurred-background': blurType => {
             const tracks = APP.store.getState()['features/base/tracks'];
             const videoTrack = getLocalVideoTrack(tracks)?.jitsiTrack;
diff --git a/react/features/base/config/configType.ts b/react/features/base/config/configType.ts
index e4bee21070..e8aa5ab579 100644
--- a/react/features/base/config/configType.ts
+++ b/react/features/base/config/configType.ts
@@ -618,6 +618,10 @@ export interface IConfig {
     toolbarConfig?: {
         alwaysVisible?: boolean;
         autoHideWhileChatIsOpen?: boolean;
+        /**
+         * Background color for the main toolbar. Accepts any valid CSS color.
+         */
+        backgroundColor?: string;
         initialTimeout?: number;
         timeout?: number;
     };
diff --git a/react/features/toolbox/components/native/Toolbox.tsx b/react/features/toolbox/components/native/Toolbox.tsx
index 0d97377988..ce1e5915d0 100644
--- a/react/features/toolbox/components/native/Toolbox.tsx
+++ b/react/features/toolbox/components/native/Toolbox.tsx
@@ -60,6 +60,7 @@ function Toolbox(props: IProps) {
 
     const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
     const { customToolbarButtons } = useSelector((state: IReduxState) => state['features/base/config']);
+    const toolbarBackgroundColor = useSelector((state: IReduxState) => state['features/base/config'].toolbarConfig?.backgroundColor);
     const {
         mainToolbarButtonsThresholds,
         toolbarButtons
@@ -79,6 +80,11 @@ function Toolbox(props: IProps) {
     const { buttonStylesBorderless, hangupButtonStyles } = _styles;
     const style = { ...styles.toolbox };
 
+    // Allow overriding the toolbox background color from config (configOverwrite/overwriteConfig).
+    if (toolbarBackgroundColor) {
+        style.backgroundColor = toolbarBackgroundColor as any;
+    }
+
     // We have only hangup and raisehand button in _iAmVisitor mode
     if (_iAmVisitor) {
         style.justifyContent = 'center';
diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx
index b44efffc98..0c893195b7 100644
--- a/react/features/toolbox/components/web/Toolbox.tsx
+++ b/react/features/toolbox/components/web/Toolbox.tsx
@@ -37,6 +37,11 @@ import Separator from './Separator';
  */
 interface IProps {
 
+    /**
+     * Optional toolbar background color passed as a prop.
+     */
+    toolbarBackgroundColor?: string;
+
     /**
      * Explicitly passed array with the buttons which this Toolbox should display.
      */
@@ -65,7 +70,8 @@ const useStyles = makeStyles()(() => {
  * @returns {ReactElement}
  */
 export default function Toolbox({
-    toolbarButtons
+    toolbarButtons,
+    toolbarBackgroundColor: toolbarBackgroundColorProp
 }: IProps) {
     const { classes, cx } = useStyles();
     const { t } = useTranslation();
@@ -92,7 +98,10 @@ export default function Toolbox({
     const localParticipant = useSelector(getLocalParticipant);
     const transcribing = useSelector(isTranscribing);
     const _isCCTabEnabled = useSelector(isCCTabEnabled);
-
+    // Read toolbar background color from config (if provided) or from props.
+    const toolbarBackgroundColorFromConfig = useSelector((state: IReduxState) =>
+        state['features/base/config'].toolbarConfig?.backgroundColor);
+    const toolbarBackgroundColor = toolbarBackgroundColorProp || toolbarBackgroundColorFromConfig;
     // Do not convert to selector, it returns new array and will cause re-rendering of toolbox on every action.
     const jwtDisabledButtons = getJwtDisabledButtons(transcribing, _isCCTabEnabled, localParticipant?.features);
 
@@ -242,7 +251,8 @@ export default function Toolbox({
     return (
         <div
             className = { cx(rootClassNames, shiftUp && 'shift-up') }
-            id = 'new-toolbox'>
+            id = 'new-toolbox'
+            style = { toolbarBackgroundColor ? { backgroundColor: toolbarBackgroundColor } : undefined }>
             <div className = { containerClassName }>
                 <div
                     className = 'toolbox-content-wrapper'