Change background color of the command bar footer

Question

I have header and footer spfx extension, I would like to change the background color of commandbar of the footer. But looking for solution to change it.

As in the below image bg color is white, I need it be blue color

After bg color:

Footer.tsx

import * as React from "react";  
import { Link } from 'office-ui-fabric-react/lib/Link';  
import { IGobalNavState } from './Components/IGlobalNavState';
import { CommandButton } from 'office-ui-fabric-react/lib/Button';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; 
import { ICommandBarStyleProps } from "@fluentui/react/lib/CommandBar";
import { ContextualMenuItemType, IButtonStyles, Icon, IconButton, IIconProps } from '@fluentui/react';
import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';

require('myScript')

import * as strings from "NavigationApplicationCustomizerStrings";
import styles from "./NavigationApplicationCustomizer.module.scss";
  
export interface IReactFooterProps {}
export interface IReactFooterState {}  
  
export default class ReactFooter extends React.Component<IReactFooterProps, IGobalNavState> {  
  constructor(props: IReactFooterProps) {  
    super(props);  
  }  

  
  
  public render(): JSX.Element {  
    return (  
        <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white`}>
        <div className={'${styles.row}'}>
        <CommandBar  
          style={{backgroundColor:"#27348a",width: "100%"}}
          items={this.getItems()}  
        />
        </div>       
      </div> 
    );  
  }  
  
  // Data for CommandBar  
  private getItems = () => {  
    return [  
      {  
        key: 'microsoft',  
        name: 'Group',  
        cacheKey: 'myCacheKey', // changing this key will invalidate this items cache  
        iconProps: {  
          iconName: 'WebEnvironment'  
        },  
        subMenuProps: { items: [
            { key: 'Site1', text: 'About', href:"https://admin.sharepoint.com/sites/information/default.aspx", iconProps: {  
              iconName: 'BacklogBoard'  
            } },
            { key: 'Site2', text: 'www.services.com', href:"https://www.services.com/", iconProps: {  
              iconName: 'WebSearch'  
            } },
          ],
        },
        href: 'https://www.Microsoft.com'  
      },
      {  
        key: 'contact',  
        name: 'Contact Us',  
        cacheKey: 'myCacheKey', // changing this key will invalidate this items cache  
        iconProps: {  
          iconName: 'Contact'  
        },  
        subMenuProps: { items: [
            { key: 'Site1', text: 'NEED HELP ?', href:"https://admin.sharepoint.com/sites/information/default.aspx", iconProps: {  
              iconName: 'BacklogBoard'  
            } },
            { key: 'Site2', text: '[email protected]', href:"https://www.services.com/", iconProps: {  
              iconName: 'WebSearch'  
            } },
          ],
        },
        href: 'https://www.Microsoft.com'  
      },
      {  
        key: 'officeUIFabric',  
        name: 'Social Media',  
        iconProps: {  
          iconName: 'AzureAPIManagement'  
        },
        subMenuProps: { items: [
          { key: 'Site11', text: 'Youtube', href:"https://sharepoint.com/sites/information/default.aspx", iconProps: {  
            iconName: 'BacklogBoard'  
          } },
          { key: 'Site12', text: 'Twitter', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
          { key: 'Site13', text: 'LinkdIn', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
          { key: 'Site14', text: 'We', href:"https://www.-services.com/", iconProps: {  
            iconName: 'WebSearch'  
          } },
        ],
      },
        href: 'https://dev.office.com/fabric',  
        ['data-automation-id']: 'uploadButton'  
      }
      
        
      
    ];  
  }  
}  

Nav.ts

if (!this._bottomPlaceholder) {  
this._bottomPlaceholder =  
  this.context.placeholderProvider.tryCreateContent(  
    PlaceholderName.Bottom,  
    { onDispose: this._onDispose });  

// The extension should not assume that the expected placeholder is available.  
if (!this._bottomPlaceholder) {  
  console.error('The expected placeholder (Bottom) was not found.');  
  return;  
}  

const elem: React.ReactElement<IReactFooterProps> = React.createElement(ReactFooter);  
ReactDOM.render(elem, this._bottomPlaceholder.domElement); 
}

Answer 1

You can refer to the tokens in the following document to custom your command bar https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-theme-colors-in-your-customizations#available-theme-tokens-and-their-occurrences