joomla · MacJoom · Oct 29, 2023 · Oct 29, 2023 · Oct 30, 2023 · Oct 30, 2023
diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
@@ -1,6 +1,103 @@
 $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),
+  media-manager-disk-name-color:   var(--template-text-light),
+  success:                         #467d53,
+  danger:                          #c62a25,
+  warning:                         #996808,
+  dark-mode-text-light:            #f7f7f7,
+  sidebar-bg:                      hsl(var(--hue), 37.8%, 8.63%),
+  template-sidebar-bg:             hsl(var(--hue), 37.8%, 8.63%),
+
+  // assuming hue 214
+  body-bg:                         hsl(var(--hue), 17%, 13.3%),
+  main-bg:                         var(--body-bg),
+  sidebar-accent-bg:               hsl(var(--hue), 66.11%, 44.12%),
+  template-bg-dark:                hsl(var(--hue), 55.3%, 10.8%),
+  template-quickicon-bg:           hsl(var(--hue), 6.7%, 29.8%),
+  template-quickicon-bg-hvr:       hsl(var(--hue), 6.7%, 44.12%),
+
+  // not clean, but there are too many elements using it...
+  //template-bg-dark-60:             hsl(var(--hue), 62.33%, 15.09%),
+  //template-bg-dark-65:             var(--sidebar-accent-bg),
+  //template-bg-dark-70:             var(--sidebar-bg),
+
+  //admin
+  admin-background:                var(--body-bg),
+  options-form-color:              var(--template-text-light),
+  options-form-bg:                 hsl(var(--hue), 5%, 34%),
+  options-form-border:             1px solid var(--template-bg-dark-80),
+  options-form-legend-color:       var(--template-text-light),
+  options-form-legend-bg:          var(--admin-background),
+
+  form-control-bg:                 var(--admin-background),
+  form-control-bg-disabled:        var(--gray-800),
+
+  // quickicons
+  quickicons-bg:                   transparent,
+  quickicon-border:                none,
+  quickicon-border-radius:         unset,
+  quickicon-linkadd-bg:            hsl(var(--hue), 5%, 34%),
+  quickicon-linkadd-color:         #479a59,
+
+  // modules
+  new-modules-color:               var(--template-quickicon-color),
+  new-modules-bg:                  var(--template-bg-dark-65),
+  new-modules-bg-hvr:              var(--template-bg-dark),
+  new-modules-icon-color:          var(--template-bg-dark-80),
+  new-modules-icon-color-hvr:      var(--template-quickicon-color),
+  new-module-color:                var(--dark-mode-text-light),
+  new-module-bg:                   var(--bg-color),
+  new-module-border:               none,
+  new-module-link-bg:              rgba(255, 255, 255, 0.05),
+  new-module-link-span:            var(--icon-color),
+  new-module-link-hvr:             var(--bg-color-hvr),
+  new-module-link-span-hvr:        var(--icon-color-hvr),
+
+  // sidebar wrapper
+  sidebarwrapper-bg:               var(--template-sidebar-bg),
+
+  // header-content
+  header-bg:                          hsl(var(--hue), 59.05%, 44.12%),
+  header-item-content-bg:             var(--header-bg),
+  header-item-content-bg-hvr:         hsl(var(--hue), 43.4%, 50.19%),
+  header-item-content-border-radius:  4px,
+  header-item-content-jversion-color: var(--dark-mode-text-light),
+  header-item-content-jversion-bg:    transparent,
+  header-logo-bg:                     var(--body-bg),
+
+
+  // table:
+  table-border-top-nfc:            1px solid #969696,
+  table-thead-a-color:             hsl(214, 94.9%, 55.29%),
+
+  // card
+  card-bg-dark:                    hsl(214,10%,22%),
+  card-header-color:               var(--dark-mode-text-light),
+  card-header-bg:                  var(--card-bg-dark),
+  card-bg:                         var(--card-bg-dark),
+  card-body-bg:                    var(--card-bg-dark),
+  main-card-bg:                    var(--card-bg-dark),
+
+  //cpanel
+  module-actions-color:            var(--body-color),
+
+  //turn off shadow in dark mode
+  atum-box-shadow:                 none,
+  dropdown-box-shadow:             none,
+  quickicon-box-shadow-success:    none,
+  quickicon-box-shadow-danger:     none,
+  quickicon-box-shadow-warning:    none,
+  login-box-shadow:                none,
+  login-focus-box-shadow:          none,
+  modal-btn-box-shadow:            none,
+  modal-joomla-dialog-box-shadow:  none,
+  form-aria-grabbed-box-shadow:    none,
+  choices__button_joomla-focus-box-shadow: none,
+  joomla-tab-accordion-box-shadow: none,
 ) !default;
 
 $link-hover-color-dark: lighten($light-blue, 20%);

diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -4,6 +4,9 @@ $prefix: "";
 // Use dark mode conditionally based on media queries from the browser to match the desktop theme
 $color-mode-type: media-query;
 
+// Enable dark mode in J5.0
+$enable-dark-mode: true;
+
 // Variables
 $white:                            #fff;
 $whiteoffset:                      #fefefe;
@@ -84,6 +87,78 @@ $atum-colors: (
   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%),
+  form-control-bg:                 unset,
+  form-control-bg-disabled:        var(--gray-200),
+
+  // quickicons
+  quickicons-bg:                   var(--white),
+  quickicon-color:                 var(--template-quickicon-color),
+  quickicon-border:                1px solid hsl(var(--hue), 50%, 93%),
+  quickicon-border-radius:         4px,
+  quickicon-linkadd-bg:            hsl(var(--hue), 50%, 93%),
+  quickicon-linkadd-color:         var(--template-quickicon-color),
+
+  // modules
+  new-modules-color:               var(--template-quickicon-color),
+  new-modules-bg:                  hsl(var(--hue), 60%, 97%),
+  new-modules-bg-hvr:              var(--template-bg-dark),
+  new-modules-icon-color:          var(--template-quickicon-color),
+  new-modules-icon-color-hvr:      hsl(var(--hue), 50%, 93%),
+  new-module-color:                var(--text-color),
+  new-module-bg:                   var(--bg-color),
+  new-module-border:               1px solid hsl(var(--hue), 50%, 93%),
+  new-module-link-bg:              hsl(var(--hue), 50%, 93%),
+  new-module-link-span:            var(--icon-color),
+  new-module-link-hvr:             var(--bg-color-hvr),
+  new-module-link-span-hvr:        var(--icon-color-hvr),
+
+  // sidebar wrapper
+  sidebarwrapper-bg:               var(--template-sidebar-bg),
+
+  // header-content
+  header-item-content-bg:             var(--template-bg-dark-60),
+  header-item-content-bg-hvr:         var(--template-bg-dark-50),
+  header-item-content-border-radius:  22px,
+  header-item-content-jversion-color: var(--bluegray),
+  header-item-content-jversion-bg:    transparent,
+  header-logo-bg:                     var(--template-bg-dark-70),
+
+
+// table
+  table-border-top-nfc:            2px solid #dee2e6,
+  table-thead-a-color:             var(--template-link-color),
+
+  // card
+  card-header-color:               var(--template-bg-dark),
+  card-bg:                         hsla(0, 0%, 100%, .7),
+  card-header-bg:                  var(--card-bg),
+  card-body-bg:                    var(--template-bg-dark-70),
+  main-card-bg:                    var(--body-bg),
+
+  //cpanel
+  module-actions-color:            var(--body-color),
+
+  // box-shadow:
+  atum-box-shadow:                 0 2px 10px -8px var(--template-bg-dark-50),
+  dropdown-box-shadow:             0 1px 1px rgba($black, .15),
+  quickicon-box-shadow-success:    0 0 3px 0 var(--success),
+  quickicon-box-shadow-danger:     0 0 3px 0 var(--danger),
+  quickicon-box-shadow-warning:    0 0 3px 0 var(--warning),
+
+  login-box-shadow:                0 4px 20px -10px var(--template-bg-dark-50),
+  login-focus-box-shadow:          inset 0 0 1px 1px var(--template-contrast),
+  modal-btn-box-shadow:            1px 1px 1px 0 rgba(0, 0, 0, .25),
+  modal-joomla-dialog-box-shadow:  0 .5rem 1rem rgba(0, 0, 0, .15),
+  form-aria-grabbed-box-shadow:    0 0 2px 1px var(--template-bg-dark),
+  choices__button_joomla-focus-box-shadow: 0 0 0 2px #00bcd4,
+  joomla-tab-accordion-box-shadow: (0 1px $white inset, 0 0 3px rgba(0, 0, 0, .04)),
+  admin-background:                var(--body-bg),
+  options-form-color:              var(--template-text-dark),
+  options-form-bg:                 unset,
+  options-form-border:             1px solid var(--template-bg-dark-20),
+  options-form-legend-color:       var(--template-text-dark),
+  options-form-legend-bg:          var(--admin-background),
+
 );
 
 $colors: (
@@ -110,8 +185,13 @@ $alert-border-level:               0;
 $alert-color-level:                0;
 
 // Global
-$atum-box-shadow:                  0 2px 10px -8px var(--template-bg-dark-50);
+$atum-box-shadow:                  var(--atum-box-shadow);
 $btn-disabled-opacity:             .4;
+$admin-background:                 var(--admin-background);
+
+// Login
+$login-box-shadow:                 var(--login-box-shadow);
+$login-focus-box-shadow:           var(--login-focus-box-shadow);
 
 // Toolbar
 $atum-toolbar-line-height:         2.45rem;
@@ -121,6 +201,7 @@ $sidebar-width:                    18rem;
 $sidebar-width-login:              28.75rem;
 $sidebar-width-closed:             3rem;
 $main-brand-height:                3rem;
+$sidebarwrapper-bg:                var(--sidebarwrapper-bg);
 
 // Fonts
 $font-family-sans-serif:           "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
@@ -161,10 +242,22 @@ $table-cell-padding-x:             1rem;
 $table-cell-padding-y-sm:          .3rem;
 $table-cell-padding-x-sm:          .3rem;
 $table-group-separator-color:      $gray-300;
+$table-border-top-nfc:             var(--table-border-top-nfc);
+$table-thead-a-color:              var(--table-thead-a-color);
+
+// card
+$card-header-color:                var(--card-header-color);
+$card-header-bg:                   var(--card-header-bg);
+$card-bg:                          var(--card-bg);
+$main-card-bg:                     var(--main-card-bg);
+$card-body-bg:                     var(--card-body-bg);
+
+// cpanel
+$module-actions-color:             var(--module-actions-color);
 
 // Dropdowns
 $dropdown-padding-y:               0;
-$dropdown-box-shadow:              0 1px 1px rgba($black, .15);
+$dropdown-box-shadow:              var(--dropdown-box-shadow);
 $dropdown-link-hover-color:        var(--template-text-dark);
 $dropdown-border-width:            1px;
 $dropdown-item-padding-y:          .5rem;
@@ -245,6 +338,16 @@ $form-select-bg-size-sm:           75rem;
 $form-select-multiple-padding-y:   .3rem;
 $form-file-button-color:           var(--white);
 
+//Forms
+$form-aria-grabbed-box-shadow:     var(--form-aria-grabbed-box-shadow);
+$options-form-color:               var(--options-form-color);
+$options-form-bg:                  var(--options-form-bg);
+$options-form-border:              var(--options-form-border);
+$options-form-legend-color:        var(--options-form-legend-color);
+$options-form-legend-bg:           var(--options-form-legend-bg);
+$form-control-bg:                  var(--form-control-bg);
+$form-control-bg-disabled:         var(--form-control-bg-disabled);
+
 // Input
 $input-padding:                    .5rem 1rem;
 $input-border-color:               var(--template-bg-dark-20);
@@ -258,14 +361,49 @@ $input-btn-padding-x:              1rem;
 
 // Modals
 $modal-header-height:              2.875rem;
+$modal-btn-box-shadow:             var(--modal-btn-box-shadow);
+$modal-joomla-dialog-box-shadow:   var(--modal-joomla-dialog-box-shadow);
+
+// Choices
+$choices__button_joomla-focus-box-shadow:  var(--choices__button_joomla-focus-box-shadow);
+
+// Joomla-Tab
+$joomla-tab-accordion-box-shadow:  var(--joomla-tab-accordion-box-shadow);
 
 // Quickicons
-$quickicon-bg:                     var(--white);
-$quickicon-box-shadow-success:     0 0 3px 0 var(--success);
-$quickicon-box-shadow-danger:      0 0 3px 0 var(--danger);
-$quickicon-box-shadow-warning:     0 0 3px 0 var(--warning);
+$quickicons-bg:                    var(--quickicons-bg);
+$quickicon-box-shadow-success:     var(--quickicon-box-shadow-success);
+$quickicon-box-shadow-danger:      var(--quickicon-box-shadow-danger);
+$quickicon-box-shadow-warning:     var(--quickicon-box-shadow-warning);
 $quickicon-icon-size:              2rem;
 $quickicon-icon-size-sm:           1.3rem;
+$quickicon-border:                var(--quickicon-border);
+$quickicon-border-radius:         var(--quickicon-border-radius);
+$quickicon-color:                 var(--quickicon-color);
+$quickicon-linkadd-color:         var(--quickicon-linkadd-color);
+$quickicon-linkadd-bg:            var(--quickicon-linkadd-bg);
+
+// Modules
+$new-modules-color:               var(--new-modules-color);
+$new-modules-bg:                  var(--new-modules-bg);
+$new-modules-bg-hvr:              var(--new-modules-bg-hvr);
+$new-modules-icon-color:          var(--new-modules-icon-color);
+$new-modules-icon-color-hvr:      var(--new-modules-icon-color-hvr);
+$new-module-color:                var(--new-module-color);
+$new-module-bg:                   var(--new-module-bg);
+$new-module-border:               var(--new-module-border);
+$new-module-link-bg:              var(--new-module-link-bg);
+$new-module-link-span:            var(--new-module-link-span);
+$new-module-link-hvr:             var(--new-module-link-hvr);
+$new-module-link-span-hvr:        var(--new-module-link-span-hvr);
+
+// header-content
+$header-item-content-bg:             var(--header-item-content-bg);
+$header-item-content-bg-hvr:         var(--header-item-content-bg-hvr);
+$header-item-content-border-radius:  var(--header-item-content-border-radius);
+$header-item-content-jversion-color: var(--header-item-content-jversion-color);
+$header-item-content-jversion-bg:    var(--header-item-content-jversion-bg);
+$header-logo-bg:                     var(--header-logo-bg);
 
 // Gutter
 $grid-gutter-width:                2rem;

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_form.scss b/build/media_source/templates/administrator/atum/scss/blocks/_form.scss
@@ -2,22 +2,13 @@
 
 .form-control {
   max-width: $input-max-width;
-
+  background: $form-control-bg;
   &:disabled,
   &[readonly] {
-    background-color: var(--gray-200);
+    background-color: $form-control-bg-disabled;
     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);

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
@@ -16,16 +16,9 @@ body {
   margin: 0;
   text-align: start;
 
-  &.admin {
-    background-color: var(--template-bg-dark-5);
-  }
-
-  @if $enable-dark-mode {
-    @include color-mode(dark) {
-      &.admin {
-        background-color: var(--template-bg-dark-90);
-      }
-    }
+  &.admin, & #subhead-container,
+  {
+    background-color: $admin-background;
   }
 
   &.monochrome {
@@ -138,6 +131,7 @@ body .container-main {
   position: relative;
   padding-right: 0;
   padding-left: 0;
+  background: var(--main-bg);
 }
 
 .content {
@@ -153,7 +147,7 @@ body .container-main {
 }
 
 body:not(.contentpane) .main-card {
-  background: var(--body-bg);
+  background: $main-card-bg;
   border-radius: $border-radius;
   box-shadow: $atum-box-shadow;
 }