diff --git a/administrator/language/en-GB/tpl_atum.ini b/administrator/language/en-GB/tpl_atum.ini
index 1eda4d38e5926..9866047161140 100644
--- a/administrator/language/en-GB/tpl_atum.ini
+++ b/administrator/language/en-GB/tpl_atum.ini
@@ -9,15 +9,15 @@ TPL_ATUM_ALTTEXT_SITE_LOGO_LABEL="Alt Text Site Logo"
 TPL_ATUM_ALTTEXT_SMALL_LOGO_LABEL="Alt Text Small Site Logo"
 TPL_ATUM_BACKEND_LOGIN="Joomla Administrator Login"
 TPL_ATUM_BACK_TO_CONTROL_PANEL="Back to Dashboard"
-TPL_ATUM_COLORS_HUE="Choose your hue value for the dark template colour"
-TPL_ATUM_COLORS_SETTINGS_BG_DARK_LABEL="Dark Background"
+TPL_ATUM_COLORS_HUE="Choose the hue value for the primary template colour"
 TPL_ATUM_COLORS_SETTINGS_BG_LIGHT_LABEL="Light Background"
 TPL_ATUM_COLORS_SETTINGS_CONTRAST_COLOR_LABEL="Contrast Colour"
 TPL_ATUM_COLORS_SETTINGS_LABEL="Colour Settings"
 TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_LABEL="Link Colour"
 TPL_ATUM_COLORS_SETTINGS_LINK_SIDEBAR_COLOR_LABEL="Sidebar Link Colour"
 TPL_ATUM_COLORS_SETTINGS_MONOCHROME_LABEL="Set Colour to Monochrome"
-TPL_ATUM_COLORS_SETTINGS_SPECIAL_COLOR_LABEL="Special Colour"
+TPL_ATUM_COLORS_SETTINGS_PRIMARY_COLOUR_LABEL="Primary Colour"
+TPL_ATUM_COLORS_SETTINGS_SECONDARY_COLOR_LABEL="Secondary Colour"
 TPL_ATUM_COLORS_SETTINGS_TEXT_DARK_LABEL="Dark Text"
 TPL_ATUM_COLORS_SETTINGS_TEXT_LIGHT_LABEL="Light Text"
 TPL_ATUM_IMAGE_SETTINGS_LABEL="Image Settings"
diff --git a/administrator/templates/atum/Service/HTML/Atum.php b/administrator/templates/atum/Service/HTML/Atum.php
index e324dcc4d86d5..2241c567cfd04 100644
--- a/administrator/templates/atum/Service/HTML/Atum.php
+++ b/administrator/templates/atum/Service/HTML/Atum.php
@@ -123,14 +123,14 @@ public static function rootcolors(Registry $params): void
 			}
 		}
 
-		$specialColor = $params->get('special-color');
+		$secondaryColor = $params->get('secondary-color');
 
