[DOCS] How do you add custom themes?

[NovaViper]

Hey! I'm wondering how can I add custom themes? I made one based off the Dracula theme suite and I want to upload it to see how it looks.

This is the theme css for it, I took the red_night css and just changed the colors for the Dracula theme (or at least to the best of my ability); if you find something wrong with it you can change it (this is my first time working with css)! dracula.zip

[LazeMSS]

here: https://github.com/LazeMSS/OctoPrint-UICustomizerThemes - do a pull request (PR) if possible.

If not then I can try and add the your theme but i prefer PR

[KenLucke]

On a related question, where does UIC store the local copy of the themes on the Pi? I'd like to modify one or two (just color changes) before you get around to implementing your idea you had in another thread. I've dug around but can't seem to find them.

[LazeMSS]

On a related question, where does UIC store the local copy of the themes on the Pi? I'd like to modify one or two (just color changes) before you get around to implementing your idea you had in another thread. I've dug around but can't seem to find them.

You can use custom CSS under advanced. The actual files will be overwritten by updates etc

[KenLucke]

We tried that, it didn't work :(

[NovaViper]

We tried that, it didn't work :(

Did you put the entire file's contents into the custom css page? I did that and it loaded up the elements :D

[KenLucke]

No, I didn't try that. I just tried to override the root colors, even using !important to try to force them. I'll give your method a try.

[LazeMSS]

@KenLucke and @NovaViper you can overwrite the color variables like below (take from red night) with custom css - you must include the root part - and also notice the custom css preview only updates on "blur" of the input field:

:root {
    --accent: #d32f2f;
    --accent-transparent: rgba(211, 47, 47, .45);
    --accent-darker: #ab2424;
    --background: #1e1e20;
    --background-darker: #121213;
    --grey1: #19191b;
    --grey2: #242424;
    --grey3: #2d2d2f;
    --grey3-dark: #212122;
    --grey4: #3e3e3e;
    --red: #f44336;
    --red-transparent: rgba(244, 67, 54, .7);
    --green: #4caf50;
    --quiteWhite: #f7f7f7;
    --quiteWhite-transparent: hsla(0, 0%, 97%, .3);
    --quiteWhite-dark: #dedede;
    --white: #fff;
    --white-dark: #f2f2f2;
    --grey: #999;
    --black-transparent: hsla(0, 0%, 7%, .6);
    --icon-quiteWhite-Filter: hue-rotate(0deg) saturate(0) brightness(96.8627451%);
}

[KenLucke]

I tried this on @NovaViper's suggestion . It worked until I reloaded OP, then it showed, but instantly reverted back to the original theme colors.

https://user-images.githubusercontent.com/57936294/117554810-d38a0280-b00e-11eb-8122-fc4f8dae14c3.mp4

Have not tweaked everything, this was a proof-of-concept attempt.

:root {
    --accent: #ffff00;
    --accent-transparent: rgba(255, 255, 0, .45);
    --accent-darker: #ffff00;
    --background: #1e1e20;
    --background-darker: #121213;
    --grey1: #19191b;
    --grey2: #242424;
    --grey3: #2d2d2f;
    --grey3-dark: #212122;
    --grey4: #3e3e3e;
    --red: #FFFF00;
    --red-transparent: rgba(255, 255, 0, .7);
    --green: #4caf50;
    --quiteWhite: #f7f7f7;
    --quiteWhite-transparent: hsla(0, 0%, 97%, .3);
    --quiteWhite-dark: #dedede;
    --white: #000;
    --white-dark: #f2f2f2;
    --grey: #999;
    --black-transparent: hsla(0, 0%, 7%, .6);
    --icon-quiteWhite-Filter: hue-rotate(0deg) saturate(0) brightness(96.8627451%);
}

/* fix hardcode headers*/
.octoprint-container .tab-content h1 {
    color: var(--white);
}

body {
    background-color: var(--background);
    color: var(--quiteWhite);
    font-weight: 400;
}

a {
    color: var(--quiteWhite-dark);
}

a:hover {
    color: var(--quiteWhite);
    text-decoration: none;
}

