Add dark color theme.

Users' profile provides a way to select a color theme

src/api/app/assets/javascripts/webui/application.js

@@ -16,6 +16,7 @@
 // FIXME remove jquery-ui file when we upgrade jquery-ui gem
 //= require webui/jquery-ui.min.js
 //= require bootstrap
+//= require webui/color_themes.js
 //= require cocoon
 //= require jquery.flot
 //= require jquery.flot.resize

src/api/app/assets/javascripts/webui/color_themes.js

@@ -0,0 +1,27 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getPreferredTheme = () => {
+    const userTheme = document.documentElement.getAttribute('data-bs-theme-from-user')
+    if (userTheme == "system") {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+    return userTheme
+  }
+
+  const setTheme = theme => {
+    document.documentElement.setAttribute('data-bs-theme', theme)
+  }
+
+  setTheme(getPreferredTheme())
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    setTheme(getPreferredTheme())
+  })
+})()

src/api/app/assets/stylesheets/webui/application.scss

@@ -18,6 +18,7 @@
 @import 'bootstrap_variables/sizes';
 @import 'bootstrap_variables/options';
 @import 'bootstrap';
+@import 'colors';
 @import 'bootstrap-modal';
 @import 'font-awesome';
 @import 'tokenfield';
@@ -73,8 +74,6 @@
 @import 'request_show_redesign/build_results';
 @import 'accordion-reviews-component';
 @import 'tokens';
-@import 'colors';
-@import 'editor';
 @import 'subscriptions';
 
 html {

src/api/app/assets/stylesheets/webui/bootstrap_variables/colors.scss

@@ -25,5 +25,3 @@ $link-hover-color: $green;
 $link-color: $blue;
 
 $menu-hover-color: lighten($color: $green, $amount: 10%);
-
-$darkest_gray: #121212;

src/api/app/assets/stylesheets/webui/breadcrumbs-component.scss

@@ -1,37 +1,16 @@
-[data-bs-theme="light"] {
-  ol.breadcrumb {
-    padding-top: 0.5rem;
+ol.breadcrumb {
+  padding-top: 0.5rem;
 
-    & li {
-      font-size: 0.9rem;
+  & li {
+    font-size: 0.9rem;
 
-      &.active {
-        color: $gray-700;
-        font-weight: bold;
-      }
-
-      & a {
-        color: $gray-700;
-      }
+    &.active {
+      color: $breadcrumbs-item-text-color;
+      font-weight: bold;
     }
-  }
-}
-
-[data-bs-theme="dark"] {
-  ol.breadcrumb {
-    padding-top: 0.5rem;
-
-    & li {
-      font-size: 0.9rem;
-
-      &.active {
-        color: $gray-400;
-        font-weight: bold;
-      }
 
-      & a {
-        color: $gray-400;
-      }
+    & a {
+      color: $breadcrumbs-item-text-color;
     }
   }
-}
+}

src/api/app/assets/stylesheets/webui/build-results.scss

@@ -18,16 +18,8 @@
   }
 }
 
-[data-bs-theme="light"] {
-  .buildresult_repo_header {
-    @extend .bg-light;
-  }
-}
-
-[data-bs-theme="dark"] {
-  .buildresult_repo_header {
-    background-color: var(--bs-dark-bg-subtle);
-  }
+.buildresult_repo_header {
+  background-color: var(--bs-secondary-bg);
 }
 
 .custom-label {
@@ -55,7 +47,7 @@
   @extend .d-flex;
   @extend .flex-column;
   position: relative;
-  background-color: --bs-secondary-bg;
+  background-color: var(--bs-secondary-bg);
   max-height: 100vh;
   width: 100%;
   font-size: 90%;

src/api/app/assets/stylesheets/webui/cm2/bootstrap.scss

@@ -71,3 +71,7 @@
 }
 
 .editable .cm-s-bootstrap .CodeMirror-cursor { border-left: 1px solid $body-color; }
+
+.editor-bg {
+  background-color: var(--bs-secondary-bg);
+}

src/api/app/assets/stylesheets/webui/colors.scss

@@ -2,3 +2,14 @@
   color: $white;
   background-color: $gray-500;
 }
+
+$darkest_gray: #121212;
+
+$breadcrumbs-item-text-color: $gray-700;
+
+
+// Dark theme overrides
+@include color-mode(dark)  {
+  $breadcrumbs-item-text-color: $gray-400;
+}
+

src/api/app/assets/stylesheets/webui/modals.scss

@@ -1,5 +1,6 @@
 .modal {
   font-size: var(--bs-body-font-size);
+  color: var(--bs-body-color);
 
   .modal-header h5 {
     overflow-x: hidden;

src/api/app/assets/stylesheets/webui/navbar.scss

@@ -48,13 +48,11 @@
   }
 }
 
-[data-bs-theme="light"] {
-  .navbar-dark {
-    background-color: $gray-800;
-  }
+.navbar-dark {
+  background-color: $gray-800;
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark) {
   .navbar-dark {
     background-color: $darkest_gray;
   }

src/api/app/assets/stylesheets/webui/repositories.scss

@@ -29,13 +29,11 @@ details[open].repository-path {
   }
 }
 
-[data-bs-theme="light"] {
-  .flags_repo_header {
-    @extend .table-light;
-  }
+.flags_repo_header {
+  @extend .table-light;
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark) {
   .flags_repo_header {
     --bs-table-bg: var(--bs-dark-bg-subtle);
   }

src/api/app/assets/stylesheets/webui/subscriptions.scss

@@ -1,12 +1,3 @@
-
-[data-bs-theme="light"] {
-  .subscriptions-card-bg {
-    @extend .bg-light;
-  }
-}
-
-[data-bs-theme="dark"] {
-  .subscriptions-card-bg {
-    background-color: var(--bs-dark-bg-subtle);
-  }
+.subscriptions-card-bg {
+  background-color: var(--bs-secondary-bg);
 }

src/api/app/models/user.rb

@@ -10,7 +10,7 @@ class User < ApplicationRecord
   NOBODY_LOGIN = '_nobody_'.freeze
   MAX_BIOGRAPHY_LENGTH_ALLOWED = 250
 
-  COLOR_THEMES = ['light', 'dark'].freeze
+  COLOR_THEMES = ['system', 'light', 'dark'].freeze
   enum :color_theme, COLOR_THEMES
 
   # disable validations because there can be users which don't have a bcrypt

src/api/app/views/layouts/webui/webui.html.haml

@@ -1,5 +1,5 @@
 !!!
-%html{ lang: 'en', "data-bs-theme": User.session&.color_theme || "light" }
+%html{ lang: 'en', "data-bs-theme-from-user": User.session&.color_theme || "system" }
   %head
     %meta{ content: 'charset=utf-8' }/
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }