Theming the Adaptable Blotter

You can theme (ie. set up the look and feel of) the Adaptable Blotter entirely through CSS variables.

You are able to change the font and entire colour scheme by setting just a few main properties.

And if you want to get more detailed then you can change the details of every control that the Adaptable Blotter provides (e.g. make buttons rounded)

The Adaptable Blotter provides out of the box 2 themes - a Dark Theme and a Light Theme. Choosing either of these 2 themes will - depending on your Blotter Options - also update the underlying vendor grid.

You can change pretty much any aspect of the UI that we provide. For instance you can replace the icons that we show in the toolbars with your own. We have a demo that shows you how.

  • Dark Theme: See the Adaptable Blotter using the shipped Dark Theme. When you use this theme the Adaptable Blotter will automatically update the underlying vendor grid to match.
  • Custom Theme: See the Adaptable Blotter using a custom theme (based on Wimbledon tennis colours).
  • Custom Icons: You can provide your own icons to the Adaptable Blotter to use in place of the defaults - this demo shows how.
Dark Theme Demo
Custom Theme Demo
Custom Icons Demo