Skip to main content
Eptura Knowledge Center

Customizing Colors of Archibus Workplace

  1. Last updated
  2. Save as PDF
Add-in Manager / Workplace

Workplace Custom Colors

You may want to change the color scheme of Archibus Workplace to match your company branding.

Expand to see a screenshot of Workplace's default colors

clipboard_cae8e724-77ae-49f4-8a7d-c62f005627cc.png

Expand to see a screenshot of Workplace with custom colors

clipboard_680556b5-1e30-47c3-868b-42aa3f9a0f99.png

    Settings for V.2023.04 and all later versions

    For the custom colors example, in the above screenshot, these are the colors that were changed:

    const brandPrimary = '#7D34B2'
 
menuItemSelectedDefault: '#F2ECF8',
 
buttonPrimaryDefault: '#7D34B2',
 
focusPrimary: elevations['button-focus'](
    '#7D34B2'
).boxShadow,
 
buttonSecondaryBorder: '#7D34B2',
 
buttonSecondaryText: '#7D34B2',
 
buttonBorderlessText: '#7D34B2',

    Procedure

      1. The color scheme is stored in the file themes.js and this is located at: \schema\ab-products\essential\dev\workplace\src\styles\themes.js
      2. Take a copy of the themes.js file as a backup.
      3. Open themes.js and overwrite the default colors.
      4. After you make changes, you need to rebuild the Workplace app.

    Settings for V.2023.03 and earlier

    You can set custom colors for the Workplace components.

    Procedure

    1. The color scheme is stored in the file themes.js and this is located at: \schema\ab-products\essential\dev\workplace\src\styles\themes.js
    2. Take a copy of the themes.js file as a backup.
    3. Open themes.js and overwrite the default colors.
    4. After you make changes, you need to rebuild the Workplace app.

    Sample themes.js 

    export const defaultTheme = { 
/** * Header, floor sidebar, hamburger slider menu 
       * Figma Color: Navigator/Charcoal 1 
       */ nav1: '#222222',
 /** * Header button background 
       * Figma Color: Navigator/Charcoal 2 
       */ nav2: '#000000',
 /** * Brand color 
       * Figma Color: UI/Dodger Blue 
       */ uiBrand: '#FFBC00', 
/** * White * Figma Color: UI/White 
       */ uiWhite: '#FFFFFF', 
/** * Body background 
       * Figma Color: Background/Grey 1 
       */ bg1: '#F4F4F4', 
/** * Form field background
        * Figma Color: Background/Grey 2 
       */ bg2: '#FAFAFA', 
/** * Hover row background 
       * Figma Color: Background/Hover Blue 
       */ bgHover: '#FFFCF4', 
/** * Secondary text and secondary button background. 
       * Figma Color: Text/Grey 3 
       */ text3: '#9C9B98', 
/** * Secondary text against dark background 
       * Figma Color: Text/Grey 4
        */ text4: '#676767',
 /** * Primary text
        * Figma Color: Text/Grey 5 #444444 
       */ text5: '#231F2C', 
/** * Brand color when used as a font * Figma Color: UI/Dodger Blue 
       */ textBrand: '#FFBC00',