userstyles/src/portainer.user.css

/* ==UserStyle==
@name           Gruvbox for Portainer
@namespace      git.m3.fyi/Marsn3
@version        1.0.1
@description    A dark Theme for Portainer
@author         Marsn3
@homepageURL https://git.m3.fyi/Marsn3/userstyles
@updateURL https://git.m3.fyi/Marsn3/userstyles/~raw/main/src/portainer.user.css
@license MIT
==/UserStyle== */

@-moz-document domain("portainer.m3.fyi") {
  /*~~~~~ Base Colors ~~~~~*/
  :root {
    --bg-body-color: var(--bg);
    --bg-panel-body-color: var(--bg1);
    --text-body-color: var(--fg);
    --border-panel-color: var(--bg2);
    --text-muted-color: var(--fg3);
    --grey-26: var(--fg3);
    --grey-38: var(--fg3);
    --grey-3: var(--bg2);
    --grey-2: var(--bg);
    --grey-8: var(--fg4);
    --grey-1: var(--bg1);
    --bg-inputbox: var(--bg3);
    --text-form-control-color: var(--fg);
    --border-form-control-color: var(--bg4);
    --border-searchbar: var(--bg4);
    --white-color: var(--fg);
    --border-blocklist: var(--bg4);
    --ui-success-6: var(--green);
    --ui-success-7: var(--green);
    --ui-error-9: var(--red);
    --bg-codemirror-color: var(--bg);
    --text-codemirror-color: var(--fg);
    --bg-sidebar-nav-color: var(--bg);
    --border-sidebar-color: var(--bg2);
    --ui-white: var(--fg);
    --text-cm-default-color: var(--orange);
    --text-cm-string-color: var(--green);
  }
  .CodeMirror-linenumber {
    color: var(--fg3);
  }
  .label-warning {
    background-color: var(--yellow);
  }
  .cm-s-default .cm-comment {
    color: var(--yellow-dim);
  }
  .label-primary,
  .label-info {
    background-color: var(--blue);
  }
  .text-warning:is([theme="dark"] *) {
    color: var(--orange);
  }
  .widget .widget-body table thead th .table-filter {
    color: var(--fg3);
  }
  .th-dark\:bg-gray-warm-11:is([theme="dark"] *) {
    background-color: var(--bg3);
  }
  .border-green-3,
  .border-gray-5 {
    border-color: var(--bg3) !important;
  }
  .text-gray-5 {
    color: var(--fg2);
  }
  .th-dark\:hover\:bg-gray-10:hover:is([theme="dark"] *) {
    background-color: var(--bg1);
  }
  .th-dark\:bg-gray-iron-10:is([theme="dark"] *),
  .th-dark\:hover\:bg-gray-true-9:hover:is([theme="dark"] *) {
    background-color: var(--bg2);
  }
  .bg-green-2,
  .th-dark\:bg-gray-true-8:is([theme="dark"] *) {
    background-color: var(--bg3);
  }
  .text-gray-6,
  .\!text-gray-6,
  .form-section-title:is([theme="dark"] *) {
    color: var(--fg3) !important;
  }
  .text-gray-3,
  .text-white {
    color: var(--fg);
  }
  .text-green-7,
  .\!text-green-7,
  .btn.btn-link:is([theme="dark"] *),
  .th-dark\:text-blue-7:is([theme="dark"] *) {
    color: var(--green) !important;
  }
  .icon-orange,
  .icon-warning {
    color: var(--yellow) !important;
  }
  .text-gray-7 {
    color: var(--fg2) !important;
  }
  .btn.btn-dangerlight:is([theme="dark"] *),
  .btn-danger {
    background-color: var(--red) !important;
    color: var(--fg) !important;
    border-color: var(--red-dim) !important;
  }
  .btn-primary {
    background-color: var(--green) !important;
    color: var(--fg) !important;
    border-color: var(--green-dim) !important;
  }
  input::placeholder,
  textarea::placeholder,
  .portainer-selector__placeholder {
    color: var(--fg4) !important;
  }
  a.hyperlink:hover,
  a:focus,
  a:hover {
    color: var(--fg2) !important;
  }
  .form-control:focus {
    border-color: var(--green);
    box-shadow: inset 0 1px 1px rgba(40, 40, 40, 0.075),
      0 0 8px rgba(184, 187, 38, 0.6);
  }
  input:checked + .slider {
    background-color: var(--green) !important;
  }
  .th-dark\:bg-blue-3:is([theme="dark"] *) {
    background-color: var(--blue);
  }
  .th-dark\:text-green-4:is([theme="dark"] *) {
    color: var(--fg);
  }
  .th-dark\:bg-green-4:is([theme="dark"] *) {
    background-color: var(--green);
  }
  .icon {
    filter: var(--filter-reset) var(--filter-fg);
    -webkit-filter: var(--filter-reset) var(--filter-fg);
  }
  .motd-body,
  .be-indicator,
  .business,
  li[aria-label="Authentication logs"],
  #sideview > sidebar > div > button,
  #sideview > sidebar > div > nav > div.flex > div > div {
    display: none;
  }
  .th-dark\:bg-green-3\/30:is([theme="dark"] *) {
    background-color: var(--blue-dim);
  }
  img[alt="docker endpoint"],
  g[clip-path="url(#portainer_logo_svg__a)"],
  path[fill="#0091E2"] {
    filter: var(--filter-reset) var(--filter-blue);
    -webkit-filter: var(--filter-reset) var(--filter-blue);
  }
  .app-react-components-datatables-TableHeaderSortIcons-module__sort-icon,
  .portainer-selector__indicator,
  .searchIcon {
    filter: var(--filter-reset) var(--filter-fg2);
    -webkit-filter: var(--filter-reset) var(--filter-fg2);
  }
  a,
  a.hyperlink {
    color: var(--green);
  }
  .btn.btn-default:is([theme="dark"] *),
  .btn.btn-light:is([theme="dark"] *) {
    color: var(--fg) !important;
    background-color: var(--bg3);
    border-color: var(--bg4);
  }
  .th-dark\:text-white:is([theme="dark"] *),
  .control-label:is([theme="dark"] *) {
    color: var(--fg);
  }
  .widget .widget-icon:is([theme="dark"] *) {
    border: none;
    background-color: var(--bg4);
    color: var(--fg);
  }
  .th-dark\:hover\:bg-gray-9:hover:is([theme="dark"] *) {
    background-color: var(--bg2);
  }
}