index.less

:root {
	--keyColor: #bd93f9;
	--sidebarColor: #282a36;
	--sidebarColorDark: #21222c;
	--sidebarColorMix: #282a36;
}
div#app {
	--color1: var(--sidebarColor);
	--color2: var(--sidebarColor);
	--bgColor: transparent;
	--bgWidth: 0px;
	--bgHeight: 0px;
	--chromeHeight: 55px;
	--keyColor: #bd93f9;
	width: 100%;
	height: 100%;
	background: var(--sidebarColor);
	color: white;
	user-select: none;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background-size: 400% 400%;

	&.simplebg {
		background: var(--sidebarColor);
	}

	button:hover {
		.svg-icon {
			--color: var(--keyColor);
		}
	}

	.cd-mediaitem-list-item .listitem-content:hover {
		background: rgba(189, 147, 249, 0.25);
	}
	.cd-mediaitem-list-item.mediaitem-selected {
		background: rgba(189, 147, 249, 0.25);
	}

	.app-sidebar-footer {
		border: 0px;
	}

	.app-chrome {
		box-shadow: none;
		background-color: var(--sidebarColorDark);

		.app-chrome-item > .app-mainmenu {
			background: url(./Assets/logo.svg);
		}

		.app-chrome-item {
			&.volume {
				input[type='range'] {
					background: rgba(189, 147, 249, 0.25);

					&::-webkit-slider-thumb {
						background: var(--keyColor);
					}
				}
			}
		}
	}

	.usermenu-item:hover {
		background: var(--keyColor);
	}

	.md-btn.md-btn-primary {
		background: var(--keyColor);
		color: white;
		border: 1px solid rgba(189, 147, 249, 0.25);
		border-top: 1px solid rgba(189, 147, 249, 0.5);
	}
}

#app-sidebar {
	background: var(--sidebarColorDark);
}

#app.twopanel {
	.app-chrome:not(.chrome-bottom)
		.app-chrome--center
		.top-nav-group
		.app-sidebar-item:before {
		background: var(--keyColor);
	}

	.app-chrome.chrome-bottom {
		background: var(--sidebarColorDark);
		box-shadow: none !important;
	}
}