From 17c64c132a5d8a4d76f0dca6241fe5b944beb149 Mon Sep 17 00:00:00 2001
From: Mars Niermann <mars@mniermann.de>
Date: Wed, 29 Mar 2023 17:36:53 +0200
Subject: [PATCH] Add Gruvbox dark theme for Portainer authored by Marsn3

---
 src/portainer.user.css | 190 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 src/portainer.user.css

diff --git a/src/portainer.user.css b/src/portainer.user.css
new file mode 100644
index 0000000..4f44e24
--- /dev/null
+++ b/src/portainer.user.css
@@ -0,0 +1,190 @@
+/* ==UserStyle==
+@name           Gruvbox for Portainer
+@namespace      git.m3.fyi/Marsn3
+@version        1.0.0
+@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);
+  }
+
+  .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);
+  }
+}