body::-webkit-scrollbar,
body .scrollable::-webkit-scrollbar,
.scroll-wrapper::-webkit-scrollbar,
.modal .modal-body::-webkit-scrollbar,
.controls select::-webkit-scrollbar,
#settings_gcodeScripts .block.monospace::-webkit-scrollbar,
#settings_plugin_pluginmanager_pluginlist::-webkit-scrollbar,
#settings_plugin_pluginmanager_repositorydialog_list::-webkit-scrollbar,
#settings_plugin_softwareupdate_updatelist::-webkit-scrollbar {
  width: 12px;
}

body,
body .scrollable,
.scroll-wrapper,
.modal .modal-body,
.controls select,
#settings_gcodeScripts .block.monospace,
#settings_plugin_pluginmanager_pluginlist,
#settings_plugin_pluginmanager_repositorydialog_list,
#settings_plugin_softwareupdate_updatelist {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-darker) var(--grey1);
}

body::-webkit-scrollbar-track,
body .scrollable::-webkit-scrollbar-track,
.scroll-wrapper::-webkit-scrollbar-track,
.modal .modal-body::-webkit-scrollbar-track,
.controls select::-webkit-scrollbar-track,
#settings_gcodeScripts .block.monospace::-webkit-scrollbar-track,
#settings_plugin_pluginmanager_pluginlist::-webkit-scrollbar-track,
#settings_plugin_pluginmanager_repositorydialog_list::-webkit-scrollbar-track,
#settings_plugin_softwareupdate_updatelist::-webkit-scrollbar-track,
body::-webkit-scrollbar-corner,
body .scrollable::-webkit-scrollbar-corner,
.scroll-wrapper::-webkit-scrollbar-corner,
.modal .modal-body::-webkit-scrollbar-corner,
.controls select::-webkit-scrollbar-corner,
#settings_gcodeScripts .block.monospace::-webkit-scrollbar-corner,
#settings_plugin_pluginmanager_pluginlist::-webkit-scrollbar-corner,
#settings_plugin_pluginmanager_repositorydialog_list::-webkit-scrollbar-corner,
#settings_plugin_softwareupdate_updatelist::-webkit-scrollbar-corner {
  background: var(--background-darker);
}

body::-webkit-scrollbar-thumb,
body .scrollable::-webkit-scrollbar-thumb,
.scroll-wrapper::-webkit-scrollbar-thumb,
.modal .modal-body::-webkit-scrollbar-thumb,
.controls select::-webkit-scrollbar-thumb,
#settings_gcodeScripts .block.monospace::-webkit-scrollbar-thumb,
#settings_plugin_pluginmanager_pluginlist::-webkit-scrollbar-thumb,
#settings_plugin_pluginmanager_repositorydialog_list::-webkit-scrollbar-thumb,
#settings_plugin_softwareupdate_updatelist::-webkit-scrollbar-thumb  {
  background-color: var(--accent-darker) ;
  border-radius: 2px;
  border: 2px solid var(--background-darker);
}

body::-webkit-resizer,
body .scrollable::-webkit-resizer,
.scroll-wrapper::-webkit-resizer,
.modal .modal-body::-webkit-resizer,
.controls select::-webkit-resizer,
#settings_gcodeScripts .block.monospace::-webkit-resizer,
#settings_plugin_pluginmanager_pluginlist::-webkit-resizer,
#settings_plugin_pluginmanager_repositorydialog_list::-webkit-resizer,
#settings_plugin_softwareupdate_updatelist::-webkit-resizer {
    background: var(--grey1);
}

.accordion-group,
.octoprint-container .tab-content {
    border: none;
}

.accordion {
    background-color: var(--grey1);
    -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .75);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .75);
}

.octoprint-container .accordion-heading .accordion-heading-button a {
    color: inherit;
}

.nav-tabs {
    border-bottom: 1px solid var(--accent);
}

.nav-tabs>li>a {
    color: var(--quiteWhite);
    border: none;
}

.nav-tabs>li>a:hover {
    background-color: var(--grey4);
    border: none;
    border-radius: 1px;
    border-bottom: 4px solid var(--accent);
}

.nav-tabs>li>a i {
    color: var(--quiteWhite)!important;
}

.nav-tabs>.active>a,
.nav-tabs>.active>a:hover {
    background-color: var(--grey2);
    color: #fff;
    border: none;
    border-bottom: 4px solid var(--accent);
}

