aboutsummaryrefslogtreecommitdiffstats
path: root/packages/theme/src/themes/dark/index.ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/theme/src/themes/dark/index.ts')
-rw-r--r--packages/theme/src/themes/dark/index.ts51
1 files changed, 23 insertions, 28 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 684865124..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
@@ -144,16 +160,6 @@ export default (brandPrimary: string) => {
144 }, 160 },
145 }), 161 }),
146 162
147 // Signup
148 signup: merge({}, defaultStyles.signup, {
149 pricing: {
150 feature: {
151 background: legacyStyles.darkThemeGrayLight,
152 border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
153 },
154 },
155 }),
156
157 // Todos 163 // Todos
158 todos: merge({}, defaultStyles.todos, { 164 todos: merge({}, defaultStyles.todos, {
159 todosLayer: { 165 todosLayer: {
@@ -168,16 +174,5 @@ export default (brandPrimary: string) => {
168 background: legacyStyles.themeGrayLight, 174 background: legacyStyles.themeGrayLight,
169 }, 175 },
170 }), 176 }),
171
172 // TrialStatusBar
173 trialStatusBar: merge({}, defaultStyles.trialStatusBar, {
174 bar: {
175 background: legacyStyles.darkThemeGray,
176 },
177 progressBar: {
178 background: legacyStyles.darkThemeGrayLighter,
179 progressIndicator: legacyStyles.darkThemeGrayLightest,
180 },
181 }),
182 }; 177 };
183}; 178};