[DOCS] How do you add custom themes? #152

NovaViper · 2021-05-05T04:14:45Z

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 · 2021-05-05T05:57:50Z

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 · 2021-05-05T19:26:30Z

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 · 2021-05-06T04:45:43Z

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 · 2021-05-06T06:11:03Z

We tried that, it didn't work :(

NovaViper · 2021-05-07T01:22:49Z

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 · 2021-05-07T01:57:17Z

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 · 2021-05-08T20:43:30Z

@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 · 2021-05-08T22:01:50Z

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.

screencast.2021-05-08.15-03-11.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 · 2021-05-13T10:46:30Z

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 · 2021-07-02T19:19:04Z

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 · 2021-07-02T20:39:16Z

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 · 2021-07-02T20:46:13Z

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

darthtate · 2022-12-30T09:03:53Z

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 · 2022-12-30T09:48:35Z

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 · 2022-12-31T02:53:24Z

No worries. Thanks for an awesome plugin!

NovaViper mentioned this issue May 5, 2021

Beta test Dracula theme LazeMSS/OctoPrint-UICustomizerThemes#18

Open

LazeMSS added the documentation Improvements or additions to documentation label May 8, 2021

LazeMSS changed the title ~~How do you add custom themes?~~ [DOCS] How do you add custom themes? May 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DOCS] How do you add custom themes? #152

[DOCS] How do you add custom themes? #152

NovaViper commented May 5, 2021 •

edited

Loading

LazeMSS commented May 5, 2021

KenLucke commented May 5, 2021

LazeMSS commented May 6, 2021

KenLucke commented May 6, 2021

NovaViper commented May 7, 2021

KenLucke commented May 7, 2021

LazeMSS commented May 8, 2021

KenLucke commented May 8, 2021 •

edited

Loading

APEbbers commented May 13, 2021 •

edited

Loading

HugoCLSC commented Jul 2, 2021 •

edited

Loading

LazeMSS commented Jul 2, 2021

HugoCLSC commented Jul 2, 2021

darthtate commented Dec 30, 2022

LazeMSS commented Dec 30, 2022

darthtate commented Dec 31, 2022

[DOCS] How do you add custom themes? #152

[DOCS] How do you add custom themes? #152

Comments

NovaViper commented May 5, 2021 • edited Loading

LazeMSS commented May 5, 2021

KenLucke commented May 5, 2021

LazeMSS commented May 6, 2021

KenLucke commented May 6, 2021

NovaViper commented May 7, 2021

KenLucke commented May 7, 2021

LazeMSS commented May 8, 2021

KenLucke commented May 8, 2021 • edited Loading

APEbbers commented May 13, 2021 • edited Loading

HugoCLSC commented Jul 2, 2021 • edited Loading

LazeMSS commented Jul 2, 2021

HugoCLSC commented Jul 2, 2021

darthtate commented Dec 30, 2022

LazeMSS commented Dec 30, 2022

darthtate commented Dec 31, 2022

NovaViper commented May 5, 2021 •

edited

Loading

KenLucke commented May 8, 2021 •

edited

Loading

APEbbers commented May 13, 2021 •

edited

Loading

HugoCLSC commented Jul 2, 2021 •

edited

Loading