-		if (static::isHex($specialColor))
+		if (static::isHex($secondaryColor))
 		{
 			try
 			{
-				$specialcolor = new Hex($specialColor);
-				$root[]       = '--atum-special-color: ' . $specialcolor . ';';
+				$secondaryColor = new Hex($secondaryColor);
+				$root[]       = '--atum-secondary-color: ' . $secondaryColor . ';';
 			}
 			catch (\Exception $ex)
 			{
@@ -218,18 +218,18 @@ protected static function bgdarkcalc($color): array
 		{
 			$bgcolor = new Hsl('hsl(' . $hue . ', ' . 63 . ', 20)');
 
-			$root[] = '--atum-bg-dark: ' . (new Hsl('hsl(' . $hue . ', 63, 20)'))->toHex() . ';';
+			$root[] = '--atum-primary-color: ' . (new Hsl('hsl(' . $hue . ', 63, 20)'))->toHex() . ';';
 			$root[] = '--atum-contrast: ' . (new Hsl('hsl(' . $hue . ', 63, 20)'))->spin(-40)->lighten(18)->toHex() . ';';
-			$root[] = '--atum-bg-dark-0: ' . (clone $bgcolor)->desaturate(86)->lighten(71.4)->spin(-6)->toHex() . ';';
-			$root[] = '--atum-bg-dark-5: ' . (clone $bgcolor)->desaturate(85)->lighten(65.1)->spin(-6)->toHex() . ';';
-			$root[] = '--atum-bg-dark-10: ' . (clone $bgcolor)->desaturate(80)->lighten(59.4)->spin(-6)->toHex() . ';';
-			$root[] = '--atum-bg-dark-20: ' . (clone $bgcolor)->desaturate(75)->lighten(47.3)->spin(-6)->toHex() . ';';
-			$root[] = '--atum-bg-dark-30: ' . (clone $bgcolor)->desaturate(55)->lighten(34.3)->spin(-5)->toHex() . ';';
-			$root[] = '--atum-bg-dark-40: ' . (clone $bgcolor)->desaturate(40)->lighten(21.4)->spin(-3)->toHex() . ';';
-			$root[] = '--atum-bg-dark-50: ' . (clone $bgcolor)->desaturate(15)->lighten(10)->spin(-1)->toHex() . ';';
-			$root[] = '--atum-bg-dark-70: ' . (clone $bgcolor)->lighten(-6)->spin(4)->toHex() . ';';
-			$root[] = '--atum-bg-dark-80: ' . (clone $bgcolor)->lighten(-11.5)->spin(7)->toHex() . ';';
-			$root[] = '--atum-bg-dark-90: ' . (clone $bgcolor)->desaturate(-1)->lighten(-17)->spin(10)->toHex() . ';';
+			$root[] = '--atum-primary-color-0: ' . (clone $bgcolor)->desaturate(86)->lighten(71.4)->spin(-6)->toHex() . ';';
+			$root[] = '--atum-primary-color-5: ' . (clone $bgcolor)->desaturate(85)->lighten(65.1)->spin(-6)->toHex() . ';';
+			$root[] = '--atum-primary-color-10: ' . (clone $bgcolor)->desaturate(80)->lighten(59.4)->spin(-6)->toHex() . ';';
+			$root[] = '--atum-primary-color-20: ' . (clone $bgcolor)->desaturate(75)->lighten(47.3)->spin(-6)->toHex() . ';';
+			$root[] = '--atum-primary-color-30: ' . (clone $bgcolor)->desaturate(55)->lighten(34.3)->spin(-5)->toHex() . ';';
+			$root[] = '--atum-primary-color-40: ' . (clone $bgcolor)->desaturate(40)->lighten(21.4)->spin(-3)->toHex() . ';';
+			$root[] = '--atum-primary-color-50: ' . (clone $bgcolor)->desaturate(15)->lighten(10)->spin(-1)->toHex() . ';';
+			$root[] = '--atum-primary-color-70: ' . (clone $bgcolor)->lighten(-6)->spin(4)->toHex() . ';';
+			$root[] = '--atum-primary-color-80: ' . (clone $bgcolor)->lighten(-11.5)->spin(7)->toHex() . ';';
+			$root[] = '--atum-primary-color-90: ' . (clone $bgcolor)->desaturate(-1)->lighten(-17)->spin(10)->toHex() . ';';
 		}
 		catch (\Exception $ex)
 		{
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
index 542dfea699d6d..059edb2535bdb 100644
--- a/administrator/templates/atum/scss/_variables.scss
+++ b/administrator/templates/atum/scss/_variables.scss
@@ -15,7 +15,7 @@ $gray-900:                         #212529; //used for tree header
 $bluegray:                         #b2bfcd; // used for borders
 $black:                            #000;    //used for shadows
 $focuscolor:                       #39f;    //used for focus color
-$dark-blue:                        #001b4c; //is the atum-special-color
+$dark-blue:                        #001b4c; //is the atum-secondary-color
 $light-blue:                       #2a69b8; //is the atum-link-color
 $focusshadow:                      0 0 0 .2rem #eaeaea;
 
@@ -36,7 +36,7 @@ $base-color:                       $darkblue;
 
 $theme-colors: ();
 $theme-colors: map-merge((
-  primary:                         $base-color, //used only in bootstrap, please use $atum-bg-dark
+  primary:                         $base-color, //used only in bootstrap, please use $atum-primary-color
   secondary:                       $gray-700, //used for btn-secondary
   success:                         $green,
   info:                            $light-blue,
@@ -46,7 +46,7 @@ $theme-colors: map-merge((
   dark:                            $gray-900,  //used in bootstrap and for table-border
   atum-link-color:                 $light-blue,
   atum-text-dark:                  $gray-700,
-  atum-bg-dark:                    $base-color, //standard background color
+  atum-primary-color:              $base-color, //standard background color
   action:                          $base-color,
   error:                           $red-dark,
   alert-success:                   $green-dark
@@ -72,19 +72,19 @@ $colors: (
   atum-sidebar-link-color:         $darkblue,
   atum-bg-light:                   #f0f4fb, //light background color, frontend dashboard background
   atum-text-light:                 $white,
-  atum-special-color:              $dark-blue,
+  atum-secondary-color:            $dark-blue,
   atum-link-color:                 $light-blue,
   atum-link-hover-color:           darken($light-blue, 20%),
   atum-contrast:                   $light-blue,
-  atum-bg-dark-5:                  adjust-color($base-color, $hue: -6%, $saturation: -85%, $lightness: +65.1%),
-  atum-bg-dark-10:                 adjust-color($base-color, $hue: -6%, $saturation: -80%, $lightness: +59.4%),
-  atum-bg-dark-20:                 adjust-color($base-color, $hue: -6%, $saturation: -75%, $lightness: +47.3%),
-  atum-bg-dark-30:                 adjust-color($base-color, $hue: -5%, $saturation: -55%, $lightness: +34.3%),
-  atum-bg-dark-40:                 adjust-color($base-color, $hue: -3%, $saturation: -40%, $lightness: +21.4%),
-  atum-bg-dark-50:                 adjust-color($base-color, $hue: -1%, $saturation: -15%, $lightness: +10%),
-  atum-bg-dark-70:                 adjust-color($base-color, $hue: +4%, $lightness: -6%),
-  atum-bg-dark-80:                 adjust-color($base-color, $hue: +7%, $lightness: -11.5%),
-  atum-bg-dark-90:                 adjust-color($base-color, $hue: +10%, $saturation: -1%, $lightness: -17%)
+  atum-primary-color-5:            adjust-color($base-color, $hue: -6%, $saturation: -85%, $lightness: +65.1%),
+  atum-primary-color-10:           adjust-color($base-color, $hue: -6%, $saturation: -80%, $lightness: +59.4%),
+  atum-primary-color-20:           adjust-color($base-color, $hue: -6%, $saturation: -75%, $lightness: +47.3%),
+  atum-primary-color-30:           adjust-color($base-color, $hue: -5%, $saturation: -55%, $lightness: +34.3%),
+  atum-primary-color-40:           adjust-color($base-color, $hue: -3%, $saturation: -40%, $lightness: +21.4%),
+  atum-primary-color-50:           adjust-color($base-color, $hue: -1%, $saturation: -15%, $lightness: +10%),
+  atum-primary-color-70:           adjust-color($base-color, $hue: +4%, $lightness: -6%),
+  atum-primary-color-80:           adjust-color($base-color, $hue: +7%, $lightness: -11.5%),
+  atum-primary-color-90:           adjust-color($base-color, $hue: +10%, $saturation: -1%, $lightness: -17%)
 );
 
 // Alerts
@@ -200,8 +200,8 @@ $danger-txt:                       #fff;
 
 // Input Group
 $input-group-addon-color:          var(--white);
-$input-group-addon-bg:             var(--atum-bg-dark);
-$input-group-addon-border-color:   var(--atum-bg-dark);
+$input-group-addon-bg:             var(--atum-primary-color);
+$input-group-addon-border-color:   var(--atum-primary-color);
 
 // Treeselect
 $treeselect-line-height:           2.2rem;
diff --git a/administrator/templates/atum/scss/blocks/_alerts.scss b/administrator/templates/atum/scss/blocks/_alerts.scss
index 0c2b33ead0fe8..5ff3825f3cdab 100644
--- a/administrator/templates/atum/scss/blocks/_alerts.scss
+++ b/administrator/templates/atum/scss/blocks/_alerts.scss
@@ -7,9 +7,9 @@
   border-radius: $border-radius-sm;
 
   &.alert-info {
-    color: var(--atum-bg-dark);
-    background-color: var(--atum-bg-dark-10);
-    border: 1px solid var(--atum-bg-dark-20);
+    color: var(--atum-primary-color);
+    background-color: var(--atum-primary-color-10);
+    border: 1px solid var(--atum-primary-color-20);
   }
 
   &.alert-warning {
diff --git a/administrator/templates/atum/scss/blocks/_form.scss b/administrator/templates/atum/scss/blocks/_form.scss
index 1480fba09db64..45022168143e0 100644
--- a/administrator/templates/atum/scss/blocks/_form.scss
+++ b/administrator/templates/atum/scss/blocks/_form.scss
@@ -154,7 +154,7 @@ legend {
 .switcher__legend {
   margin-bottom: 0;
   font-size: $label-font-size;
-  color: var(--atum-special-color);
+  color: var(--atum-secondary-color);
 }
 
 .input-group-append {
diff --git a/administrator/templates/atum/scss/blocks/_header.scss b/administrator/templates/atum/scss/blocks/_header.scss
index e9d8808e31694..e4bc70ef089f7 100644
--- a/administrator/templates/atum/scss/blocks/_header.scss
+++ b/administrator/templates/atum/scss/blocks/_header.scss
@@ -6,7 +6,7 @@
   box-sizing: border-box;
   padding: 10px;
   color: $white;
-  background: var(--atum-bg-dark);
+  background: var(--atum-primary-color);
 
   .header-title {
     width: 50%;
@@ -127,7 +127,7 @@
         &[aria-expanded="true"] {
           color: var(--atum-text-light);
           text-decoration: none;
-          background-color: var(--atum-bg-dark);
+          background-color: var(--atum-primary-color);
           box-shadow: $atum-box-shadow;
         }
 
@@ -220,13 +220,13 @@
     z-index: $zindex-popover;
     min-width: 18rem;
     padding: 0;
-    background-color: var(--atum-bg-dark-70);
+    background-color: var(--atum-primary-color-70);
 
     .dropdown-header {
       padding: 1rem .75rem;
       font-size: inherit;
       color: $white;
-      background-color: var(--atum-bg-dark);
+      background-color: var(--atum-primary-color);
       box-shadow: $atum-box-shadow;
 
       [dir=rtl] & {
@@ -247,7 +247,7 @@
 
   .dropdown-item {
     color: $white;
-    background-color: var(--atum-bg-dark-70);
+    background-color: var(--atum-primary-color-70);
 
     [dir=rtl] & {
       text-align: right;
@@ -297,7 +297,7 @@
       height: 3.7rem;
 
       .header-item-content > :first-child {
-        color: var(--atum-special-color);
+        color: var(--atum-secondary-color);
 
         &[aria-expanded=true] {
           color: var(--atum-text-light);
@@ -319,7 +319,7 @@
       width: 3.8rem;
       height: 100%;
       color: var(--white-offset);
-      background-color: var(--atum-bg-dark);
+      background-color: var(--atum-primary-color);
       border: 0;
 
       .fas {
@@ -327,7 +327,7 @@
       }
 
       &:hover {
-        background-color: var(--atum-bg-dark-80);
+        background-color: var(--atum-primary-color-80);
       }
     }
   }
@@ -348,7 +348,7 @@
       justify-content: flex-end;
       width: 100%;
       max-width: 18rem;
-      background: var(--atum-bg-dark);
+      background: var(--atum-primary-color);
 
       &::after {
         position: absolute;
@@ -356,7 +356,7 @@
         width: 1000%;
         height: 100%;
         content: "";
-        background: var(--atum-bg-dark);
+        background: var(--atum-primary-color);
 
       }
     }
diff --git a/administrator/templates/atum/scss/blocks/_login.scss b/administrator/templates/atum/scss/blocks/_login.scss
index de3ad64cea6f9..f507355b22e1b 100644
--- a/administrator/templates/atum/scss/blocks/_login.scss
+++ b/administrator/templates/atum/scss/blocks/_login.scss
@@ -46,7 +46,7 @@
       width: 2.4rem;
 
       path {
-        fill: var(--atum-bg-dark);
+        fill: var(--atum-primary-color);
       }
 
     }
@@ -87,7 +87,7 @@
 
         &.text-right {
           font-size: .75rem;
-          color: var(--atum-special-color);
+          color: var(--atum-secondary-color);
         }
       }
     }
@@ -102,7 +102,7 @@
   h1 {
     padding-bottom: 1rem;
     margin: 0;
-    color: var(--atum-bg-dark);
+    color: var(--atum-primary-color);
     font-weight: $font-weight-bold;
     text-align: center;
   }
@@ -155,7 +155,7 @@
     text-align: center;
 
     .card {
-      background: var(--atum-bg-dark);
+      background: var(--atum-primary-color);
       box-shadow: none;
 
       .module-body {
diff --git a/administrator/templates/atum/scss/blocks/_quickicons.scss b/administrator/templates/atum/scss/blocks/_quickicons.scss
index 91b42ec29c918..20c44ac7d51ea 100644
--- a/administrator/templates/atum/scss/blocks/_quickicons.scss
+++ b/administrator/templates/atum/scss/blocks/_quickicons.scss
@@ -227,7 +227,7 @@
     @include hover-focus-active {
       color: $white;
       text-decoration: none;
-      background: var(--atum-bg-dark);
+      background: var(--atum-primary-color);
     }
   }
 }
diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss
index 52cb31f91bde3..0870efd542974 100644
--- a/administrator/templates/atum/scss/blocks/_sidebar.scss
+++ b/administrator/templates/atum/scss/blocks/_sidebar.scss
@@ -205,7 +205,7 @@
 @include media-breakpoint-down(xs) {
   #menu-collapse {
     display: none;
-    background: var(--atum-bg-dark-50);
+    background: var(--atum-primary-color-50);
   }
 
   .toggler-burger {
diff --git a/administrator/templates/atum/scss/blocks/_toolbar.scss b/administrator/templates/atum/scss/blocks/_toolbar.scss
index d24553a2b356a..7008191187a91 100644
--- a/administrator/templates/atum/scss/blocks/_toolbar.scss
+++ b/administrator/templates/atum/scss/blocks/_toolbar.scss
@@ -82,7 +82,7 @@
     }
 
     &.btn-action {
-      --subhead-btn-accent: var(--atum-bg-dark);
+      --subhead-btn-accent: var(--atum-primary-color);
       display: flex;
       align-items: center;
 
@@ -96,7 +96,7 @@
 
     &[disabled],
     &.dropdown-toggle[disabled] {
-      --subhead-btn-accent: var(--atum-bg-dark);
+      --subhead-btn-accent: var(--atum-primary-color);
       background: rgba($gray-300, .8);
       opacity: .5;
 
diff --git a/administrator/templates/atum/scss/pages/_com_cpanel.scss b/administrator/templates/atum/scss/pages/_com_cpanel.scss
index 177f550ba5efc..f5bc7952c530a 100644
--- a/administrator/templates/atum/scss/pages/_com_cpanel.scss
+++ b/administrator/templates/atum/scss/pages/_com_cpanel.scss
@@ -19,7 +19,7 @@
   &-help {
 
     &__header {
-      color: var(--atum-special-color);
+      color: var(--atum-secondary-color);
     }
 
     a {
@@ -43,7 +43,7 @@
     }
 
     &__header {
-      color: var(--atum-special-color);
+      color: var(--atum-secondary-color);
 
       span {
         margin-right: 5px;
@@ -107,7 +107,7 @@
   .card-header {
     min-height: 2.5rem;
     font-weight: $font-weight-bold;
-    color: var(--atum-bg-dark);
+    color: var(--atum-primary-color);
     background: var(--card-bg);
   }
 
@@ -122,7 +122,7 @@
       width: 2.6em;
       height: 2.6em;
       line-height: 2.6em;
-      color: var(--atum-special-color);
+      color: var(--atum-secondary-color);
     }
   }
 
@@ -135,7 +135,7 @@
     @include hover-focus-active() {
       text-decoration: none;
       background-color: var(--white);
-      border-color: var(--atum-bg-dark);
+      border-color: var(--atum-primary-color);
 
       .cpanel-add-module-icon {
 
diff --git a/administrator/templates/atum/scss/system/searchtools/searchtools.scss b/administrator/templates/atum/scss/system/searchtools/searchtools.scss
index 4489859b1fb67..7f4cb52f2b612 100644
--- a/administrator/templates/atum/scss/system/searchtools/searchtools.scss
+++ b/administrator/templates/atum/scss/system/searchtools/searchtools.scss
@@ -26,7 +26,7 @@
     }
 
     .js-stools-btn-clear {
-      background-color: var(--atum-bg-dark);
+      background-color: var(--atum-primary-color);
       border: 0;
     }
   }
diff --git a/administrator/templates/atum/scss/vendor/_tinymce.scss b/administrator/templates/atum/scss/vendor/_tinymce.scss
index 80cc6be358771..4cdc724f3b311 100644
--- a/administrator/templates/atum/scss/vendor/_tinymce.scss
+++ b/administrator/templates/atum/scss/vendor/_tinymce.scss
@@ -7,7 +7,7 @@
   }
 
   .mce-tinymce {
-    border: 1px solid var(--atum-bg-dark);
+    border: 1px solid var(--atum-primary-color);
   }
 
   .mce-btn,
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_buttons.scss b/administrator/templates/atum/scss/vendor/bootstrap/_buttons.scss
index 29af1e7945c47..5f76345d9f354 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_buttons.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_buttons.scss
@@ -10,23 +10,23 @@
   border-color: var(--atum-link-color);
 
   @include hover-focus-active {
-    background-color: var(--atum-bg-dark-70);
-    border-color: var(--atum-bg-dark-90);
+    background-color: var(--atum-primary-color-70);
+    border-color: var(--atum-primary-color-90);
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    background-color: var(--atum-bg-dark);
-    border-color: var(--atum-bg-dark);
+    background-color: var(--atum-primary-color);
+    border-color: var(--atum-primary-color);
   }
 }
 
 .btn-secondary {
-  background-color: var(--atum-bg-dark-50);
+  background-color: var(--atum-primary-color-50);
 }
 
 .input-group-text {
-  background-color: var(--atum-bg-dark);
-  border-color: var(--atum-bg-dark);
+  background-color: var(--atum-primary-color);
+  border-color: var(--atum-primary-color);
 }
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
index de755e145c051..f332aa31bbda6 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -25,7 +25,7 @@
 
       &:checked {
         color: var(--atum-text-light);
-        background-color: var(--atum-bg-dark) !important;
+        background-color: var(--atum-primary-color) !important;
       }
     }
 
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_dropdown.scss b/administrator/templates/atum/scss/vendor/bootstrap/_dropdown.scss
index f14afdf80dfb3..5ff51ba553734 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_dropdown.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_dropdown.scss
@@ -24,7 +24,7 @@
   &:hover,
   &:focus {
     .btn-primary + .dropdown-menu & {
-      background-color: var(--atum-bg-dark);
+      background-color: var(--atum-primary-color);
     }
 
     .btn-secondary + .dropdown-menu & {
@@ -42,7 +42,7 @@
 
     .btn-group.show .dropdown-menu &:not(.disabled) {
       color: var(--atum-text-light);
-      background-color: var(--atum-bg-dark);
+      background-color: var(--atum-primary-color);
     }
   }
 
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_form.scss b/administrator/templates/atum/scss/vendor/bootstrap/_form.scss
index aa4dd3722ce49..90e3d2e3a093d 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_form.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_form.scss
@@ -48,7 +48,7 @@ legend {
 }
 
 [aria-grabbed="true"] {
-  box-shadow: 0 0 2px 1px var(--atum-bg-dark);
+  box-shadow: 0 0 2px 1px var(--atum-primary-color);
 }
 
 select.form-control {
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_nav.scss b/administrator/templates/atum/scss/vendor/bootstrap/_nav.scss
index 6a8ee4272d445..9018bf4aa8b40 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_nav.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_nav.scss
@@ -9,7 +9,7 @@
   padding: 0;
   margin: 0 0 1rem;
   text-align: center;
-  background-color: var(--atum-bg-dark);
+  background-color: var(--atum-primary-color);
 
   @include media-breakpoint-only(xl) {
     flex-wrap: unset;
diff --git a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
index 676c168c70322..d270fdfa6591c 100644
--- a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
+++ b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
@@ -61,14 +61,14 @@
 
 .choices__list--multiple .choices__item {
   position: relative;
-  background-color: var(--atum-bg-dark);
+  background-color: var(--atum-primary-color);
   margin: 2px;
   margin-inline-end: 2px;
   border: 0;
   border-radius: $border-radius;
 
   &.is-highlighted {
-    background-color: var(--atum-bg-dark);
+    background-color: var(--atum-primary-color);
     opacity: 0.9;
   }
 }
diff --git a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
index 58fa6cc26ad1d..c93dfba3cf741 100644
--- a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
+++ b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
@@ -135,7 +135,7 @@ joomla-tab {
       position: relative;
       display: block;
       padding: .75em 1em;
-      color: var(--atum-special-color);
+      color: var(--atum-secondary-color);
       text-decoration: none;
       border: 0;
       border-bottom: 1px solid $gray-300;
@@ -155,7 +155,7 @@ joomla-tab {
           left: -1px;
           width: 5px;
           height: auto;
-          background-color: var(--atum-bg-dark);
+          background-color: var(--atum-primary-color);
         }
       }
     }
@@ -203,7 +203,7 @@ joomla-tab {
       &:hover,
       &:focus {
         color: var(--atum-text-light);
-        background-color: var(--atum-bg-dark);
+        background-color: var(--atum-primary-color);
       }
     }
 
@@ -240,7 +240,7 @@ joomla-tab {
             width: calc(100% + 2px);
             height: 5px;
             content: "";
-            background-color: var(--atum-bg-dark);
+            background-color: var(--atum-primary-color);
             opacity: .8;
           }
         }
@@ -292,7 +292,7 @@ joomla-tab {
           }
 
           .respTable td:last-child {
-            border-bottom: 1em var(--atum-bg-dark-80) solid;
+            border-bottom: 1em var(--atum-primary-color-80) solid;
           }
 
           .oddCol {
diff --git a/administrator/templates/atum/templateDetails.xml b/administrator/templates/atum/templateDetails.xml
index 962990f33fdbf..ebeba117a6125 100644
--- a/administrator/templates/atum/templateDetails.xml
+++ b/administrator/templates/atum/templateDetails.xml
@@ -62,6 +62,15 @@
 					saveFormat="hsl"
 					default="hsl(214,63%,20%)"
 				/>
+
+				<field
+					name="secondary-color"
+					type="color"
+					label="TPL_ATUM_COLORS_SETTINGS_SECONDARY_COLOR_LABEL"
+					default="#001B4C"
+					filter="color"
+				/>
+
 				<field
 					name="bg-light"
 					type="color"
@@ -97,13 +106,7 @@
 					default="#3b4a5c"
 					filter="color"
 				/>
-				<field
-					name="special-color"
-					type="color"
-					label="TPL_ATUM_COLORS_SETTINGS_SPECIAL_COLOR_LABEL"
-					default="#001B4C"
-					filter="color"
-				/>
+
 				<field
 					name="monochrome"
 					type="radio"