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,7 +74,7 @@
 @import 'request_show_redesign/build_results';
 @import 'accordion-reviews-component';
 @import 'tokens';
-@import 'colors';
+@import 'subscriptions';
 
 html {
     overflow-y: scroll !important;

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

@@ -5,12 +5,12 @@ ol.breadcrumb {
     font-size: 0.9rem;
 
     &.active {
-      color: $gray-700;
+      color: $breadcrumbs-item-text-color;
       font-weight: bold;
     }
 
     & a {
-      color: $gray-700;
+      color: $breadcrumbs-item-text-color;
     }
   }
-}
+}

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

@@ -18,6 +18,10 @@
   }
 }
 
+.buildresult_repo_header {
+  background-color: var(--bs-secondary-bg);
+}
+
 .custom-label {
   cursor: pointer;
   color: $link-color;
@@ -43,7 +47,7 @@
   @extend .d-flex;
   @extend .flex-column;
   position: relative;
-  background-color: #eeeeee;
+  background-color: var(--bs-secondary-bg);
   max-height: 100vh;
   width: 100%;
   font-size: 90%;
@@ -66,6 +70,8 @@
   .build-info-content {
     @extend .py-2;
     @extend .px-3;
+    padding-top: 0.4rem !important;
+    padding-bottom: 0.4rem !important;
     overflow-y: hidden;
   }
 

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

@@ -3,7 +3,7 @@
   &.CodeMirror {
     font-family: $font-family-monospace, monospace;
     background: $card-bg;
-    color: $body-color;
+    color: var(--bs-body-color);
     line-height: 1.2;
   }
 
@@ -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/coderay.scss

@@ -1,6 +1,6 @@
 .CodeRay, .CodeRay .change {
   background: $card-bg;
-  color: $body-color;
+  color: var(--bs-body-color);
 }
 .CodeRay pre { margin: 0 }
 span.CodeRay { white-space: pre }

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

@@ -1,8 +1,14 @@
-.bg-gray-800 {
-  background-color: $gray-800;
-}
-
 .text-bg-dismissed {
   color: $white;
   background-color: $gray-500;
 }
+
+$navbar-themed-bg: $gray-800;
+$breadcrumbs-item-text-color: $gray-700;
+
+// Dark theme overrides
+@include color-mode(dark)  {
+  $breadcrumbs-item-text-color: $gray-400;
+  $navbar-themed-bg: #121212;
+}
+

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

@@ -0,0 +1,12 @@
+
+[data-bs-theme="light"] {
+  .editor-bg {
+    background-color: var(--bs-light);
+  }
+}
+
+[data-bs-theme="dark"] {
+  .editor-bg {
+    background-color: var(--bs-dark-bg-subtle);
+  }
+}

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

@@ -3,6 +3,6 @@
 
   &.active{
     @extend .card;
-    background: #ebfdc7;
+    background: var(--bs-tertiary-bg);
   }
 }

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

@@ -1,9 +1,8 @@
 .modal {
   font-size: var(--bs-body-font-size);
-  color: $body-color;
+  color: var(--bs-body-color);
 
   .modal-header h5 {
-    color: $body-color;
     overflow-x: hidden;
     overflow-wrap: break-word;
   }

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

@@ -48,6 +48,11 @@
   }
 }
 
