Theming and UI styles

Styling Polotno Design Editor to match your design.

Most of Polotno UI is made with Blueprint framework. If you want to change appearance of Polotno UI, you'd have to overwrite blueprint classes and use its methods.

How to enable dark theme?

To enable dark-mode, you just need to add bp5-dark class to any editor container.

<body class="bp5-dark">
  <div id="container"></div>
</body>

How to change styles of side panel and toolbar?

The simplest way is to use CSS styles. You can inspect full DOM tree to find these class names. For convenient flow some internal Polotno components have dedicated Polotno selectors. You can use them too to have more specific style selectors.

/* overwrite colors for side-panel tabs */
.bp5-dark .polotno-side-tabs-container .polotno-side-panel-tab:hover,
.bp5-dark .polotno-side-tabs-container .polotno-side-panel-tab.active {
  background-color: #c8c52d;
  color: white;
}

/* change hover style of all buttons */
.bp5-dark .bp5-button:not([class*='bp5-intent-']):hover {
  background-color: #c8c52d;
}