.nav-pills>li>a {
    background-color: var(--grey1);
    border-radius: 16px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.nav-pills>li>a:hover {
    background-color: var(--grey2);
}

.nav-pills>.active>a,
.nav-pills>.active>a:hover {
    background-color: var(--accent);
}

h1,
h2,
h3,
h4 {
    color: var(--white);
    border-bottom-color: #d32f2f;
}

a:focus {
    box-shadow: 0 0 10px 0 var(--accent);
}

.btn {
    border-radius: 1px;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: none;
    background-color: var(--grey3);
    color: var(--white);
    text-shadow: none;
}

.btn:hover {
    color: var(--white-dark);
    background-color: var(--grey3-dark);
    background-position: 0 0!important;
}

.btn:focus {
    outline-color: var(--quiteWhite);
    outline-width: 2px;
}

.btn .active,
.btn:active,
.btn:focus {
    background-color: var(--grey3-dark);
    color: var(--white);
}

.btn .active,
.btn:active {
    border-color: var(--quiteWhite);
}

.btn.disabled,
.btn[disabled] {
    background-color: transparent!important;
    background-image: repeating-linear-gradient(-60deg, var(--grey4), var(--grey4) .25rem, transparent 0, transparent .5rem)!important;
    color: var(--quiteWhite-dark);
    opacity: .65;
}

.btn.btn-primary {
    background-color: var(--accent);
    border: none;
}

.btn.btn-primary.disabled,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary[disabled] {
    background-color: var(--accent-darker);
}

.btn .caret {
    border-top-color: var(--white);
    border-bottom-color: var(--white);
}

.btn-group.open .btn.dropdown-toggle {
    color: var(--quiteWhite);
    background: var(--grey3);
}

.btn-group.open .btn.dropdown-toggle:active,
.btn-group.open .btn.dropdown-toggle:focus {
    background: var(--grey3-dark);
    color: var(--white);
}

.btn-group.open .btn.dropdown-toggle.btn-primary {
    box-shadow: none;
    background-color: var(--accent-darker);
}

.input-append .add-on,
.uneditable-input,
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
    background-color: var(--grey2);
    border: none;
    color: var(--quiteWhite);
    text-shadow: none;
    padding-bottom: 6px;
    border-radius: 2px;
    margin: 0;
}

.uneditable-input:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=datetime]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
textarea:focus {
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .075), 0 0 8px hsla(0, 0%, 100%, .5);
}

.input-append .add-on,
.input-prepend .add-on {
    padding-bottom: 6px;
}

.input-prepend .add-on.add-on-limited {
    background-color: var(--grey2);
    border: none;
    text-shadow: none;
}

.slider .slider-selection {
    background: var(--accent);
}

.slider .slider-selection:active,
.slider .slider-selection:hover {
    background-color: var(--accent-darker);
}

.octoprint-container .accordion-heading [class*=" icon-"] {
    color: var(--quiteWhite);
}

.octoprint-container .accordion-heading [class*=" icon-"].disabled {
    color: var(--quiteWhite-dark);
}

#settings_dialog .table .table {
    background-color: var(--grey1);
}

td[class^=settings_] a,
td i a,
th[class^=settings_] a,
th i a {
    color: var(--quiteWhite);
}

td[class^=settings_] a:hover,
td i a:hover,
th[class^=settings_] a:hover,
th i a:hover {
    color: var(--white);
}

td[class^=settings_] a.disabled,
td i a.disabled,
th[class^=settings_] a.disabled,
th i a.disabled {
    color: var(--quiteWhite-dark);
}

.icon-sd-black-14 {
    background-image: url(../img/ic_sd_card_white_18dp_1x.png);
    background-image: url(../img/ic_sd_card_white_18px.svg);
    background-position: 0 0;
    margin-top: 1px;
    width: 15px;
    height: 17px;
    filter: var(--icon-quiteWhite-Filter);
    transform: rotateY(180deg);
}

.progress {
    background: var(--grey3);
    border-radius: 2px;
}

.progress .bar {
    background-color: var(--accent-darker);
    background-image: none;
}

.progress.progress-info.progress-striped .bar {
    background-color: var(--accent-darker);
}

.progress.progress-danger.progress-striped .bar,
.progress.progress-error.progress-striped .bar {
    background-color: var(--red);
}

.navbar {
    background: none;
}

