Skip to main content

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 have to overwrite blueprint classes and use its methods.

How to enable dark theme?​

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

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

How to change styles of side panel and toolbar?​

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

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

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

Open Demo