diff options
Diffstat (limited to 'packages/theme/src/themes/dark/index.ts')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts new file mode 100644 index 000000000..3a56719b2 --- /dev/null +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -0,0 +1,65 @@ | |||
1 | import color from 'color'; | ||
2 | |||
3 | import * as defaultStyles from '../default'; | ||
4 | import * as legacyStyles from '../legacy'; | ||
5 | |||
6 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | ||
7 | export const colorContentBackground = legacyStyles.darkThemeGrayDarkest; | ||
8 | export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | ||
9 | |||
10 | export const colorHeadline = legacyStyles.darkThemeTextColor; | ||
11 | export const colorText = legacyStyles.darkThemeTextColor; | ||
12 | |||
13 | // Loader | ||
14 | export const colorFullscreenLoaderSpinner = '#FFF'; | ||
15 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); | ||
16 | |||
17 | // Input | ||
18 | export const labelColor = legacyStyles.darkThemeTextColor; | ||
19 | export const inputColor = legacyStyles.darkThemeGrayLightest; | ||
20 | export const inputBackground = legacyStyles.themeGrayDark; | ||
21 | export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
22 | export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
23 | export const inputPrefixBackground = legacyStyles.darkThemeGray; | ||
24 | export const inputDisabledOpacity = 0.5; | ||
25 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; | ||
26 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
27 | export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(); | ||
28 | |||
29 | // Toggle | ||
30 | export const toggleBackground = legacyStyles.darkThemeGray; | ||
31 | export const toggleButton = legacyStyles.darkThemeGrayLighter; | ||
32 | |||
33 | // Button | ||
34 | export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor; | ||
35 | |||
36 | export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter; | ||
37 | export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | ||
38 | |||
39 | export const buttonDangerTextColor = legacyStyles.darkThemeTextColor; | ||
40 | |||
41 | export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; | ||
42 | |||
43 | export const buttonLoaderColor = { | ||
44 | primary: '#FFF', | ||
45 | secondary: buttonSecondaryTextColor, | ||
46 | success: '#FFF', | ||
47 | warning: '#FFF', | ||
48 | danger: '#FFF', | ||
49 | inverted: defaultStyles.brandPrimary, | ||
50 | }; | ||
51 | |||
52 | // Select | ||
53 | export const selectBackground = inputBackground; | ||
54 | export const selectBorder = inputBorder; | ||
55 | export const selectColor = inputColor; | ||
56 | export const selectToggleColor = inputPrefixColor; | ||
57 | export const selectPopupBackground = legacyStyles.darkThemeGrayLight; | ||
58 | export const selectOptionColor = '#FFF'; | ||
59 | export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`; | ||
60 | export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(); | ||
61 | export const selectOptionItemHoverColor = selectColor; | ||
62 | export const selectSearchColor = inputBackground; | ||
63 | |||
64 | // Modal | ||
65 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); | ||