+.navbar-themed-colors {
+  @extend .border-gray-500;
+  background-color: $navbar-themed-bg;
+}
+
 @include media-breakpoint-up(md) {
   .navbar-dark.navbar-collapse {
     &.watchlist-collapse, &.places-collapse, &.actions-collapse {

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

@@ -28,3 +28,13 @@ details[open].repository-path {
     }
   }
 }
+
+.flags_repo_header {
+  @extend .table-light;
+}
+
+@include color-mode(dark) {
+  .flags_repo_header {
+    --bs-table-bg: var(--bs-dark-bg-subtle);
+  }
+}

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

@@ -0,0 +1,3 @@
+.subscriptions-card-bg {
+  background-color: var(--bs-secondary-bg);
+}

src/api/app/controllers/webui/users_controller.rb

@@ -179,7 +179,7 @@ def account_edit_link
   end
 
   def assign_common_user_attributes
-    @displayed_user.assign_attributes(params[:user].slice(:biography).permit!)
+    @displayed_user.assign_attributes(params[:user].slice(:biography, :color_theme).permit!)
     @displayed_user.assign_attributes(params[:user].slice(:realname, :email).permit!) unless @account_edit_link
     @displayed_user.toggle(:in_beta) if params[:user][:in_beta]
   end

src/api/app/models/unregistered_user.rb

@@ -72,6 +72,7 @@ def self.register(opts)
 #  id                            :integer          not null, primary key
 #  adminnote                     :text(65535)
 #  biography                     :string(255)      default("")
+#  color_theme                   :integer          default("system"), not null
 #  deprecated_password           :string(255)      indexed
 #  deprecated_password_hash_type :string(255)
 #  deprecated_password_salt      :string(255)

src/api/app/models/user.rb

@@ -10,6 +10,9 @@ class User < ApplicationRecord
   NOBODY_LOGIN = '_nobody_'.freeze
   MAX_BIOGRAPHY_LENGTH_ALLOWED = 250
 
+  COLOR_THEMES = ['system', 'light', 'dark'].freeze
+  enum :color_theme, COLOR_THEMES
+
   # disable validations because there can be users which don't have a bcrypt
   # password yet. this is for backwards compatibility
   has_secure_password validations: false
@@ -121,6 +124,7 @@ class User < ApplicationRecord
   validates :password, confirmation: true, allow_blank: true
   validates :biography, length: { maximum: MAX_BIOGRAPHY_LENGTH_ALLOWED }
   validates :rss_secret, uniqueness: true, length: { maximum: 200 }, allow_blank: true
+  validates :color_theme, inclusion: { in: COLOR_THEMES }
 
   after_create :create_home_project, :measure_create
   after_update :measure_delete
@@ -952,6 +956,7 @@ def hash_string(value)
 #  id                            :integer          not null, primary key
 #  adminnote                     :text(65535)
 #  biography                     :string(255)      default("")
+#  color_theme                   :integer          default("system"), not null
 #  deprecated_password           :string(255)      indexed
 #  deprecated_password_hash_type :string(255)
 #  deprecated_password_salt      :string(255)

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

@@ -1,4 +1,4 @@
-%nav.navbar.fixed-bottom.navbar-dark.bg-gray-800.border-top.border-gray-500.p-0
+%nav.navbar.fixed-bottom.navbar-dark.navbar-themed-colors.border-top.p-0
   %ul.nav.justify-content-center.w-100.nav-justified
     - if User.session
       %li.nav-item

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

@@ -1,4 +1,4 @@
-.navbar-collapse.navbar-dark.bg-gray-800{ class: "#{collapse_type}-collapse" }
+.navbar-collapse.navbar-dark.navbar-themed-colors{ class: "#{collapse_type}-collapse" }
   .navbar-nav
     .nav.justify-content-end.py-2
       %button.navbar-toggler{ type: 'button', 'data-toggle': collapse_type, aria: { expanded: 'false', label: "Toggle #{collapse_type}" } }

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

@@ -1,4 +1,4 @@
-.navbar-dark.bg-gray-800.border-top.border-gray-500#toggle-sidebar-button
+.navbar-dark.border-top.navbar-themed-colors#toggle-sidebar-button
   %ul.nav.flex-column.ms-auto.pt-0.text-nowrap.menu-options
     %li.nav-item
       %a.nav-link{ type: 'button' }

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

@@ -1,4 +1,4 @@
-%nav.navbar.navbar-dark.bg-gray-800.fixed-top
+%nav.navbar.navbar-dark.navbar-themed-colors.fixed-top
   .container-fluid.d-flex.flex-nowrap.justify-content-between.w-100
     = link_to(root_path, class: 'navbar-brand', alt: 'Logo') do
       = image_tag('obs-logo_small.svg')

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

@@ -1,5 +1,5 @@
 !!!
-%html{ lang: 'en' }
+%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' }
@@ -42,7 +42,7 @@
     #grid
       #top-navigation-area
         = render partial: 'layouts/webui/top_navigation'
-      .navbar-dark.bg-gray-800#left-navigation-area{ class: "#{'collapsed' if sidebar_collapsed?}" }
+      .navbar-dark.navbar-themed-colors#left-navigation-area{ class: "#{'collapsed' if sidebar_collapsed?}" }
         = render partial: 'layouts/webui/left_navigation', locals: { spider_bot: @spider_bot }
         = render partial: 'layouts/webui/left_navigation_collapse_button'
       .d-flex.flex-column#content-area
@@ -77,7 +77,7 @@
 
       -# Collapsible menu shared between top and bottom navigation
       - if User.session
-        .navbar-dark.bg-gray-800.navbar-collapse.watchlist-collapse
+        .navbar-dark.navbar-collapse.navbar-themed-colors.watchlist-collapse
           = render WatchlistComponent.new(user: User.session!,
                                           bs_request: @bs_request,
                                           package: @package,

src/api/app/views/webui/package/_buildstatus.html.haml

@@ -22,7 +22,7 @@
           repository_name = result.repository.tr('.', '_')
           expanded = repository_expanded?(collapsed_repositories, repository_name, package_name)
         - if result.repository != previous_repo
-          .d-flex.flex-row.py-1.bg-light.ps-1.ps-sm-2
+          .d-flex.flex-row.py-1.buildresult_repo_header.ps-1.ps-sm-2
             = link_to(word_break(result.repository, 22),
               project_package_repository_binaries_path(project_name: project, package_name: package, repository_name: result.repository),
               title: "Binaries for #{result.repository}")

src/api/app/views/webui/project/_buildstatus.html.haml

@@ -18,7 +18,7 @@
       - repository_name = repository.tr('.', '_')
       - expanded = repository_expanded?(collapsed_repositories, repository_name)
       .d-flex.flex-column
-        .d-flex.flex-row.py-1.bg-light.ps-1.ps-sm-2
+        .d-flex.flex-row.py-1.buildresult_repo_header.ps-1.ps-sm-2
           = link_to(word_break(repository, 12),
             project_repository_state_path(project: project.name, repository: repository),
             title: "Repository #{repository}")

src/api/app/views/webui/shared/_editor.html.haml

@@ -7,7 +7,7 @@
 
 %div{ class: "card #{'editable' unless style[:read_only]}" }
   - unless style[:read_only]
-    .sticky-top.bg-light{ id: "top_#{uid}" }
+    .sticky-top.editor-bg{ id: "top_#{uid}" }
       .card-header
         .d-flex.justify-content-between
           .btn-group.ps-2
@@ -32,7 +32,7 @@
   = text_area_tag("editor_#{uid}", text, cols: '0', rows: '0', data: data, class: 'form-control')
 
   - unless style[:read_only]
-    .bg-light{ id: "bottom_#{uid}" }
+    .editor-bg{ id: "bottom_#{uid}" }
       .card-footer
         .d-flex.justify-content-end
           %p

src/api/app/views/webui/shared/_repositories_flag_table.html.haml

@@ -1,6 +1,6 @@
 .table-responsive
   %table.table.table-hover.table-sm{ id: table_id }
-    %thead.table-light
+    %thead.flags_repo_header
       %tr
         %th.w-auto Repository
         %th.w-auto.text-center All

src/api/app/views/webui/subscriptions/_subscriptions_form.html.haml

@@ -1,6 +1,6 @@
 - i = 0
 - subscriptions_form.subscriptions_by_event.each do |subscription|
-  .card.bg-light.mb-2
+  .card.subscriptions-card-bg.mb-2
     .card-body
       %h5.card-title= subscription.event_class.description
       %p.card-text= Event::Base::EXPLANATION_FOR_NOTIFICATIONS[subscription.event_class.to_s]

src/api/app/views/webui/user/_edit_account_form.html.haml

@@ -18,6 +18,9 @@
       %small.form-text#bio-chars-counter
   .mb-3
     = f.text_field(:email, required: true, email: true, placeholder: 'Email', readonly: behind_proxy, class: 'form-control')
+  .mb-3
+    = f.label :color_theme, "Theme"
+    = f.select(:color_theme, options_for_select(User::COLOR_THEMES), {}, class: 'form-select')
   .mb-3
   - if behind_proxy
     %p

src/api/vendor/assets/stylesheets/tokenfield.scss

@@ -34,7 +34,7 @@
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   box-sizing: border-box;
-  background: #fff;
+  background: var(--bs-body-bg);
   font-family: sans-serif;
   font-size: 14px;
   line-height: 20px;