diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index f535eba8..7b61a827 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -239,21 +239,23 @@ html[data-theme='material-original'] {
 
 html[data-theme='material-dark-original'] {
   --primary: #08B0BB;
-  --settings-text-color: #08B0BB;
   --background: #39434C;
-  --background-darker: #08B0BB;
+  --background-darker: var(--primary);
+  --material-dark: #131a1f;
+  --material-light: #41e2ed;
+  --settings-text-color: var(--primary);
   --settings-background: #092b3a;
   --item-group-background: #333C43;
   --item-background: #414B55;
   --item-background-hover: #414B55;
-  --settings-background: #131a1f;
-  --search-container-background: #131a1f;
-  --search-field-background: #39434c;
-  --heading-text-color: #131a1f;
-  --nav-link-text-color: #08B0BB;
-  --nav-link-background-color: #131a1f;
-  --nav-link-text-color-hover: #08B0BB;
-  --nav-link-background-color-hover: #131a1fc7;
+  --settings-background: var(--material-dark);
+  --search-container-background: var(--material-dark);
+  --search-field-background: var(--background);
+  --heading-text-color: var(--material-dark);
+  --nav-link-text-color: var(--primary);
+  --nav-link-background-color: var(--material-dark);
+  --nav-link-text-color-hover: var(--primary);
+  --nav-link-background-color-hover: var(--material-dark);
   --nav-link-border-color-hover: transparent;
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
@@ -262,25 +264,25 @@ html[data-theme='material-dark-original'] {
   --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
-  --welcome-popup-background: #131a1f;
+  --welcome-popup-background: var(--material-dark);
   --welcome-popup-text-color: var(--primary);
-  --config-settings-background: #131a1f;
-  --config-settings-color: #41e2ed;
-  --interactive-editor-color: #41e2ed;
-  --interactive-editor-background: #131a1f;
-  --interactive-editor-background-darker: #092b3a;
-  --scroll-bar-color: #08B0BB;
-  --scroll-bar-background: #131a1f;
-  --status-check-tooltip-background: #131a1f;
-  --status-check-tooltip-color: #08B0BB;
-  --description-tooltip-background: #131a1f;
-  --description-tooltip-color: #08B0BB;
+  --config-settings-background: var(--material-dark);
+  --config-settings-color: var(--material-light);
+  --interactive-editor-color: var(--material-light);
+  --interactive-editor-background: var(--material-dark);
+  --interactive-editor-background-darker: var(--material-dark);
+  --scroll-bar-color: var(--primary);
+  --scroll-bar-background: var(--material-dark);
+  --status-check-tooltip-background: var(--material-dark);
+  --status-check-tooltip-color: var(--primary);
+  --description-tooltip-background: var(--material-dark);
+  --description-tooltip-color: var(--primary);
   &::-webkit-scrollbar-thumb {
-    border-left: 1px solid #131a1f;
+    border-left: 1px solid var(--material-dark);
   }
   div.context-menu {
     border: none;
-    background: #131a1f;
+    background: var(--material-dark);
     ul li:hover {
       background: #333c43;
     }