diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index bed2a403b9..0124ddfbdb 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -110,6 +110,7 @@ const {
   editorGreenColor,
   editorBlueColor,
   editorOrangeColor,
+  editorRedColor,
   windowsColor,
   linuxColor,
   androidColor,
@@ -1301,7 +1302,7 @@ export const getBaseTheme = () => {
       backgroundColor: lightGrayHover,
 
       animation: {
-        background: "#4781D1",
+        background: lightBlueMain,
       },
 
       percent: {
@@ -1855,7 +1856,7 @@ export const getBaseTheme = () => {
       closeButtonIcon: white,
       closeButtonSize: "17px",
 
-      nameColor: "#858585",
+      nameColor: grayDark,
 
       links: {
         iconColor: lightIcons,
@@ -2829,7 +2830,7 @@ export const getBaseTheme = () => {
             greenBackgroundColor: editorGreenColor,
             blueBackgroundColor: editorBlueColor,
             orangeBackgroundColor: editorOrangeColor,
-            redBackgroundColor: "#AA5251",
+            redBackgroundColor: editorRedColor,
 
             dataFontColor: white,
             dataFontColorBlack: black,
@@ -3161,20 +3162,20 @@ export const getBaseTheme = () => {
     },
     oauth: {
       previewDialog: {
-        border: "1px solid #eceef1",
+        border: `1px solid ${grayLightMid}`,
       },
       infoDialog: {
-        descLinkColor: "#657077",
-        blockHeaderColor: "#a3a9ae",
-        separatorColor: "#333333",
+        descLinkColor: lightGrayDark,
+        blockHeaderColor: gray,
+        separatorColor: black,
       },
       list: {
-        descriptionColor: "#a3a9ae",
+        descriptionColor: gray,
       },
       clientForm: {
-        descriptionColor: "#a3a9ae",
-        headerBorder: "1px solid #d0d5da",
-        scopeDesc: "#a3a9ae",
+        descriptionColor: gray,
+        headerBorder: `1px solid ${grayStrong}`,
+        scopeDesc: gray,
       },
     },
     sdkPresets: {
@@ -3193,8 +3194,8 @@ export const getBaseTheme = () => {
     },
 
     embeddingPanel: {
-      descriptionTextColor: "#657077",
-      iconColor: "#657077",
+      descriptionTextColor: lightGrayDark,
+      iconColor: lightGrayDark,
     },
 
     completedForm: {
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index be64b1e948..61b3702893 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -100,6 +100,7 @@ const {
   editorGreenColor,
   editorBlueColor,
   editorOrangeColor,
+  editorRedColor,
   windowsColor,
   linuxColor,
   androidColor,
@@ -1284,7 +1285,7 @@ const Dark: TTheme = {
     backgroundColor: grayDark,
 
     animation: {
-      background: "#FFFFFF",
+      background: white,
     },
 
     percent: {
@@ -1840,7 +1841,7 @@ const Dark: TTheme = {
     closeButtonIcon: black,
     closeButtonSize: "12px",
 
-    nameColor: "#A3A9AE",
+    nameColor: gray,
 
     links: {
       iconColor: grayDark,
@@ -2814,7 +2815,7 @@ const Dark: TTheme = {
           greenBackgroundColor: editorGreenColor,
           blueBackgroundColor: editorBlueColor,
           orangeBackgroundColor: editorOrangeColor,
-          redBackgroundColor: "#AA5251",
+          redBackgroundColor: editorRedColor,
 
           dataFontColor: white,
           dataFontColorBlack: white,
@@ -3144,20 +3145,20 @@ const Dark: TTheme = {
 
   oauth: {
     previewDialog: {
-      border: "1px solid #242424",
+      border: `1px solid ${grayDarkMid}`,
     },
     infoDialog: {
-      descLinkColor: "#adadad",
-      blockHeaderColor: "#858585",
-      separatorColor: "#474747",
+      descLinkColor: darkGrayDark,
+      blockHeaderColor: grayDark,
+      separatorColor: grayDarkStrong,
     },
     list: {
-      descriptionColor: "#858585",
+      descriptionColor: grayDark,
     },
     clientForm: {
-      descriptionColor: "#858585",
-      headerBorder: "1px solid #474747",
-      scopeDesc: "#858585",
+      descriptionColor: grayDark,
+      headerBorder: `1px solid ${grayDarkStrong}`,
+      scopeDesc: grayDark,
     },
   },
   sdkPresets: {
@@ -3177,8 +3178,8 @@ const Dark: TTheme = {
   },
 
   embeddingPanel: {
-    descriptionTextColor: "#ADADAD",
-    iconColor: "#ADADAD",
+    descriptionTextColor: darkGrayDark,
+    iconColor: darkGrayDark,
   },
   completedForm: {
     linkColor: white,
diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts
index 5cc454da1c..37ba928838 100644
--- a/packages/shared/themes/globalColors.ts
+++ b/packages/shared/themes/globalColors.ts
@@ -108,6 +108,7 @@ export const globalColors = {
   editorGreenColor: "#40865C",
   editorBlueColor: "#446995",
   editorOrangeColor: "#AA5252",
+  editorRedColor: "#AA5251",
   windowsColor: "#4C83CD",
   linuxColor: "#F4BB40",
   androidColor: "#A8D548",