Getting started
Theme
Enable dark mode and override Polotno UI styles with CSS
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'll need to overwrite Blueprint classes or use its APIs.
How to enable dark theme?
To enable dark mode, add the bp5-dark class to any editor container (for example, the body).
<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. Inspect the DOM to find class names. Some internal Polotno components also include dedicated selectors you can use for more specific rules.
/* 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;
}