#UICsettingsMenuNav {
    background:linear-gradient(180deg, var(--grey1) 0px, var(--grey1) 55px, transparent 100%);
}

#navbar .navbar-inner,
.navbar .navbar-inner {
    background-color: var(--grey2);
    border: none;
    background-image: none;
    border-radius: 2px;
}

#navbar .navbar-inner .nav>.dropdown.active>.dropdown-toggle,
#navbar .navbar-inner .nav>.dropdown.open.active>.dropdown-toggle,
#navbar .navbar-inner .nav>.dropdown.open>.dropdown-toggle,
.navbar .navbar-inner .nav>.dropdown.active>.dropdown-toggle,
.navbar .navbar-inner .nav>.dropdown.open.active>.dropdown-toggle,
.navbar .navbar-inner .nav>.dropdown.open>.dropdown-toggle {
    background-image: none;
    background-color: var(--grey4);
    color: var(--white);
    border-bottom: 2px solid var(--accent);
}

#navbar .navbar-inner .nav>li>a:hover,
.navbar .navbar-inner .nav>li>a:hover  {
    background-color: var(--grey3);
    background-image: none;
    border-bottom: 2px solid var(--accent);
}

#navbar .navbar-inner .brand,
#navbar .navbar-inner .nav>li>a,
.navbar .navbar-inner .brand,
.navbar .navbar-inner .nav>li>a {
    color: var(--white);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-shadow: none;
}

#navbar .navbar-inner .brand .caret,
#navbar .navbar-inner .nav>li>a .caret,
.navbar .navbar-inner .brand .caret,
.navbar .navbar-inner .nav>li>a .caret  {
    border-top-color: var(--white);
    border-bottom-color: var(--white);
}

#navbar .navbar-inner li>.dropdown-menu:after,
.navbar .navbar-inner li>.dropdown-menu:after {
    display: none;
}

#navbar .navbar-inner .pi_support_state_pulsate {
    color: var(--red);
}

#navbar .navbar-inner .btn-navbar {
    background-color: var(--grey2);
    background-image: none;
    color: var(--white);
    border: none;
    box-shadow: none;
}

#navbar_login i {
    margin-right: 4px;
}

.dropdown-menu, .navbar .navbar-inner .nav-collapse {
    background: var(--grey2);
    border-radius: 2px;
}

.dropdown-menu li.active>a, .nav-collapse li.active>a {
    background-color: var(--grey4);
    background-image: none;
    border-right: 2px solid var(--accent);
}

.nav-collapse ul {
    margin-bottom: 0;
}

.navbar .nav-collapse .dropdown-menu li>a {
    color: var(--quiteWhite);
    background-image: none;
}

.dropdown-menu li {
    display: flex;
}

.dropdown-menu li>a {
    width: 100%;
    color: var(--quiteWhite);
    background-image: none;
}

.dropdown-menu li>a:focus,
.dropdown-menu li>a:hover {
    background-color: var(--grey4);
    background-image: none;
    border-right: 2px solid var(--accent);
    outline: none;
}

.dropdown-menu li>a i {
    color: var(--accent);
    margin-right: 2px;
}

#files .gcode_files .entry:hover,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: var(--grey2);
}

.legend {
    border-bottom-color: var(--accent);
}

.legend>table {
    color: var(--quiteWhite)!important;
}

.table-bordered,
.table-striped {
    border-color: transparent;
    border: none;
}

.table-bordered td,
.table-bordered th,
.table-striped td,
.table-striped th {
    border-color: transparent;
    border-left: none;
    border-right: none;
}

.table-bordered tr:not(:last-child) td,
.table-bordered tr:not(:last-child) th,
.table-striped tr:not(:last-child) td,
.table-striped tr:not(:last-child) th {
    border-bottom: 1px solid var(--accent);
}

.table-striped tbody>tr:nth-child(odd)>td,
.table-striped tbody th {
    background-color: var(--grey2);
}

.table th, .table td {
    border-bottom: 1px solid var(--accent);
    border-top: none;
}

.modal {
    background-color: var(--grey1);
}

.modal .modal-body {
    border: none;
}

