[WIP][5.0] Dark Mode support (#41409)

* Commit current status

* Some dark mode upgrades

* Fix more white things

* Dropdown support

* Normalise

* Fix RTL Background

* Playing around with more things

* Fix code style

* Remove color overrides for now and remove white offset on list groups

* More cpanel tweaks

* Fix choices

* Fix body bg

* CS

* Toolbar and quickicon improvements

* Improve tabs

* Various dropdown fixes

* Fix legend

* Toolbar button improvements

* Codestyle and media manager first pass

* Background of drag/drop area

* Move variables across to the dark vars file

Author: wilsonge

build/media_source/com_installer/css/installer.css

@@ -14,7 +14,7 @@
 }
 
 #dragarea {
-  background-color: #fafbfc;
+  background-color: var(--body-bg);
   border: 1px dashed #999;
   box-sizing: border-box;
   padding: 5% 0;

build/media_source/com_media/scss/_variables.scss

@@ -11,7 +11,7 @@ $col-gutter-width:                  $gutter-width;
 $col-box-shadow:                    0 2px 10px -8px var(--template-bg-dark-50);
 
 // Sidebar
-$sidebar-drive-bg:                  #fff;
+$sidebar-drive-bg:                  var(--media-manager-content-bg, #fff);
 $sidebar-tree-line-color:           $border-color;
 $sidebar-tree-icon-color:           #aaa;
 $sidebar-tree-line-height:          26px;
@@ -21,7 +21,7 @@ $sidebar-active-icon-color:         $highlight-color;
 
 // Toolbar
 $toolbar-height:                    46px;
-$toolbar-bg:                        #fff;
+$toolbar-bg:                        var(--media-manager-content-bg, #fff);
 $toolbar-icon-width:                50px;
 $toolbar-icon-color:                lighten(#2a69b8,30%);
 $toolbar-icon-bg-hover:             #f0f0f0;
@@ -30,7 +30,7 @@ $toolbar-loader-height:             2px;
 
 // Breadcrumbs
 $breadcrumbs-bg:                    var(--template-bg-dark-3);
-$breadcrumbs-current-bg:            #fff;
+$breadcrumbs-current-bg:            var(--media-manager-content-bg, #fff);
 
 // Media Browser Grid
 $grid-gutter-width:                 $col-gutter-width;
@@ -59,9 +59,10 @@ $table-item-icon-bg-selected:       #006898;
 $table-item-bg-hover:               rgba(0, 0, 0, .03);
 
 // Media Info bar
-$info-bg:                           var(--template-bg-dark-3);
-$info-title-bg:                     var(--template-bg-dark-5);
+$info-bg:                           var(--media-manager-overlay-bg, var(--template-bg-dark-3));
+$info-title-bg:                     var(--media-manager-overlay-header-bg, var(--template-bg-dark-5));
 $info-dt-width:                     33.33333%;
+$info-dt-color:                     var(--media-manager-infobar-dt-color, rgba(0, 0, 0, .54));
 $info-dd-width:                     66.66667%;
 $info-close-color:                  var(--template-bg-dark-60);
 $info-close-color-hover:            var(--template-bg-dark-40);

build/media_source/com_media/scss/components/_layout.scss

@@ -3,7 +3,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: 1rem;
-  background-color: #fff;
+  background-color: var(--media-manager-content-bg, #fff);
   border-radius: $border-radius;
   box-shadow: $col-box-shadow;
 

build/media_source/com_media/scss/components/_media-browser.scss

@@ -127,7 +127,7 @@
     z-index: 1;
     width: max-content;
     min-width: 100%;
-    background-color: var(--template-bg-dark-3);
+    background-color: var(--media-manager-overlay-bg, var(--template-bg-dark-3));
     border: 1px solid hsl(var(--hue), 35%, 95%);
     border-radius: .25rem;
     box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);

build/media_source/com_media/scss/components/_media-infobar.scss

@@ -43,7 +43,7 @@ $fa-css-prefix:    fa;
   }
   dt {
     font-weight: normal;
-    color: rgba(0, 0, 0, .54);
+    color: $info-dt-color;
   }
 }
 

build/media_source/templates/administrator/atum/images/select-bg-dark.svg

@@ -0,0 +1,15 @@
+$atum-colors-dark: (
+  template-quickicon-color:        var(--template-bg-dark-5),
+  focus-shadow:                    var(--gray-800),
+  media-manager-overlay-bg:        var(--template-bg-dark-90),
+  media-manager-infobar-dt-color:  rgba(255, 255, 255, .54),
+  media-manager-overlay-header-bg: var(--template-bg-dark-80),
+) !default;
+
+$link-hover-color-dark: lighten($light-blue, 20%);
+
+$form-select-bg-dark:              var(--template-bg-dark);
+$form-select-background-dark:      $form-select-indicator-dark no-repeat right center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
+$form-select-background-rtl-dark:  $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size; // Used so we can have multiple background elements (e.g. arrow and feedback icon)
+$form-select-indicator-dark:       url("../images/select-bg-dark.svg");
+$form-select-indicator-rtl-dark:   url("../images/select-bg-rtl-dark.svg");

build/media_source/templates/administrator/atum/images/select-bg-rtl-dark.svg

@@ -1,8 +1,8 @@
 // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
 $prefix: "";
 
-// Disable dark mode in J4.4 - it's going to cause major b/c breaks to introduce. We will enable it in 5.0
-$enable-dark-mode:                 false;
+// Use dark mode conditionally based on media queries from the browser to match the desktop theme
+$color-mode-type: media-query;
 
 // Variables
 $white:                            #fff;
@@ -55,16 +55,19 @@ $theme-colors: (
   "action":                          $base-color,
   "error":                           $red-dark) !default;
 
+$template-background-light: #f0f4fb; //light background color, frontend dashboard background and installer body background
+
 $atum-colors: (
   template-sidebar-bg:             var(--template-bg-dark-80),
   template-sidebar-font-color:     $white,
   template-sidebar-link-color:     $white,
-  template-bg-light:               #f0f4fb, //light background color, frontend dashboard background
+  template-bg-light:               $template-background-light,
   template-link-color:             var(--link-color),
   template-text-light:             $white,
   template-text-dark:              $atum-text-dark,
   template-special-color:          $dark-blue,
   template-contrast:               $light-blue,
+  template-quickicon-color:        hsl(var(--hue), 30%, 40%),
   template-bg-dark:                hsl(var(--hue), 40%, 20%),
   template-bg-dark-3:              hsl(var(--hue), 40%, 97%),
   template-bg-dark-5:              hsl(var(--hue), 40%, 95%),
@@ -80,7 +83,11 @@ $atum-colors: (
   template-bg-dark-70:             hsl(var(--hue), 40%, 30%),
   template-bg-dark-75:             hsl(var(--hue), 40%, 25%),
   template-bg-dark-80:             hsl(var(--hue), 40%, 20%),
-  template-bg-dark-90:             hsl(var(--hue), 40%, 10%)
+  template-bg-dark-90:             hsl(var(--hue), 40%, 10%),
+  media-manager-overlay-header-bg: var(--template-bg-dark-5),
+  media-manager-infobar-dt-color:  rgba(0, 0, 0, .54),
+  media-manager-content-bg:        var(--body-bg),
+  media-manager-overlay-bg:        var(--template-bg-dark-3),
 );
 
 $colors: (
@@ -152,7 +159,6 @@ $extrabold-weight:                 800;
 $black-weight:                     900;
 
 // Tables
-$table-bg:                         var(--white);
 $table-cell-padding-y:             .75rem;
 $table-cell-padding-x:             1rem;
 $table-cell-padding-y-sm:          .3rem;
@@ -178,7 +184,7 @@ $state-success-bg:                 lighten($success, 58%);
 $state-success-border:             hsl(var(--hue),50%,93%);
 
 $state-info-text:                  var(--template-bg-dark-70);
-$state-info-bg:                    var(--white);
+$state-info-bg:                    var(--body-bg);
 $state-info-border:                var(--template-bg-dark-70);
 
 $state-warning-text:               darken($warning, 24%);
@@ -220,8 +226,7 @@ $treeselect-line-height:           2.2rem;
 $treeselect-indent:                40px;
 
 // List
-$list-group-bg:                    var(--white-offset);
-$list-group-border-color:          hsl(var(--hue),40%,85%);
+$list-group-border-color:          var(--template-bg-dark-15);
 $list-group-item-padding-y:        .75rem;
 
 // Buttons

build/media_source/templates/administrator/atum/scss/_variables-dark.scss

@@ -5,10 +5,19 @@
 
   &:disabled,
   &[readonly] {
-    background-color: #e8e8e8;
+    background-color: var(--gray-200);
     opacity: 1;
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      &:disabled,
+      &[readonly] {
+        background-color: var(--gray-800);
+      }
+    }
+  }
+
   &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
   &:hover:not(:disabled):not([readonly])::file-selector-button {
     background-color: var(--template-bg-dark-50);