fix(wizard): fix wizard not visible in dark theme EE-1800 (#5822)

* fix wizard not visible in dark theme

app/assets/css/theme.css

@@ -62,6 +62,7 @@ html {
   --grey-58: #ebf4f8;
   --grey-59: #e6e6e6;
   --grey-60: #cacaca;
+  --grey-61: rgb(231, 231, 231);
 
   --blue-1: #219;
   --blue-2: #337ab7;
@@ -158,6 +159,8 @@ html {
   --bg-small-select-color: var(--white-color);
   --bg-app-datatable-thead: var(--grey-23);
   --bg-app-datatable-tbody: var(--grey-24);
+  --bg-stepper-item-active: var(--white-color);
+  --bg-stepper-item-counter: var(--grey-61);
 
   --text-main-color: var(--grey-7);
   --text-body-color: var(--grey-6);
@@ -328,6 +331,8 @@ html {
   --bg-small-select-color: var(--grey-2);
   --bg-app-datatable-thead: var(--grey-1);
   --bg-app-datatable-tbody: var(--grey-1);
+  --bg-stepper-item-active: var(--grey-1);
+  --bg-stepper-item-counter: var(--grey-7);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);
@@ -497,6 +502,8 @@ html {
   --bg-small-select-color: var(--black-color);
   --bg-app-datatable-thead: var(--black-color);
   --bg-app-datatable-tbody: var(--black-color);
+  --bg-stepper-item-active: var(--black-color);
+  --bg-stepper-item-counter: var(--grey-3);
 
   --text-main-color: var(--white-color);
   --text-body-color: var(--white-color);

app/portainer/views/wizard/wizard-endpoints/wizard-stepper/wizard-stepper.css

@@ -30,17 +30,17 @@
 .stepper-item::before {
   position: absolute;
   content: '';
-  border-bottom: 5px solid rgb(231, 231, 231);
   width: 100%;
   top: 20px;
   left: -100%;
   z-index: 2;
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
 }
 
 .stepper-item::after {
   position: absolute;
   content: '';
-  border-bottom: 5px solid rgb(231, 231, 231);
+  border-bottom: 5px solid var(--bg-stepper-item-counter);
   width: 100%;
   top: 20px;
   left: 0;
@@ -56,13 +56,13 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: rgb(231, 231, 231);
+  background: var(--bg-stepper-item-counter);
   margin-bottom: 6px;
 }
 
 .stepper-item.active {
   font-weight: bold;
-  background: #fff;
+  background: var(--bg-stepper-item-active);
   content: none;
 }