Painterro dark theme

#StandWithUkraine

Today, 25th June 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

First, we are initializing Painterro js paint:

 Painterro({
  toolbarHeightPx: 54,
  buttonSizePx:42,
  backgroundFillColor: '#222',
}).show()

Now some CSS (we recommend CSS preprocessor, but for best compatibility, here I will show just a simple CSS):

 .ptro-holder {
  bottom: 32px;
}
.ptro-icon-btn[class] {
  border-radius: 27px;
  background-color: #272a2f;
  box-shadow: inset -1px -1px 8px 1px rgba(0, 0, 0, 0.7);
  position: relative;
  color: #c4c8cb;
}
.ptro-icon-btn[disabled] {
  color: #575757;
}
.ptro-icon-btn:not([disabled]):hover[class] {
  background-color: #233 !important;
  color: #c4c8cb !important;
}
.ptro-color-active-control[class] {
  background-color: #656565;
  box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.7);
}
.ptro-color-active-control[class]::after {
  box-shadow: inset -1px -1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-icon-btn::after {
  content:'';
  width: 100%; height: 100%;
  border-radius: 27px;
  position: absolute;
  box-shadow: inset 1px 1px 8px 1px rgba(255, 255, 255, 0.1);
}
.ptro-color-main[class] {
  background-color: #34393d;
}
.ptro-wrapper[class] {
  background-color:  #34393d;
}

And result:

Image for a hint

Oct 25, 2020

by Ivan Borshchov

Did it help you?

Yes !

Best related

JS paint plugin for your website 🎨

Using painterro with Vue.js

Changing color themes in CSS [Simple method]

	Painterro({
	toolbarHeightPx: 54,
	buttonSizePx:42,
	backgroundFillColor: '#222',
	}).show()

	.ptro-holder {
	bottom: 32px;
	}
	.ptro-icon-btn[class] {
	border-radius: 27px;
	background-color: #272a2f;
	box-shadow: inset -1px -1px 8px 1px rgba(0, 0, 0, 0.7);
	position: relative;
	color: #c4c8cb;
	}
	.ptro-icon-btn[disabled] {
	color: #575757;
	}
	.ptro-icon-btn:not([disabled]):hover[class] {
	background-color: #233 !important;
	color: #c4c8cb !important;
	}
	.ptro-color-active-control[class] {
	background-color: #656565;
	box-shadow: inset 1px 1px 8px 1px rgba(0, 0, 0, 0.7);
	}
	.ptro-color-active-control[class]::after {
	box-shadow: inset -1px -1px 8px 1px rgba(255, 255, 255, 0.1);
	}
	.ptro-icon-btn::after {
	content:'';
	width: 100%; height: 100%;
	border-radius: 27px;
	position: absolute;
	box-shadow: inset 1px 1px 8px 1px rgba(255, 255, 255, 0.1);
	}
	.ptro-color-main[class] {
	background-color: #34393d;
	}
	.ptro-wrapper[class] {
	background-color: #34393d;
	}