.modal .modal-footer,
.modal .modal-header {
    background-color: var(--grey1);
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.nav-list>li>a {
    text-shadow: none;
}

.nav-list>li>a:hover {
    color: var(--white);
    background: var(--grey2);
}

.nav-list .nav-header {
    text-shadow: none;
}

.nav-list>.active>a {
    border-bottom: 2px solid var(--accent);
}

.nav-list>.active>a,
.nav-list>.active>a:hover {
    background-color: var(--grey2);
}

.close {
    color: var(--white);
    text-shadow: none;
}

.help-block,
.help-inline {
    color: var(--quiteWhite-dark);
}

code {
    color: var(--accent);
    border: none;
}

.badge,
.label,
code {
    background-color: var(--grey2);
}

.badge,
.label {
    color: var(--quiteWhite);
    text-shadow: none;
}

.pre-scrollable::-webkit-scrollbar,
.scrollable::-webkit-scrollbar,
body::-webkit-scrollbar {
    background-color: var(--background);
}

.pre-scrollable::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: var(--background-darker);
    border-radius: 25px;
}

.pre-scrollable::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px var(--grey1);
}

legend {
    color: inherit;
}

.hero-unit {
    background-color: var(--background);
}

.footer ul li a {
    color: var(--grey);
}

.flot-text {
    color: var(--quiteWhite)!important;
}

#terminal-output {
    background-color: var(--grey2);
    color: var(--white);
}

.pagination-mini ul>li>a {
    background-color: var(--grey1);
    color: var(--quiteWhite);
    border: 1px solid transparent;
}

.pagination-mini ul>li>a:focus,
.pagination-mini ul>li>a:hover {
    color: var(--white);
    background: var(--grey1);
}

.nav .dropdown-toggle .caret {
    border-top-color: var(--quiteWhite);
    border-bottom-color: var(--quiteWhite);
}

input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
    background-color: var(--grey1);
    color: var(--quiteWhite-dark);
}

.modal-backdrop,
.modal-backdrop.fade.in {
    background: var(--grey2);
}

.alert {
    border: none;
    border-radius: 0;
    background-color: var(--grey2)!important;
    color: var(--quiteWhite);
    text-shadow: none;
}

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6 {
    color: inherit;
}

.alert strong {
    color: var(--accent);
    text-shadow: none;
}

.alert.alert-block,
.alert.alert-info {
    border-left: 4px solid var(--grey);
}

.alert.alert-danger,
.alert.alert-error {
    border-left: 8px solid var(--red);
}

.alert.alert-danger.ui-pnotify-container,
.alert.alert-error.ui-pnotify-container {
    box-shadow: 0 0 8px 4px var(--red-transparent);
    transition: box-shadow .2s ease-in-out;
}

.alert.alert-success {
    border-left: 4px solid var(--green);
}

.alert.ui-pnotify-container {
    transition: box-shadow .2s ease-in-out;
    box-shadow: 0 0 8px 4px var(--quiteWhite-transparent);
}

.alert.ui-pnotify-container.alert-danger,
.alert.ui-pnotify-container.alert-error {
    box-shadow: 0 0 8px 4px var(--red-transparent);
}

.text-info {
    color: var(--quiteWhite);
}

.text-danger, .text-error {
    color: var(--red);
}

.text-success {
    color: var(--green);
}

.well {
    background-color: var(--grey2);
    color: var(--quiteWhite);
    border-radius: 4px;
    border-color: transparent;
}

.accordion-inner,
hr {
    border-top-color: var(--accent);
}

#files .entry.machinecode, #files .entry.folder,
#files .entry.back, hr {
    border-bottom-color: var(--accent);
}

#files .entry.machinecode .title.text-error {
    color: var(--red);
}

#files .entry.machinecode .title.text-success {
    color: var(--green);
}

#files .entry.folder .title i, #files .entry.back .back-arrow i {
    color: var(--accent);
}

.popover {
    background-color: var(--grey2);
}

.popover .popover-title {
    background-color: inherit;
}

.fa-spinner, .icon-spinner {
    color: var(--accent);
}

.fa-spinner:before, .icon-spinner:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\F1CE";
}

#page-container-loading {
    background: var(--background);
}

#page-container-loading #page-container-loading-header:after {
    color: var(--grey);
}

#page-container-loading #page-container-loading-spinner {
    color: var(--accent) !important;
}

#settings_plugin_pluginmanager_repositorydialog_empty {
    background-image: none;
}

