diff --git a/build/media_source/com_installer/css/installer.css b/build/media_source/com_installer/css/installer.css
index 39b41b3268717..0b2132474d43a 100644
--- a/build/media_source/com_installer/css/installer.css
+++ b/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;
diff --git a/build/media_source/com_media/scss/_variables.scss b/build/media_source/com_media/scss/_variables.scss
index d0014a9c249f2..5b2330efde965 100644
--- a/build/media_source/com_media/scss/_variables.scss
+++ b/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);
diff --git a/build/media_source/com_media/scss/components/_layout.scss b/build/media_source/com_media/scss/components/_layout.scss
index 1f4e6c41514cf..af86c18aa9a2c 100644
--- a/build/media_source/com_media/scss/components/_layout.scss
+++ b/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;
 
diff --git a/build/media_source/com_media/scss/components/_media-browser.scss b/build/media_source/com_media/scss/components/_media-browser.scss
index b9ea8665410c9..ea48de5d9d710 100644
--- a/build/media_source/com_media/scss/components/_media-browser.scss
+++ b/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);
diff --git a/build/media_source/com_media/scss/components/_media-infobar.scss b/build/media_source/com_media/scss/components/_media-infobar.scss
index 65eebfda4d3aa..92195990b677e 100644
--- a/build/media_source/com_media/scss/components/_media-infobar.scss
+++ b/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;
   }
 }
 
diff --git a/build/media_source/templates/administrator/atum/images/select-bg-dark.svg b/build/media_source/templates/administrator/atum/images/select-bg-dark.svg
new file mode 100644
index 0000000000000..31aacfc2d4ef8
--- /dev/null
+++ b/build/media_source/templates/administrator/atum/images/select-bg-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/><rect width="1810" height="295" fill="#212529"/></svg>
diff --git a/build/media_source/templates/administrator/atum/images/select-bg-rtl-dark.svg b/build/media_source/templates/administrator/atum/images/select-bg-rtl-dark.svg
new file mode 100644
index 0000000000000..7fd24d0217025
--- /dev/null
+++ b/build/media_source/templates/administrator/atum/images/select-bg-rtl-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1854.539" height="295" preserveAspectRatio="xMinYMin meet"><path d="M13.573 145.7l6.9 6.9c.1.1.2.1.3.1s.2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-5.8 5.8-5.8-5.8c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-.7.7c-.1.1-.1.2-.1.3-.296.1-.195.2-.096.3h-.002z"/><path fill="#212529" d="M44.54 0h1810v295h-1810z"/></svg>
diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
new file mode 100644
index 0000000000000..268996a42bf44
--- /dev/null
+++ b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
@@ -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");
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
index 0eb1b003284a0..b25cd9131c3b2 100644
--- 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,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
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_form.scss b/build/media_source/templates/administrator/atum/scss/blocks/_form.scss
index 7848c80452319..3ad725b4829f0 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_form.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_form.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);
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
index 1dd9f1b1152e9..0917936af19ed 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
@@ -20,6 +20,14 @@ body {
     background-color: var(--template-bg-dark-5);
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      &.admin {
+        background-color: var(--template-bg-dark-90);
+      }
+    }
+  }
+
   &.monochrome {
     filter: grayscale(1);
     &::after {
@@ -145,7 +153,7 @@ body .container-main {
 }
 
 body:not(.contentpane) .main-card {
-  background: $white;
+  background: var(--body-bg);
   border-radius: $border-radius;
   box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
 }
@@ -197,6 +205,14 @@ a[target="_blank"]::before {
   opacity: .7;
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .text-muted {
+      color: var(--template-text-light) !important;
+    }
+  }
+}
+
 .card-columns {
   display: grid;
   grid-gap: 0 15px;
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss b/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss
index fc3319a7a0e31..181f15041ccc6 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_layout.scss
@@ -11,6 +11,14 @@
     padding: 0 1rem;
     font-weight: $font-weight-bold;
     color: var(--template-text-dark);
-    background-color: $white;
+    background-color: var(--bg-color);
+  }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      > legend {
+        color: var(--template-text-light);
+      }
+    }
   }
 }
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_login.scss b/build/media_source/templates/administrator/atum/scss/blocks/_login.scss
index 2e735c492d938..b989b652db9f9 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_login.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_login.scss
@@ -28,7 +28,7 @@
     padding: 30px;
     margin: 1rem;
     color: var(--template-text-dark);
