2020-11-23 00:07:32 +01:00
|
|
|
import { DefaultTheme, DarkTheme } from '@react-navigation/native'
|
|
|
|
|
|
|
|
export type ColorDefinitions =
|
|
|
|
| 'primary'
|
2020-12-03 01:28:56 +01:00
|
|
|
| 'primaryOverlay'
|
2020-11-23 00:07:32 +01:00
|
|
|
| 'secondary'
|
2020-12-26 14:40:10 +01:00
|
|
|
| 'disabled'
|
2020-12-26 00:40:27 +01:00
|
|
|
| 'blue'
|
|
|
|
| 'red'
|
2020-11-23 00:07:32 +01:00
|
|
|
| 'background'
|
2020-12-02 00:16:27 +01:00
|
|
|
| 'backgroundGradientStart'
|
|
|
|
| 'backgroundGradientEnd'
|
2020-12-03 01:28:56 +01:00
|
|
|
| 'backgroundOverlay'
|
2020-11-23 00:07:32 +01:00
|
|
|
| 'border'
|
2020-12-27 16:25:29 +01:00
|
|
|
| 'shimmer'
|
2020-11-23 00:07:32 +01:00
|
|
|
|
|
|
|
const themeColors: {
|
|
|
|
[key in ColorDefinitions]: {
|
|
|
|
light: string
|
|
|
|
dark: string
|
|
|
|
}
|
|
|
|
} = {
|
|
|
|
primary: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(18, 18, 18)',
|
|
|
|
dark: 'rgb(218, 218, 218)'
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2020-12-03 01:28:56 +01:00
|
|
|
primaryOverlay: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(250, 250, 250)',
|
|
|
|
dark: 'rgb(218, 218, 218)'
|
2020-12-03 01:28:56 +01:00
|
|
|
},
|
2020-11-23 00:07:32 +01:00
|
|
|
secondary: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(135, 135, 135)',
|
|
|
|
dark: 'rgb(135, 135, 135)'
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2020-12-26 14:40:10 +01:00
|
|
|
disabled: {
|
|
|
|
light: 'rgb(200, 200, 200)',
|
|
|
|
dark: 'rgb(66, 66, 66)'
|
|
|
|
},
|
2020-12-26 00:40:27 +01:00
|
|
|
blue: {
|
|
|
|
light: 'rgb(43, 144, 221)',
|
|
|
|
dark: 'rgb(43, 144, 221)'
|
2020-11-28 17:07:30 +01:00
|
|
|
},
|
2020-12-26 00:40:27 +01:00
|
|
|
red: {
|
|
|
|
light: 'rgb(225, 45, 35)',
|
|
|
|
dark: 'rgb(225, 98, 89)'
|
|
|
|
},
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
background: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(250, 250, 250)',
|
|
|
|
dark: 'rgb(18, 18, 18)'
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2020-12-02 00:16:27 +01:00
|
|
|
backgroundGradientStart: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgba(250, 250, 250, 0.5)',
|
|
|
|
dark: 'rgba(18, 18, 18, 0.5)'
|
2020-12-02 00:16:27 +01:00
|
|
|
},
|
|
|
|
backgroundGradientEnd: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgba(250, 250, 250, 1)',
|
|
|
|
dark: 'rgba(18, 18, 18, 1)'
|
2020-12-02 00:16:27 +01:00
|
|
|
},
|
2020-12-03 01:28:56 +01:00
|
|
|
backgroundOverlay: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgba(18, 18, 18, 0.5)',
|
2020-12-26 14:40:10 +01:00
|
|
|
dark: 'rgba(0, 0, 0, 0.5)'
|
2020-12-03 01:28:56 +01:00
|
|
|
},
|
2020-11-23 00:07:32 +01:00
|
|
|
border: {
|
2020-12-26 23:05:17 +01:00
|
|
|
light: 'rgba(18, 18, 18, 0.3)',
|
|
|
|
dark: 'rgba(255, 255, 255, 0.3)'
|
2020-12-27 16:25:29 +01:00
|
|
|
},
|
|
|
|
shimmer: {
|
|
|
|
light: [
|
|
|
|
'rgba(18, 18, 18, 0.05)',
|
|
|
|
'rgba(18, 18, 18, 0.15)',
|
|
|
|
'rgba(18, 18, 18, 0.05)'
|
|
|
|
],
|
|
|
|
dark: [
|
|
|
|
'rgba(250, 250, 250, 0.05)',
|
|
|
|
'rgba(250, 250, 250, 0.15)',
|
|
|
|
'rgba(250, 250, 250, 0.05)'
|
|
|
|
]
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const getTheme = (mode: 'light' | 'dark') => {
|
|
|
|
let Theme = {} as {
|
|
|
|
[key in ColorDefinitions]: string
|
|
|
|
}
|
|
|
|
const keys = Object.keys(themeColors) as ColorDefinitions[]
|
|
|
|
keys.forEach(key => (Theme[key] = themeColors[key][mode]))
|
|
|
|
|
|
|
|
return Theme
|
|
|
|
}
|
|
|
|
|
|
|
|
const themes = {
|
|
|
|
light: {
|
|
|
|
...DefaultTheme,
|
|
|
|
colors: {
|
|
|
|
...DefaultTheme.colors,
|
|
|
|
primary: themeColors.primary.light,
|
|
|
|
background: themeColors.background.light,
|
2020-12-27 16:25:29 +01:00
|
|
|
card: themeColors.background.light,
|
2020-11-23 00:07:32 +01:00
|
|
|
text: themeColors.primary.light,
|
|
|
|
border: themeColors.border.light,
|
2020-12-27 16:25:29 +01:00
|
|
|
notification: themeColors.red.light
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
dark: {
|
|
|
|
...DarkTheme,
|
|
|
|
colors: {
|
|
|
|
...DarkTheme.colors,
|
|
|
|
primary: themeColors.primary.dark,
|
|
|
|
background: themeColors.background.dark,
|
2020-12-27 16:25:29 +01:00
|
|
|
card: themeColors.background.dark,
|
2020-11-23 00:07:32 +01:00
|
|
|
text: themeColors.primary.dark,
|
|
|
|
border: themeColors.border.dark,
|
2020-12-27 16:25:29 +01:00
|
|
|
notification: themeColors.red.dark
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export { themeColors, getTheme, themes }
|