Update darkTheme (#781)

* Update darkTheme

* Add font color variation to IconButton

front/src/modules/ui/themes/background.ts

@@ -1,4 +1,4 @@
-import DarkNoise from './assets/dark-noise.png';
+import DarkNoise from './assets/dark-noise.jpg';
 import LightNoise from './assets/light-noise.png';
 import { grayScale, rgba } from './colors';
 
@@ -16,22 +16,22 @@ export const backgroundLight = {
     light: rgba(grayScale.gray100, 0.04),
     lighter: rgba(grayScale.gray100, 0.02),
   },
-  overlay: rgba(grayScale.gray85, 0.8),
+  overlay: rgba(grayScale.gray80, 0.8),
 };
 
 export const backgroundDark = {
   noisy: `url(${DarkNoise.toString()});`,
-  primary: grayScale.gray90,
-  secondary: grayScale.gray85,
-  tertiary: grayScale.gray80,
-  quaternary: grayScale.gray75,
+  primary: grayScale.gray85,
+  secondary: grayScale.gray80,
+  tertiary: grayScale.gray75,
+  quaternary: grayScale.gray70,
   transparent: {
-    primary: rgba(grayScale.gray90, 0.8),
-    secondary: rgba(grayScale.gray85, 0.8),
-    strong: rgba(grayScale.gray0, 0.09),
-    medium: rgba(grayScale.gray0, 0.06),
-    light: rgba(grayScale.gray0, 0.03),
-    lighter: rgba(grayScale.gray0, 0.02),
+    primary: rgba(grayScale.gray85, 0.8),
+    secondary: rgba(grayScale.gray80, 0.8),
+    strong: rgba(grayScale.gray0, 0.14),
+    medium: rgba(grayScale.gray0, 0.1),
+    light: rgba(grayScale.gray0, 0.06),
+    lighter: rgba(grayScale.gray0, 0.03),
   },
-  overlay: rgba(grayScale.gray85, 0.8),
+  overlay: rgba(grayScale.gray80, 0.8),
 };

front/src/modules/ui/themes/border.ts

@@ -22,11 +22,11 @@ export const borderLight = {
 
 export const borderDark = {
   color: {
-    strong: grayScale.gray65,
-    medium: grayScale.gray70,
-    light: grayScale.gray75,
-    secondaryInverted: grayScale.gray40,
-    inverted: grayScale.gray30,
+    strong: grayScale.gray55,
+    medium: grayScale.gray65,
+    light: grayScale.gray70,
+    secondaryInverted: grayScale.gray35,
+    inverted: grayScale.gray20,
   },
   ...common,
 };

front/src/modules/ui/themes/colors.ts

@@ -2,7 +2,6 @@ import hexRgb from 'hex-rgb';
 
 export const grayScale = {
   gray100: '#000000',
-  gray95: '#0f0f0f',
   gray90: '#141414',
   gray85: '#171717',
   gray80: '#1b1b1b',
@@ -18,7 +17,7 @@ export const grayScale = {
   gray30: '#cccccc',
   gray25: '#d6d6d6',
   gray20: '#ebebeb',
-  gray15: '#f5f5f5',
+  gray15: '#f1f1f1',
   gray10: '#fcfcfc',
   gray0: '#ffffff',
 };

front/src/modules/ui/themes/font.ts

@@ -32,11 +32,11 @@ export const fontLight = {
 
 export const fontDark = {
   color: {
-    primary: grayScale.gray30,
-    secondary: grayScale.gray40,
-    tertiary: grayScale.gray50,
-    light: grayScale.gray55,
-    extraLight: grayScale.gray60,
+    primary: grayScale.gray20,
+    secondary: grayScale.gray35,
+    tertiary: grayScale.gray45,
+    light: grayScale.gray50,
+    extraLight: grayScale.gray55,
     inverted: grayScale.gray100,
   },
   ...common,