web: add dark mode and theme selection

This adds a theme selection in the preferences in the
config modal and adds a new dark theme.

Removes the line.png image and instead uses CSS
linear-gradient that is available in all browsers
since around 2018, also fixes the 15 pixels spacing
issue that is there today.

You can select between three different themes.

Auto will use your system preference to choose either the
light or dark theme, changes dynamically based on your
system preference.

Light is the current theme.

Dark is the theme added by this patch series.

The UX this changes is that if somebody has their system
preferences set to dark, for example in Mac OS X that is
in System Settings -> Appearance -> Dark the user will
get the Zuul web UI in dark by default and same for the
opposite.

This uses a poor man's dark mode for swagger-ui
as per the comment in [1].

[1] https://github.com/swagger-api/swagger-ui/issues/5327#issuecomment-742375520

Change-Id: I01cf32f3decdb885307a76eb79d644667bbbf9a3

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;
+}