#settings_dialog table td>a {
    color: var(--white) !important;
}

.UICWebCamClick {
    opacity: .5;
    background-color: var(--black-transparent);
    border-radius: 4px;
}

.UICWebCamClick i {
    color: var(--white);
}

.UICWebCamClick:hover {
    opacity: 1;
}

.UICTabIcon i {
    color: var(--white)!important;
}

#UICWebCamFull {
    background-color: var(--grey1);
    transition: box-shadow .2s ease-in-out;
    box-shadow: 0 0 8px 4px var(--quiteWhite-transparent);
}

#tab_plugin_filemanager .table-container {
    border: none;
}

#tab_plugin_filemanager .header {
    background-color: var(--background);
    border-bottom: 1px solid var(--accent);
}

.print-time-genius-after:after,
.print-time-genius:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\F005";
}

.print-time-genius-after:after {
    transform: none;
    margin-left: 4px;
    position: initial;
}

#psucontrol_indicator.on i {
    color: var(--green);
}

#psucontrol_indicator.off i {
    color: var(--grey);
}

#navbar_plugin_toptemp {
    color: var(--quiteWhite-dark);
}

#navbar_plugin_toptemp .TopTempLoad:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--accent);
    content: "\F1CE";
}

#navbar_plugin_toptemp .TopTempGraph > svg .ct-series .ct-line {
    stroke: var(--quiteWhite);
    stroke-opacity: 0.4;
}

div.popover.toptempPopover {
    background-color: var(--grey3);
}

div.popover.toptempPopover .arrow:after { 
    border-bottom-color: var(--grey3);
}

div.popover.toptempPopover .popover-content div.TopTempPopoverGraph {
    background-color: transparent;
}

div.popover.toptempPopover .popover-content div.TopTempPopoverGraph svg .ct-axis-title {
    fill: var(--white-dark);
}

div.popover.toptempPopover .popover-content div.TopTempPopoverGraph svg .ct-grid {
    stroke: var(--white-dark);
    opacity: 0.5;
}

div.popover.toptempPopover .popover-content div.TopTempPopoverGraph svg .ct-labels span {
    color: var(--white);
}

#settings_plugin_bedlevelvisualizer .table {
    border-radius: 0;
}

#settings_plugin_bedlevelvisualizer .table,
#settings_plugin_bedlevelvisualizer .table thead tr.info > th,
#settings_plugin_bedlevelvisualizer .table tbody tr td.info,
#settings_plugin_bedlevelvisualizer .table tfoot tr.info > th {
    background-color: var(--grey3);
}

#settings_plugin_bedlevelvisualizer .table tbody tr .raise,
#settings_plugin_bedlevelvisualizer .table tfoot tr td span.raise {
    color: var(--green);
}

#settings_plugin_bedlevelvisualizer .table tbody tr .lower,
#settings_plugin_bedlevelvisualizer .table tfoot tr td span.lower {
    color: var(--red);
}

#settings_plugin_bedlevelvisualizer .table thead tr.info .x-axis-label,
#settings_plugin_bedlevelvisualizer .table tbody tr .x-axis-label,
#settings_plugin_bedlevelvisualizer .table tfoot tr .x-axis-label,
#settings_plugin_bedlevelvisualizer .table tfoot tr .x-axis-label  {
    color: var(--quiteWhite-dark);
}

#settings_plugin_bedlevelvisualizer .table thead tr.info .y-axis-label,
#settings_plugin_bedlevelvisualizer .table tbody tr .y-axis-label,
#settings_plugin_bedlevelvisualizer .table tfoot tr .y-axis-label,
#settings_plugin_bedlevelvisualizer .table tfoot tr.info .y-axis-label {
    color: var(--grey);
}

#settings_plugin_bedlevelvisualizer #bedlevelvisualizer_command {
    min-height: 300px;
}

#dialog_printJobHistory_compareSlicerSettings.modal {
    width: 1000px;
    margin-left: -500px
}

#dialog_printJobHistory_compareSlicerSettings table thead th {
    background: var(--grey1) !important;
}

#dialog_printJobHistory_compareSlicerSettings table tbody tr span[style*="black"] {
    color: var(--quiteWhite) !important;
}

#dialog_printJobHistory_compareSlicerSettings table tbody tr span[style*="blue"] {
    color: var(--accent-darker) !important;
}

