fix(theme): tabs and codeeditor darkmode correction [EE-4188] (#7643)

* fix(theme): tabs and codeeditor darkmode correction [EE-4188]

* correct codemirror background

* fix typo

app/assets/css/theme.css

@@ -109,8 +109,9 @@
   --bg-md-checkbox-color: var(--grey-12);
   --bg-form-control-disabled-color: var(--grey-11);
   --bg-modal-content-color: var(--white-color);
-  --bg-navtabs-color: var(--white-color);
+  --bg-nav-container-color: var(--ui-gray-2);
   --bg-navtabs-hover-color: var(--grey-16);
+  --bg-nav-tab-active-color: var(--ui-gray-4);
   --bg-table-selected-color: var(--grey-14);
   --bg-codemirror-color: var(--white-color);
   --bg-codemirror-gutters-color: var(--grey-17);
@@ -157,9 +158,7 @@
   --bg-webeditor-color: var(--ui-gray-3);
   --bg-button-group-color: var(--ui-white);
   --bg-pagination-disabled-color: var(--ui-white);
-  --bg-nav-container-color: var(--ui-gray-2);
   --bg-code-script-color: var(--ui-white);
-  --bg-nav-tabs-active-color: var(--ui-gray-4);
   --bg-stepper-color: var(--ui-white);
   --bg-stepper-active-color: var(--ui-blue-1);
   --bg-code-color: var(--ui-white);
@@ -176,7 +175,9 @@
   --text-dashboard-item-color: var(--grey-32);
   --text-danger-color: var(--red-1);
   --text-code-color: var(--ui-gray-9);
-  --text-navtabs-color: var(--grey-25);
+  --text-navtabs-color: var(--grey-7);
+  --text-navtabs-hover-color: var(--grey-6);
+  --text-nav-tab-active-color: var(--grey-25);
   --text-cm-default-color: var(--blue-1);
   --text-cm-meta-color: var(--black-color);
   --text-cm-string-color: var(--red-3);
@@ -285,8 +286,8 @@
   --bg-blocklist-item-selected-color: var(--grey-3);
   --bg-card-color: var(--grey-1);
   --bg-checkbox-border-color: var(--grey-8);
-  --bg-code-color: var(--ui-gray-warm-11);
-  --bg-codemirror-color: var(--ui-gray-warm-11);
+  --bg-code-color: var(--grey-2);
+  --bg-codemirror-color: var(--grey-2);
   --bg-codemirror-gutters-color: var(--grey-3);
   --bg-codemirror-selected-color: var(--grey-3);
   --bg-dropdown-menu-color: var(--ui-gray-7);
@@ -303,8 +304,9 @@
   --bg-md-checkbox-color: var(--grey-31);
   --bg-form-control-disabled-color: var(--grey-3);
   --bg-modal-content-color: var(--grey-1);
-  --bg-navtabs-color: var(--ui-gray-warm-11);
+  --bg-nav-container-color: var(--ui-gray-iron-10);
   --bg-navtabs-hover-color: var(--grey-3);
+  --bg-nav-tab-active-color: var(--grey-2);
   --bg-table-selected-color: var(--grey-3);
   --bg-log-viewer-color: var(--grey-2);
   --bg-log-line-selected-color: var(--grey-3);
@@ -349,9 +351,7 @@
   --bg-webeditor-color: var(--ui-gray-iron-10);
   --bg-button-group-color: var(--ui-black);
   --bg-pagination-disabled-color: var(--grey-1);
-  --bg-nav-container-color: var(--ui-gray-iron-10);
   --bg-code-script-color: var(--ui-gray-warm-11);
-  --bg-nav-tabs-active-color: var(--ui-gray-warm-9);
   --bg-stepper-color: var(--ui-gray-iron-10);
   --bg-stepper-active-color: var(--ui-blue-8);
 
@@ -367,7 +367,9 @@
   --text-dashboard-item-color: var(--blue-2);
   --text-danger-color: var(--red-4);
   --text-code-color: var(--white-color);
-  --text-navtabs-color: var(--white-color);
+  --text-navtabs-color: var(--grey-8);
+  --text-navtabs-hover-color: var(--grey-9);
+  --text-nav-tab-active-color: var(--white-color);
   --text-cm-default-color: var(--blue-10);
   --text-cm-meta-color: var(--white-color);
   --text-cm-string-color: var(--red-5);
@@ -517,12 +519,12 @@
   --bg-tooltip-color: var(--black-color);
   --bg-table-selected-color: var(--grey-3);
   --bg-pre-color: var(--grey-2);
+  --bg-nav-container-color: var(--ui-black);
   --bg-navtabs-hover-color: var(--grey-3);
+  --bg-nav-tab-active-color: var(--ui-black);
   --bg-btn-default-color: var(--black-color);
-  --bg-navtabs-color: var(--black-color);
   --bg-input-autofill-color: var(--black-color);
   --bg-code-color: var(--ui-black);
-  --bg-navtabs-hover-color: var(--grey-3);
   --bg-btn-default-hover-color: var(--grey-4);
   --bg-btn-focus: var(--black-color);
   --bg-boxselector-color: var(--black-color);
@@ -537,9 +539,7 @@
   --bg-webeditor-color: var(--ui-gray-warm-9);
   --bg-pagination-disabled-color: var(--ui-black);
   --bg-pagination-hover-color: var(--ui-black);
-  --bg-nav-container-color: var(--ui-black);
   --bg-code-script-color: var(--ui-black);
-  --bg-nav-tabs-active-color: var(--ui-black);
   --bg-stepper-active-color: var(--ui-blue-8);
   --bg-stepper-color: var(--ui-black);
 
@@ -574,8 +574,9 @@
   --text-json-tree-branch-preview-color: var(--white-color);
   --text-pre-color: var(--white-color);
   --text-navtabs-color: var(--white-color);
+  --text-navtabs-hover-color: var(--white-color);
+  --text-nav-tab-active-color: var(--white-color);
   --text-input-autofill-color: var(--white-color);
-  --text-navtabs-color: var(--white-color);
   --text-button-hover-color: var(--white-color);
   --text-small-select-color: var(--white-color);
   --text-pagination-span-color: var(--ui-white);

app/assets/css/vendor-override.css

@@ -104,8 +104,8 @@ code {
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
-  color: var(--text-navtabs-color);
-  background-color: var(--bg-navtabs-color);
+  color: var(--text-nav-tab-active-color);
+  background-color: var(--bg-nav-tab-active-color);
   border: 1px solid var(--border-navtabs-color);
 }
 
@@ -117,8 +117,13 @@ code {
   border-color: var(--border-navtabs-color);
 }
 
+.nav > li > a {
+  color: var(--text-navtabs-color);
+}
+
 .nav > li > a:hover,
 .nav > li > a:focus {
+  color: var(--text-navtabs-hover-color);
   background-color: var(--bg-navtabs-hover-color);
 }
 
@@ -436,6 +441,5 @@ input:-webkit-autofill {
 }
 
 .nav-tabs > li {
-  background-color: var(--bg-nav-tabs-active-color);
   border-top-right-radius: 8px;
 }