Create dark.css

dark.css

+/* PVEProxy files - /usr/share/pve-manager */
+
+.x-box-inner {
+    overflow: hidden;
+    position: relative;
+    left: 0;
+    top: 0;
+    background: #23272a; /* 23272a */
+}
+
+.x-body {
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 17px;
+    font-weight: 300;
+    font-family: helvetica, arial, verdana, sans-serif;
+    background: #fff;
+}
+
+.x-viewport, .x-viewport > .x-body {
+    background: #23272a;
+}
+
+/* Search fields color change and remove ugly border around them */ 
+.x-form-text-default {
+    color: #818082;
+    padding: 0px 6px 2px;
+    background-color: #4a4d53;
+    font: 300 13px/17px helvetica, arial, verdana, sans-serif;
+    min-height: 22px;
+}
+
+.x-form-trigger-wrap-default {
+    border-width: 0px;
+    border-style: solid;
+    border-color: #cfcfcf;
+}
+
+/* Change dropdown field color and icon (images/form/trigger.png) */
+.x-form-trigger-default {
+    width: 22px;
+    background: 0 center #72767d url(https://i.imgur.com/uKlzb4D.png) no-repeat;
+}
+
+/* Text color  */
+.x-panel-body-default {
+    background: #2c2f33;
+    border-color: #ffffff;
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 300;
+    font-family: helvetica, arial, verdana, sans-serif;
+    border-width: 0;
+    border-style: solid;
+}
+
+/* Cell (item in list) color change */
+.x-grid-cell-inner {
+    background: #2c2f33;
+    color: #ffffff;
+}
+
+.x-toolbar-default {
+    background-color: #2c2f33;
+}
+
+.x-toolbar {
+    background: #2c2f33;
+}
+
+#toolbar-1069-innerCt {
+    background: #2c2f33;
+}
+
+.x-autocontainer-innerCt {
+    background: #2c2f33;
+}
+
+[id^="toolbar"] {
+  background: #2c2f33;
+}
+
+/* Legends. The buttons under the graphs.  */
+[id^="legend"] {
+  background: #23272a;
+  border-color: red;
+}
+
+.x-legend-item {
+    background: #2c2f33;
+    color: #ffffff;
+    border-width: 0;
+}
+
+.x-legend-container {
+    background: #2c2f33;
+    border-width: 0px;
+    border-radius: 0;
+    box-shadow: rgba(0, 0, 0, 0) 0 0px 0px;
+}
+
+.x-legend.x-docked-top .x-legend-item, .x-legend.x-docked-bottom .x-legend-item, .x-legend-panel.x-docked-top .x-legend-item, .x-legend-panel.x-docked-bottom .x-legend-item {
+    border-left: 0;
+    border-bottom: 0;
+}
+
+/* Treelist (The menu category per node) */
+
+.x-treelist-item-leaf, .x-treelist-container, .x-treelist-row, .x-treelist-row-with-icon, .x-treelist-item-expandable, .x-treelist-item-wrap, .x-treelist-item-text, .x-treelist-item-icon {
+    background: #2c2f33;
+    color: #ffffff;
+}
+
+.x-treelist-item-selected > .x-treelist-row {
+    background-color: #23272a;
+}
+
+.x-treelist-row-over {
+    color: yellow;
+}
+
+.x-treelist-row-over > * > .x-treelist-item-text{
+    color: #7289da;
+    transition:color 0.5s
+}
+
+.x-treelist-row-over > * > .x-treelist-item-icon{
+    color: #7289da;
+    transition:color 0.5s
+}
+
+.fa-ceph:before {
+    background-image: url(https://i.imgur.com/tp9KQqb.png);
+}
+
+.x-treelist-row-over > * > .fa-ceph:before {
+    background-image: url(https://i.imgur.com/R13FV1x.png);
+    background-size: 14px 14px;
+    transition:background-image 0.5s
+}
+
+.x-toolbar-default {
+    border-top-width: 0;
+}
+
+/* Summary page - Load bars, icon color tweaks, and more */ 
+
+.x-progress {
+    background: #2c2f33;
+}
+
+.x-progress-bar {
+    background-color: #7289da !important; 
+}
+
+.pve-itype-icon-memory, .pve-itype-icon-processor  {
+    -webkit-filter: invert(100%);
+}
+
+.x-component.x-box-item.x-component-default {
+    background: #23272a;
+}
+
+.x-panel-header {
+    background: #23272a;
+    border: 0;
+}
+
+.x-title-text {
+    color: #7289da;
+}
+
+/* Buttons */
+
+.x-btn {
+    background: #7289da;
+    border-width: 0;
+}
+
+.x-btn-inner, .x-btn-inner.x-btn-inner-default-small {
+    color: #ffffff;
+}
+
+
+
+#button-1030 {
+    background: #23272a;
+    border-width: 1px;
+    border-color: #d23d3f;
+}
+
+.x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-over, .x-btn.x-unselectable.x-box-item.x-btn-default-small.x-btn-over, .x-menu-item-focus {
+    background-color: #677bc4;
+}
+
+.x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-menu-active {
+    background-color: #677bc4;
+}
+
+.x-btn-disabled {
+    background-image:none;
+    background-color: #737fab !important;
+}
+
+/* Specific button colors - white/green/red */
+
+.x-btn-icon-el.x-btn-icon-el-default-small.fa.fa-book.x-btn-icon-el-default-toolbar-small, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-undo, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-terminal, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-fw.fa-ellipsis-v, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.x-btn-icon-el-default-toolbar-small.fa.fa-question-circle, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-send-o, .x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-play, .x-btn-inner.x-btn-inner-default-toolbar-small, .x-btn-icon-el.x-btn-icon-el-default-small.fa.black.fa-gear, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-send-o, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-clone, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-file-o, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-heartbeat, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-trash-o           {
+    color: #ffffff;
+}
+
+.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-play, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-play  {
+    color: #43b581;
+}
+
+.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-power-off, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-stop, .x-menu-item-icon-default.x-menu-item-icon.fa.fa-stop   {
+    color: #d23d3f;
+}
+
+/* Menus */
+
+.x-menu-item, .x-menu-default {
+    background: #7289da;
+    border-width: 0;
+    border-style: none;
+}
+
+.x-menu-item-text {
+    color: #ffffff;
+}
+
+/* Tooltips n Stuff! */ 
+
+[id^="tooltip"] {
+  background: #7289da;
+  color: #ffffff;
+  border-width: 0;
+}
+
+
+[id^="ext-quicktips-tip-body"], [id^="ext-quicktips-tip-innerCt"], [id^="ext-quicktips-tip-ext-quicktips-tip-outerCt"], .x-tip-default {
+  background-color: #7289da;
+  color: #ffffff;
+  border-width: 0;
+    border-radius: 0;
+}
+
+/* Little graph button boyes on Summary page */
+
+.x-tool-img {
+    background-image: url(https://i.imgur.com/kN6xgXB.png);
+}
+
+
+/* Form boyes (such as Notes, Login, etc) */
+.x-window-header.x-header.x-header-draggable.x-docked.x-unselectable.x-window-header-default.x-horizontal.x-window-header-horizontal.x-window-header-default-horizontal.x-top.x-window-header-top.x-window-header-default-top.x-box-layout-ct {
+    background: #23272a;
+    border-bottom-width: 0;
+    border-right-width: 0;
+}
+
+.x-window-default{
+    border-color: #23272a;
+    border-width: 0;
+    border-radius: 0;
+}
+
+.x-window-default{
+    border-radius: 0;
+    padding:0 0 0 0;
+    border-width:0;
+    border-style: none;
+    background-color: #23272a;
+    box-shadow:none;
+}
+.x-window-default-mc{
+    background-color: #23272a;
+}
+
+.x-window-body-default{
+    border-width:0 !important;
+}
+
+.x-window-header-default-top{
+    border-top-left-radius:0 !important;
+    border-top-right-radius:0!important;
+    border-bottom-right-radius:0!important;
+    border-bottom-left-radius:0!important;
+    padding:9px 9px 9px 9px;
+    border-width:0 !important;
+    background-color:#23272a;
+}
+
+.x-form-text, .x-form-item-label-inner-default, .x-window-text {
+    color: #ffffff;
+}
+
+.x-mask {
+    background-color: rgba(26, 26, 29, 0.27);
+}
+
+/* Collapse boyes */
+
+.x-splitter-collapsed .x-layout-split-bottom {
+    background-image: url(https://i.imgur.com/EjDyRue.png);
+}
+
+.x-layout-split-bottom {
+    background-image: url(https://i.imgur.com/uQyiVX7.png);
+}
+
+/* Tabs! */
+
+.x-tab {
+    background: #737fab;
+    border-width: 0;
+    color: #ffffff;
+}
+
+.x-tab-inner {
+    color: #ffffff;
+}
+
+.x-tab-active, .x-tab-over, .x-tab-default-focus, .x-tab-focus {
+    background: #7289da !important;
+    border-width: 0 !Important;
+}
+
+.x-tab-bar-body {
+    background: #23272a;
+}
+
+/* Column boyes */
+
+.x-column-header-inner, .x-column-header-default, .x-grid-item {
+    background: #2c2f33;
+    border-width: 0 !important;
+}
+
+.x-column-header-text-inner {
+    color: #ffffff;
+}
+
+.x-column-header-trigger {
+    border-color: #23272a;
+}
+
+/* Text color fixes */
+.x-toolbar-text.x-box-item.x-toolbar-item.x-toolbar-text-default {
+    color: #ffffff;
+}
+
+/* Panels for nodes and NodesView */
+
+[id^="pveNodeStatus"] {
+    background: #23272a;
+}
+
+div[id^="pveNotesView-"][id$="-innerCt"]  {
+    background: #23272a;
+}
+
+/* Logo change test */
+
+
+img[src^="/pve2/images/proxmox_logo"]  {
+    background: #23272a;
+    content: url(https://i.imgur.com/lr4i4Cr.png);
+}
+
+[id^="versioninfo"] {
+    background: #23272a;
+}