[APEbbers]

Hi

If you want override a specific style with CustomCSS, you can use " !Important" at the end of each line. I've used this to restore the colors for macro buttons from the "sidebar macros" plugin. These styles where overridden when using the red night theme.

See below the custom css that i've used: .btn-info { color: #fff !Important; text-shadow: 0 -1px 0 rgb(0 0 0 / 25%) !Important; background-color: #49afcd !Important; background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4) !Important; background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4)) !Important; background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4) !Important; background-image: -o-linear-gradient(top,#5bc0de,#2f96b4) !Important; background-image: linear-gradient(to bottom,#5bc0de,#2f96b4) !Important; background-repeat: repeat-x !Important; border-color: #2f96b4 #2f96b4 #1f6377 !Important; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25) !Important; *background-color: #2f96b4 !Important; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !Important; }

.btn-warning { color: #fff; text-shadow: 0 -1px 0 rgb(0 0 0 / 25%) !Important; background-color: #faa732 !Important; background-image: -moz-linear-gradient(top,#fbb450,#f89406) !Important; background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406)) !Important; background-image: -webkit-linear-gradient(top,#fbb450,#f89406) !Important; background-image: -o-linear-gradient(top,#fbb450,#f89406) !Important; background-image: linear-gradient(to bottom,#fbb450,#f89406) !Important; background-repeat: repeat-x !Important; border-color: #f89406 #f89406 #ad6704 !Important; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25) !Important; *background-color: #f89406 !Important; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !Important; }

.btn-danger { color: #fff !Important; text-shadow: 0 -1px 0 rgb(0 0 0 / 25%) !Important; background-color: #da4f49 !Important; background-image: -moz-linear-gradient(top,#ee5f5b,#bd362f) !Important; background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f)) !Important; background-image: -webkit-linear-gradient(top,#ee5f5b,#bd362f) !Important; background-image: -o-linear-gradient(top,#ee5f5b,#bd362f) !Important; background-image: linear-gradient(to bottom,#ee5f5b,#bd362f) !Important; background-repeat: repeat-x !Important; border-color: #bd362f #bd362f #802420 !Important; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25) !Important; *background-color: #bd362f !Important; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !Important; }

[HugoCLSC]

Hi newbi here. I don't know much but wanted to create a custom UI and was using this plugin as a base. I was hoping i could get some help on how you "erased" the default UI and inserted yours. Did you do that using the uicustomizer.js file? Do you recommend usigng the mixin template from octoprint to create a new template and then customize the UI ? Thanks in advance!

[LazeMSS]

Hi newbi here. I don't know much but wanted to create a custom UI and was using this plugin as a base. I was hoping i could get some help on how you "erased" the default UI and inserted yours. Did you do that using the uicustomizer.js file? Do you recommend usigng the mixin template from octoprint to create a new template and then customize the UI ? Thanks in advance!

I built JavaScript to remove the hardcoded CSS etc.

If you want to create a completely new UI there is examples of that in the official documentation.

If you want to create a new theme I would recommend looking into the themes in my plugin as a base

[HugoCLSC]

Thanks for the reply! i'll dig into that a bit more, seems like i missed some documentation.

[darthtate]

How can you modify the following css in the advanced custom css tab?

page-container-loading{

background: linear-gradient(180deg, rgba(6,6,6,1) 0%, rgb(21 77 105) 100%); }

/ set theme /

page-container-loading-header:after {

content: "UI Customizer / Cyborg" !important; } h1#page-container-loading-header:before { content: "\f544"; font-family: "Font Awesome 5 Free"; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; position: absolute; bottom: 10vh; left: 0px; width: 100%; font-size: 2.5vw; animation: pulsate 1s ease-out; animation-iteration-count: infinite; margin-bottom: -3%; }

I am trying to make changes to the boot screen. I want to make changes to the default \f544 icon and also the content: "UI Customizer / Cyborg" areas. Can this be done in this advanced tab or not? I have figured out how to make changes to the default cyborg template to change colors etc, but want to change the boot screen.

[LazeMSS]

No sadly the custom css stuff is loaded after the loading screen - i have been consindering make it smarter so its injected into the main theme file - I will try and test that because the way the contect is being loaded has been changed in the next release

[darthtate]

No worries. Thanks for an awesome plugin!