-    background: var(--white);
+    background: var(--body-bg);
     border-radius: 10px;
     box-shadow: 0 4px 20px -10px var(--template-bg-dark-50);
 
@@ -102,7 +102,6 @@
 
   input:focus,
   select:focus {
-    background: $white;
     box-shadow: inset 0 0 1px 1px var(--template-contrast);
   }
 
@@ -219,6 +218,15 @@ label {
   color: $darkblue;
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    label {
+      color: var(--white);
+    }
+  }
+}
+
+
 .com_login .sidebar-wrapper .main-brand {
   flex: 1;
   flex-basis: auto;
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
index 490486bfc4e2d..fccad70dde2b5 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
@@ -1,7 +1,7 @@
 // Quick Icons
 
 .quick-icons {
-  background-color: $white;
+  background-color: var(--body-bg);
 
   .nav {
     display: grid;
@@ -18,9 +18,9 @@
   }
 
   .quickicon {
-    --text-color: hsl(var(--hue), 30%, 40%);
+    --text-color: var(--template-quickicon-color);
     --bg-color: hsl(var(--hue), 60%, 97%);
-    --icon-color: hsl(var(--hue), 30%, 40%);
+    --icon-color: var(--template-quickicon-color);
     --bg-color-hvr: var(--template-bg-dark);
 
     display: flex;
@@ -97,6 +97,16 @@
     }
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .quickicon {
+        --bg-color: var(--template-bg-dark-80);
+        --bg-color-hvr: var(--template-bg-dark-65);
+      }
+    }
+  }
+
+
   .quickicon-info {
     display: flex;
     align-items: flex-end;
@@ -115,7 +125,7 @@
 
       > * {
         margin-bottom: 10px;
-        color: hsl(var(--hue), 30%, 40%);
+        color: var(--template-quickicon-color);
       }
 
       &:hover,
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss
index 7e2f00ac9565d..dd1704c5d7735 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss
@@ -46,7 +46,7 @@
     font-size: 1rem;
     line-height: $atum-toolbar-line-height;
     color: var(--template-text-dark);
-    background: $white;
+    background: var(--bg-color);
     border-color: hsl(var(--hue),20%,80%);
 
     > span {
@@ -86,6 +86,14 @@
       --subhead-btn-accent: var(--template-bg-dark);
     }
 
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        &.btn-info {
+          --subhead-btn-accent: var(--template-bg-light);
+        }
+      }
+    }
+
     &.btn-action {
       --subhead-btn-accent: var(--template-bg-dark);
       display: flex;
@@ -100,6 +108,14 @@
       }
     }
 
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        &.btn-action {
+          --subhead-btn-accent: var(--template-bg-light);
+        }
+      }
+    }
+
     &[disabled],
     &.dropdown-toggle[disabled] {
       --subhead-btn-accent: var(--template-bg-dark);
@@ -114,6 +130,16 @@
     }
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .btn {
+        --subhead-btn-accent: var(--template-text-light);
+        color: var(--template-text-light);
+      }
+    }
+  }
+
+
   .dropdown-toggle {
     &.btn {
       padding-inline-end: 0;
@@ -138,6 +164,15 @@
   }
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .subhead {
+      background-color: var(--body-bg);
+      background-image: linear-gradient(var(--body-bg), var(--dark-bg));
+    }
+  }
+}
+
 @include media-breakpoint-down(sm) {
   joomla-tab[view=accordion] .col-md-9,
   joomla-tab[view=accordion] .col-md-3 {
diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
index 87fb1db17019a..9acb0d35c17d9 100644
--- a/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
+++ b/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
@@ -88,17 +88,7 @@
   }
 
   .card-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem 1rem .75rem;
-    font-weight: $font-weight-bold;
-    color: var(--template-bg-dark);
-    background: hsla(0, 0%, 100%, .7); // default: var(--card-bg);
-
-    > [class^="icon-"],
-    > img {
-      margin-inline-end: .5rem;
-    }
+    --card-bg: hsla(0, 0%, 100%, .7);
 
     .btn {
       margin-top: .25em;
@@ -121,6 +111,14 @@
       padding: 0;
       color: var(--template-bg-dark-70);
     }
+
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        > * {
+          color: var(--body-color);
+        }
+      }
+    }
   }
 
   .cpanel-add-module {
@@ -134,9 +132,9 @@
     font-size: .875rem;
     font-weight: 700;
     line-height: 1;
-    color: hsl(var(--hue),30%,40%);
-    background-color: hsl(var(--hue),35%,98%);
-    border: 1px solid hsl(var(--hue),35%,88%);
+    color: var(--template-quickicon-color);
+    background-color: var(--body-bg);
+    border: 1px solid var(--body-bg);
     border-radius: $border-radius;
     transition: all .15s ease-in;
 
@@ -154,7 +152,7 @@
 
     .cpanel-add-module-icon {
       font-size: 2rem;
-      color: hsl(var(--hue),30%,40%);
+      color: var(--template-quickicon-color);
       margin-inline-end: .5rem;
     }
   }
