1 files changed, 118 insertions, 6 deletions

diff --git a/web/src/index.css b/web/src/index.css
index 587804cfa..4cedc144f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -40,8 +40,18 @@ a.refresh {
 }
 
 .zuul-select-tz {
-    /* That's the color PF4 uses for the dropdown items in the navbar */
-    color: var(--pf-global--Color--dark-100);
+    /* Always use black because when using dark mode the theme will default
+       to another dark color which is hard to see on a white background */
+    color: #000;
+}
+
+.pf-theme-dark .zuul-select-tz .zuul-select-tz__option {
+    background: #222;
+    color: #fff;
+}
+
+.pf-theme-dark .zuul-select-tz .zuul-select-tz__option:hover {
+    background: #000;
 }
 
 /* Config error modal */
@@ -53,6 +63,15 @@ a.refresh {
     margin-left: var(--pf-global--spacer--md);
 }
 
+.pf-theme-dark .zuul-config-errors-title, .pf-theme-dark .zuul-config-errors-count {
+    color: #fff !important;
+}
+
+.pf-theme-dark .pf-c-notification-drawer pre {
+    background: #000;
+    color: #fff;
+}
+
 /*
  * Build Lists and Tables
  */
@@ -66,6 +85,10 @@ a.refresh {
     font-weight: bold;
 }
 
+.zuul-menu-dropdown-toggle {
+    background: transparent !important;
+}
+
 .zuul-menu-dropdown-toggle:before {
     content: none !important;
 }
@@ -167,6 +190,11 @@ a.refresh {
     margin-bottom: 10px;
 }
 
+.zuul-change-dark {
+    margin-bottom: 10px;
+    border-color: #222;
+}
+
 .zuul-change-id {
     float: right;
 }
@@ -210,6 +238,13 @@ a.refresh {
     padding: 2px 8px;
 }
 
+.zuul-change-job-dark {
+    padding: 2px 8px;
+    background: #000;
+    color: #ccc;
+    border: 1px solid #222;
+}
+
 /* Force_break_very_long_non_hyphenated_repo_names */
 .change_project {
     word-break: break-all;
@@ -233,6 +268,21 @@ a.refresh {
     padding: 8px 12px;
 }
 
+.zuul-patchset-header-dark {
+    font-size: small;
+    padding: 8px 12px;
+    background: #000 !important;
+    color: #ccc !important;
+    border-color: #222 !important;
+}
+
+.zuul-patchset-body {
+}
+
+.zuul-patchset-body-dark {
+    border-top: 1px solid #000;
+}
+
 .zuul-log-output {
     color: black;
 }
@@ -283,7 +333,7 @@ a.refresh {
 }
 
 .zuul-build-status {
-    background: white;
+    background: transparent;
     font-size: 16px;
 }
 
@@ -292,14 +342,23 @@ a.refresh {
 }
 
 .zuul-change-row-line {
-    background-image: url('images/line.png');
-    background-repeat: 'repeat-y';
+    background: linear-gradient(#000, #000) no-repeat center/2px 100%;
+    background-position-y: 15px;
+}
+
+.zuul-change-row-line-dark {
+    background: linear-gradient(#fff, #fff) no-repeat center/2px 100%;
+    background-position-y: 15px;
 }
 
 .progress-bar-animated {
     animation: progress-bar-stripes 1s linear infinite;
 }
 
+.progress-dark {
+    background: #333 !important;
+}
+
 /* Job Tree View group gap */
 div.tree-view-container ul.list-group {
   margin: 0px 0px;
@@ -325,6 +384,10 @@ pre.version {
     background-color: var(--pf-global--palette--red-50) !important;
 }
 
+.pf-theme-dark .zuul-console-task-failed {
+    background-color: var(--pf-global--palette--red-300) !important;
+}
+
 .zuul-console .pf-c-data-list__expandable-content {
     border: none;
 }
@@ -344,11 +407,21 @@ pre.version {
     border-radius: 5px;
 }
 
-.zuul-console .pf-c-data-list__item:hover
+.zuul-console-light .pf-c-data-list__item:hover
 {
     background: var(--pf-global--palette--blue-50);
 }
 
+.zuul-console-dark .pf-c-data-list__item:hover
+{
+    background: var(--pf-global--BackgroundColor--200);
+}
+
+.zuul-console-dark pre {
+    background: #000;
+    color: #fff;
+}
+
 .zuul-console .pf-c-data-list__item:hover::before
 {
     background: var(--pf-global--active-color--400);
@@ -451,3 +524,42 @@ details.foldable[open] summary::before {
 .zuul-task-summary-failed.pf-c-card {
     background: var(--pf-global--palette--red-50);
 }
+
+.pf-theme-dark .pf-c-nav__link {
+  color: #fff !important;
+}
+
+.pf-theme-dark .pf-c-modal-box__title-text, .pf-theme-dark .pf-c-modal-box__body {
+  color: #fff !important;
+}
+
+.pf-theme-dark .swagger-ui {
+  filter: invert(88%) hue-rotate(180deg);
+}
+
+.pf-theme-dark .swagger-ui .highlight-code {
+  filter: invert(100%) hue-rotate(180deg);
+}
+
+.zuul-table-dark .list-group-item {
+  background-color: #333 !important;
+}
+
+.zuul-build-output {
+}
+
+.zuul-build-output-dark {
+  background-color: #000 !important;
+  color: #fff;
+}
+
+.pf-theme-dark .zuul-log-sev-0 {
+    color: #ccc !important;
+}
+.pf-theme-dark .zuul-log-sev-1 {
+    color: #ccc !important;
+}
+
+.pf-theme-dark .pf-c-empty-state {
+    color: #fff !important;
+}