Customisation

Learn how to customise your command bar

Changing the primary color _{(Free tier)}

You can change your primary color scheme to make sure the command bar fits into your style schema.

Example 1

const cmdBar = new CommandBarApi<{}>();
 

cmdBar.customise().setPrimaryColor('0.704 0.14 182.503', '500', 'oklch');
cmdBar.customise().setPrimaryColor('#42344', '500', 'hex');

Example 2

const primaryColors = [
    { value: '0.953 0.051 180.801', shade: '100' },
    { value: '0.91 0.096 180.426', shade: '200' },
    { value: '0.855 0.138 181.071', shade: '300' },
    { value: '0.777 0.152 181.912', shade: '400' },
    { value: '0.704 0.14 182.503', shade: '500' },
    { value: '0.6 0.118 184.704', shade: '600' },
    { value: '0.511 0.096 186.391', shade: '700' },
    { value: '0.437 0.078 188.216', shade: '800' },
    { value: '0.386 0.063 188.416', shade: '900' },
 ];

  primaryColors.forEach((color) => {
    cmdBar
      .customise()
      .setPrimaryColor(color.value, color.shade as Shades, 'oklch');
  });

More customisation options like border radius, grey shades, background colours, will be available end of April. They will be available for Startup subscriptions and above. See Pricing