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.

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

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

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

PreviousCMD Bar Search NextKnowledge Bases

Last updated 8 months ago

Changing the primary color (Free tier)

Changing the primary color _{(Free tier)}