diff options
Diffstat (limited to 'packages/theme/src/themes/dark/index.ts')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index c8ad78829..7d7bab399 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -18,7 +18,9 @@ export default (brandPrimary: string) => { | |||
18 | const inputColor = legacyStyles.darkThemeGrayLightest; | 18 | const inputColor = legacyStyles.darkThemeGrayLightest; |
19 | const inputBackground = legacyStyles.themeGrayDark; | 19 | const inputBackground = legacyStyles.themeGrayDark; |
20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | 20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; |
21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | 21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) |
22 | .lighten(0.3) | ||
23 | .hex(); | ||
22 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | 24 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; |
23 | const selectColor = inputColor; | 25 | const selectColor = inputColor; |
24 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | 26 | const drawerBg = color(colorBackground).lighten(0.3).hex(); |
@@ -47,7 +49,10 @@ export default (brandPrimary: string) => { | |||
47 | 49 | ||
48 | // Loader | 50 | // Loader |
49 | colorFullscreenLoaderSpinner: '#FFF', | 51 | colorFullscreenLoaderSpinner: '#FFF', |
50 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(), | 52 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) |
53 | .alpha(0.5) | ||
54 | .rgb() | ||
55 | .string(), | ||
51 | 56 | ||
52 | // Input | 57 | // Input |
53 | labelColor: legacyStyles.darkThemeTextColor, | 58 | labelColor: legacyStyles.darkThemeTextColor, |
@@ -58,8 +63,12 @@ export default (brandPrimary: string) => { | |||
58 | inputPrefixBackground: legacyStyles.darkThemeGray, | 63 | inputPrefixBackground: legacyStyles.darkThemeGray, |
59 | inputDisabledOpacity: 0.5, | 64 | inputDisabledOpacity: 0.5, |
60 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, | 65 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, |
61 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(), | 66 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter) |
62 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(), | 67 | .lighten(0.3) |
68 | .hex(), | ||
69 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) | ||
70 | .darken(0.1) | ||
71 | .hex(), | ||
63 | 72 | ||
64 | // Toggle | 73 | // Toggle |
65 | toggleBackground: legacyStyles.darkThemeGray, | 74 | toggleBackground: legacyStyles.darkThemeGray, |
@@ -91,13 +100,20 @@ export default (brandPrimary: string) => { | |||
91 | selectToggleColor: inputPrefixColor, | 100 | selectToggleColor: inputPrefixColor, |
92 | selectPopupBackground: legacyStyles.darkThemeGrayLight, | 101 | selectPopupBackground: legacyStyles.darkThemeGrayLight, |
93 | selectOptionColor: '#FFF', | 102 | selectOptionColor: '#FFF', |
94 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`, | 103 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) |
95 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(), | 104 | .darken(0.2) |
105 | .hex()}`, | ||
106 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) | ||
107 | .darken(0.2) | ||
108 | .hex(), | ||
96 | selectOptionItemHoverColor: selectColor, | 109 | selectOptionItemHoverColor: selectColor, |
97 | selectSearchColor: inputBackground, | 110 | selectSearchColor: inputBackground, |
98 | 111 | ||
99 | // Modal | 112 | // Modal |
100 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(), | 113 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) |
114 | .alpha(0.9) | ||
115 | .rgb() | ||
116 | .string(), | ||
101 | colorModalBackground: legacyStyles.darkThemeGrayDark, | 117 | colorModalBackground: legacyStyles.darkThemeGrayDark, |
102 | 118 | ||
103 | // Services | 119 | // Services |