Commit current status

joomla · Sep 3, 2023 · dd595bf · dd595bf
1 parent e28abb8
commit dd595bf
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -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,11 +55,14 @@ $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,
@@ -152,7 +155,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;

diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -8,8 +8,6 @@
   max-width: $input-max-width;
   cursor: pointer;
   background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};;
-  background-color: $form-select-bg;
-  border: $form-select-border-width solid $form-select-border-color;
 
   &[multiple] {
     padding: 0;

diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
@@ -1,6 +1,3 @@
-// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
-$prefix: "";
-
 $jicon-css-prefix: icon;
 $fa-css-prefix: fa;
 $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
@@ -26,7 +23,10 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
 // Variables from the Atum template
 @import "../../../build/media_source/templates/administrator/atum/scss/variables";
 
+$body-bg: $template-background-light;
+
 @import "../../../media/vendor/bootstrap/scss/variables";
+@import "../../../media/vendor/bootstrap/scss/variables-dark";
 @import "../../../media/vendor/bootstrap/scss/maps";
 @import "../../../media/vendor/bootstrap/scss/mixins";
 @import "../../../media/vendor/bootstrap/scss/utilities";
@@ -175,14 +175,6 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
   background-color: var(--body-bg) !important;
 }
 
-body {
-  background: var(--template-bg-light);
-}
-
-.form-select {
-  @extend .form-select;
-}
-
 *,
 *::after,
 *::before {
@@ -256,6 +248,21 @@ body {
   }
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .j-install-step {
+      background-color: var(--secondary-bg);
+    }
+
+    // For now in dark mode we swap the color and the background around. But this probably is too much
+    // emphasis than we require for the header
+    .j-install-step-header {
+      background-color: $dark-blue;
+      color: #fff;
+    }
+  }
+}
+
 .j-install-step-form {
   padding: .65rem 1.2rem;
 
@@ -301,14 +308,20 @@ body {
 // Form
 
 .form-control {
-  background-color: var(--white-offset);
-
   &.input-full {
     max-width: 100%;
   }
+}
 
+@if $enable-dark-mode {
+  @include color-mode(light) {
+    .form-control {
+      background-color: var(--white-offset);
+    }
+  }
 }
 
+
 label {
   margin-bottom: .5rem;
 }
@@ -392,6 +405,14 @@ caption {
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25);
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .footer {
+      background-color: var(--secondary-bg);
+    }
+  }
+}
+
 .table > :not(:last-child) > :last-child > * {
   border-bottom-color: $table-border-color;
 }