@@ -166,10 +164,6 @@
   }
 
   .list-group-item {
-    &:hover {
-      background: var(--toolbar-bg);
-    }
-
     a {
       font-weight: 500;
       text-decoration: underline;
@@ -231,7 +225,7 @@
 
 .sample-data__title {
   font-weight: bold;
-  color: var(--primary);
+  color: var(--template-bg-dark-50);
 }
 
 .sample-data__icon {
diff --git a/build/media_source/templates/administrator/atum/scss/template.scss b/build/media_source/templates/administrator/atum/scss/template.scss
index 713d590ec27fb..735ae0a822f3f 100644
--- a/build/media_source/templates/administrator/atum/scss/template.scss
+++ b/build/media_source/templates/administrator/atum/scss/template.scss
@@ -3,6 +3,7 @@
 
 // Atum Variables
 @import "variables";
+@import "variables-dark";
 
 @import "../../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../../media/vendor/bootstrap/scss/variables-dark";
@@ -79,6 +80,13 @@
   }
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @each $color, $value in $atum-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+}
 
 // Forcing reduced motion when set in the user OS
 @media (prefers-reduced-motion: reduce) {
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
index bc22107416436..450bdc7419495 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
@@ -26,14 +26,24 @@
 
   .card-header {
     display: flex;
+    align-items: center;
     padding: 1rem 1rem .75rem;
     font-weight: $font-weight-bold;
     color: var(--template-bg-dark);
-    background: var(--card-bg);
+    background-color: var(--card-bg);
 
     > [class^="icon-"],
     > img {
       margin-inline-end: .5rem;
     }
   }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .card-header {
+        color: var(--body-color);
+        background-color: var(--body-bg);
+      }
+    }
+  }
 }
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss
index 0f87686cf7051..f1dee01af7fa9 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_collapse.scss
@@ -10,6 +10,6 @@
   }
 
   .list-group-item {
-    color: $link-color;
+    --list-group-color: #{$link-color};
   }
 }
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
index 7d44f1ae2f64b..77a69230f9cc0 100644
--- 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;
@@ -36,6 +34,14 @@
       color: $form-select-color;
       background-color: var(--white-offset);
     }
+
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        option {
+          background-color: var(--gray-800);
+        }
+      }
+    }
   }
 
   &.form-select-danger,
@@ -48,23 +54,60 @@
       color: $form-select-color;
       background-color: var(--white-offset);
     }
