Shared: Themes: fix missing

packages/shared/themes/base.ts

@@ -120,6 +120,8 @@ const {
   lightScroll,
   lightScrollHover,
   lightScrollActive,
+  silver,
+  highlandGray,
 } = globalColors;
 
 export const getBaseTheme = () => {
@@ -2164,30 +2166,29 @@ export const getBaseTheme = () => {
 
     mediaViewer: {
       color: grayStrong,
-      background: "rgba(17, 17, 17, 0.867)",
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
+      backgroundColor: highlandGray,
       fill: white,
       titleColor: white,
       iconColor: white,
 
       controlBtn: {
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: silver,
       },
 
       imageViewer: {
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
-        inactiveBackgroundColor: "rgba(11,11,11,0.7)",
+        backgroundColor: silver,
+        inactiveBackgroundColor: highlandGray,
         fill: white,
       },
 
       progressBar: {
         background: grayStrong,
-        backgroundColor: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: silver,
       },
 
       scrollButton: {
-        backgroundColor: "rgba(11, 11, 11, 0.7)",
-        background: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: highlandGray,
+        background: silver,
         border: `solid ${white}`,
       },
 
@@ -2197,8 +2198,8 @@ export const getBaseTheme = () => {
         color: grayStrong,
         colorError: white,
         backgroundColorError: darkBlack,
-        backgroundColor: "rgba(11, 11, 11, 0.7)",
-        background: "rgba(200, 200, 200, 0.2)",
+        backgroundColor: highlandGray,
+        background: silver,
       },
     },
 

packages/shared/themes/dark.ts

@@ -109,6 +109,8 @@ const {
   darkScroll,
   darkScrollHover,
   darkScrollActive,
+  silver,
+  highlandGray,
 } = globalColors;
 
 const Dark: TTheme = {
@@ -2147,30 +2149,29 @@ const Dark: TTheme = {
 
   mediaViewer: {
     color: grayDarkStrong,
-    background: "rgba(17, 17, 17, 0.867)",
-    backgroundColor: "rgba(11, 11, 11, 0.7)",
+    backgroundColor: highlandGray,
     fill: white,
     titleColor: white,
     iconColor: white,
 
     controlBtn: {
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: silver,
     },
 
     imageViewer: {
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
-      inactiveBackgroundColor: "rgba(11,11,11,0.7)",
+      backgroundColor: silver,
+      inactiveBackgroundColor: highlandGray,
       fill: white,
     },
 
     progressBar: {
       background: grayDarkStrong,
-      backgroundColor: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: silver,
     },
 
     scrollButton: {
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
-      background: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: highlandGray,
+      background: silver,
       border: `solid ${white}`,
     },
 
@@ -2180,8 +2181,8 @@ const Dark: TTheme = {
       color: grayDarkStrong,
       colorError: white,
       backgroundColorError: darkBlack,
-      backgroundColor: "rgba(11, 11, 11, 0.7)",
-      background: "rgba(200, 200, 200, 0.2)",
+      backgroundColor: highlandGray,
+      background: silver,
     },
   },
 

packages/shared/themes/globalColors.ts

@@ -127,4 +127,12 @@ export const globalColors = {
   darkScroll: "rgba(136, 136, 136, 0.4)",
   darkScrollHover: "rgba(136, 136, 136, 0.64)",
   darkScrollActive: "rgba(136, 136, 136, 0.8)",
+
+  //
+  silver: "rgba(200, 200, 200, 0.2)",
+  highlandGray: "rgba(11, 11, 11, 0.7)",
+  alphaGreenLight: "rgba(53, 173, 23, 0.1)",
+  alphaGreenDark: "rgba(59, 164, 32, 0.1)",
+  alphaRedLight: "rgba(242, 28, 14, 0.1)",
+  alphaRedDark: "rgba(224, 100, 81, 0.1)",
 };