+
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        option {
+          background-color: var(--gray-800);
+        }
+      }
+    }
   }
 
   &:disabled {
     cursor: default;
-    background-color: #e8e8e8;
+    background-color: var(--gray-200);
     background-image: none;
     border: 0;
     box-shadow: none;
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      &:disabled {
+        background-color: var(--gray-800);
+      }
+    }
+  }
+
   optgroup,
   option {
     color: var(--template-text-dark);
-    background-color: $white;
+    background-color: var(--body-bg);
 
     &:disabled {
       background-color: var(--template-bg-dark-5);
     }
   }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      option {
+        color: var(--template-text-light);
+
+        &:disabled {
+          background-color: var(--template-bg-dark-90);
+        }
+      }
+    }
+  }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-select {
+      background: $form-select-background-dark #{"/* rtl:"}$form-select-background-rtl-dark#{"*/"};
+    }
+  }
+}
+
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
index 29245c5361182..d0d8005b0efe4 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
@@ -1,9 +1,5 @@
 // Lists
 
-.list-group-item {
-  background-color: $list-group-bg;
-}
-
 .list-unstyled .list-unstyled {
   padding-left: 20px;
 }
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss b/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss
index 4f95802de3e72..463f8505469a4 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/choicesjs/choices.scss
@@ -125,6 +125,20 @@
       background-color: $form-select-bg;
     }
   }
+
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .choices__inner {
+        background: url("../../../images/select-bg-dark.svg") no-repeat 100%/116rem;
+        background-color: $form-select-bg-dark;
+
+        [dir="rtl"] & {
+          background: url("../../../images/select-bg-rtl-dark.svg") no-repeat 0/116rem;
+          background-color: $form-select-bg-dark;
+        }
+      }
+    }
+  }
 }
 
 .choices[data-type*="select-one"] {
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
index 6efacccc73dde..7c199f4a2e76d 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
@@ -1,5 +1,6 @@
 @import "../../variables";
 @import "../../../../../../../../media/vendor/joomla-custom-elements/css/joomla-alert";
+@import "../../../../../../../../media/vendor/bootstrap/scss/mixins/color-mode";
 
 // The following is a restyle for the system alerts
 
@@ -84,6 +85,12 @@
   &[type="notice"] {
     --alert-accent-color: #{$state-info-text};
     --alert-bg-color: #{$state-info-bg};
+
+    @include color-mode(dark) {
+      p {
+        color: var(--body-color);
+      }
+    }
   }
 
   &[type="warning"] {
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
index 3f935edb49762..c4e2b90e140b7 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
@@ -8,7 +8,6 @@
 
 // Tabs
 
-
 //
 // Base styles
 //
@@ -40,7 +39,7 @@ joomla-tab {
       display: block;
       padding: .6rem 1rem;
       text-decoration: none;
-      background-color: var(--white);
+      background-color: var(--bg-color);
       border: 0;
       box-shadow: none;
 
@@ -78,6 +77,17 @@ joomla-tab {
         background: var(--template-bg-dark-3);
       }
 
+      @if $enable-dark-mode {
+        @include color-mode(dark) {
+          /* stylelint-disable max-nesting-depth */
+          &[aria-expanded=true] {
+            /* stylelint-enable max-nesting-depth */
+            color: var(--template-text-light);
+            background: var(--template-bg-dark-60);
+          }
+        }
+      }
+
       .text-muted {
         color: var(--template-text-dark) !important;
       }
@@ -109,7 +119,7 @@ joomla-tab {
     --gutter-x: 2rem;
     display: none;
     padding: 30px 2vw;
-    background-color: $white;
+    background-color: var(--body-bg);
     border: 0;
     border-radius: .25rem;
     box-shadow: none;
diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
index e7ea1cd4d12bb..a0b7c3cebb4ce 100644
--- 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 {
+      color: #fff;
+      background-color: $dark-blue;
+    }
+  }
+}
+
 .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;
 }