2022-12-28 23:41:36 +01:00
|
|
|
import { DarkTheme, DefaultTheme } from '@react-navigation/native'
|
2020-11-23 00:07:32 +01:00
|
|
|
|
2022-02-12 14:51:01 +01:00
|
|
|
export type Theme = 'light' | 'dark_lighter' | 'dark_darker'
|
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
export type ColorDefinitions =
|
2021-03-21 14:14:10 +01:00
|
|
|
| 'primaryDefault'
|
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'
|
2021-03-21 14:14:10 +01:00
|
|
|
| 'green'
|
|
|
|
| 'yellow'
|
|
|
|
| 'backgroundDefault'
|
2021-05-09 21:59:03 +02:00
|
|
|
| 'backgroundDefaultTransparent'
|
2021-03-21 14:14:10 +01:00
|
|
|
| 'backgroundOverlayDefault'
|
|
|
|
| 'backgroundOverlayInvert'
|
2020-11-23 00:07:32 +01:00
|
|
|
| 'border'
|
2021-01-07 19:13:09 +01:00
|
|
|
| 'shimmerDefault'
|
|
|
|
| 'shimmerHighlight'
|
2020-11-23 00:07:32 +01:00
|
|
|
|
|
|
|
const themeColors: {
|
|
|
|
[key in ColorDefinitions]: {
|
|
|
|
light: string
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: string
|
|
|
|
dark_darker: string
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
} = {
|
2021-03-21 14:14:10 +01:00
|
|
|
primaryDefault: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(18, 18, 18)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(250, 250, 250)',
|
|
|
|
dark_darker: 'rgb(180, 180, 180)'
|
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)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(200, 200, 200)',
|
|
|
|
dark_darker: 'rgb(200, 200, 200)'
|
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)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(160, 160, 160)',
|
|
|
|
dark_darker: 'rgb(130, 130, 130)'
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2020-12-26 14:40:10 +01:00
|
|
|
disabled: {
|
2023-01-26 00:57:48 +01:00
|
|
|
light: 'rgb(220, 220, 220)',
|
|
|
|
dark_lighter: 'rgb(70, 70, 70)',
|
|
|
|
dark_darker: 'rgb(50, 50, 50)'
|
2020-12-26 14:40:10 +01:00
|
|
|
},
|
2020-12-26 00:40:27 +01:00
|
|
|
blue: {
|
|
|
|
light: 'rgb(43, 144, 221)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(43, 144, 221)',
|
|
|
|
dark_darker: '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)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(230, 60, 60)',
|
|
|
|
dark_darker: 'rgb(225, 78, 79)'
|
2020-12-26 00:40:27 +01:00
|
|
|
},
|
2021-03-21 14:14:10 +01:00
|
|
|
green: {
|
|
|
|
light: 'rgb(18, 158, 80)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(20, 185, 80)',
|
|
|
|
dark_darker: 'rgb(18, 158, 80)'
|
2021-03-21 14:14:10 +01:00
|
|
|
},
|
|
|
|
yellow: {
|
|
|
|
light: 'rgb(230, 166, 30)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(220, 160, 25)',
|
|
|
|
dark_darker: 'rgb(200, 145, 25)'
|
2021-03-21 14:14:10 +01:00
|
|
|
},
|
2020-12-26 00:40:27 +01:00
|
|
|
|
2021-03-21 14:14:10 +01:00
|
|
|
backgroundDefault: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgb(250, 250, 250)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgb(44, 44, 44)',
|
2022-12-31 00:31:25 +01:00
|
|
|
dark_darker: 'rgb(0, 0, 0)'
|
2020-11-23 00:07:32 +01:00
|
|
|
},
|
2021-05-09 21:59:03 +02:00
|
|
|
backgroundDefaultTransparent: {
|
|
|
|
light: 'rgba(250, 250, 250, 0)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgba(18, 18, 18, 0)',
|
|
|
|
dark_darker: 'rgba(18, 18, 18, 0)'
|
2021-05-09 21:59:03 +02:00
|
|
|
},
|
2021-03-21 14:14:10 +01:00
|
|
|
backgroundOverlayDefault: {
|
2020-12-26 00:40:27 +01:00
|
|
|
light: 'rgba(250, 250, 250, 0.5)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgba(44, 44, 44, 0.5)',
|
|
|
|
dark_darker: 'rgba(18, 18, 18, 0.5)'
|
2020-12-02 00:16:27 +01:00
|
|
|
},
|
2021-03-21 14:14:10 +01:00
|
|
|
backgroundOverlayInvert: {
|
2021-01-12 00:12:44 +01:00
|
|
|
light: 'rgba(25, 25, 25, 0.5)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgba(0, 0, 0, 0.5)',
|
|
|
|
dark_darker: 'rgba(0, 0, 0, 0.5)'
|
2020-12-03 01:28:56 +01:00
|
|
|
},
|
2021-03-21 14:14:10 +01:00
|
|
|
|
2020-11-23 00:07:32 +01:00
|
|
|
border: {
|
2022-12-31 00:07:28 +01:00
|
|
|
light: 'rgb(180, 180, 180)',
|
|
|
|
dark_lighter: 'rgb(90, 90, 90)',
|
|
|
|
dark_darker: 'rgb(90, 90, 90)'
|
2020-12-27 16:25:29 +01:00
|
|
|
},
|
2021-03-21 14:14:10 +01:00
|
|
|
|
2021-01-07 19:13:09 +01:00
|
|
|
shimmerDefault: {
|
2021-01-12 00:12:44 +01:00
|
|
|
light: 'rgba(25, 25, 25, 0.05)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgba(250, 250, 250, 0.05)',
|
|
|
|
dark_darker: 'rgba(250, 250, 250, 0.05)'
|
2021-01-07 19:13:09 +01:00
|
|
|
},
|
|
|
|
shimmerHighlight: {
|
2021-01-12 00:12:44 +01:00
|
|
|
light: 'rgba(25, 25, 25, 0.15)',
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: 'rgba(250, 250, 250, 0.15)',
|
|
|
|
dark_darker: 'rgba(250, 250, 250, 0.15)'
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-12 14:51:01 +01:00
|
|
|
const getColors = (theme: Theme): { [key in ColorDefinitions]: string } => {
|
|
|
|
let colors = {} as {
|
2020-11-23 00:07:32 +01:00
|
|
|
[key in ColorDefinitions]: string
|
|
|
|
}
|
|
|
|
const keys = Object.keys(themeColors) as ColorDefinitions[]
|
2022-02-12 14:51:01 +01:00
|
|
|
keys.forEach(key => (colors[key] = themeColors[key][theme]))
|
2020-11-23 00:07:32 +01:00
|
|
|
|
2022-02-12 14:51:01 +01:00
|
|
|
return colors
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const themes = {
|
|
|
|
light: {
|
|
|
|
...DefaultTheme,
|
|
|
|
colors: {
|
|
|
|
...DefaultTheme.colors,
|
2021-03-21 14:14:10 +01:00
|
|
|
primary: themeColors.primaryDefault.light,
|
|
|
|
background: themeColors.backgroundDefault.light,
|
|
|
|
card: themeColors.backgroundDefault.light,
|
|
|
|
text: themeColors.primaryDefault.light,
|
2020-11-23 00:07:32 +01:00
|
|
|
border: themeColors.border.light,
|
2020-12-27 16:25:29 +01:00
|
|
|
notification: themeColors.red.light
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
},
|
2022-02-12 14:51:01 +01:00
|
|
|
dark_lighter: {
|
|
|
|
...DarkTheme,
|
|
|
|
colors: {
|
|
|
|
...DarkTheme.colors,
|
|
|
|
primary: themeColors.primaryDefault.dark_lighter,
|
|
|
|
background: themeColors.backgroundDefault.dark_lighter,
|
|
|
|
card: themeColors.backgroundDefault.dark_lighter,
|
|
|
|
text: themeColors.primaryDefault.dark_lighter,
|
|
|
|
border: themeColors.border.dark_lighter,
|
|
|
|
notification: themeColors.red.dark_lighter
|
|
|
|
}
|
|
|
|
},
|
|
|
|
dark_darker: {
|
2020-11-23 00:07:32 +01:00
|
|
|
...DarkTheme,
|
|
|
|
colors: {
|
|
|
|
...DarkTheme.colors,
|
2022-02-12 14:51:01 +01:00
|
|
|
primary: themeColors.primaryDefault.dark_darker,
|
|
|
|
background: themeColors.backgroundDefault.dark_darker,
|
|
|
|
card: themeColors.backgroundDefault.dark_darker,
|
|
|
|
text: themeColors.primaryDefault.dark_darker,
|
|
|
|
border: themeColors.border.dark_darker,
|
|
|
|
notification: themeColors.red.dark_darker
|
2020-11-23 00:07:32 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-12 14:51:01 +01:00
|
|
|
export { themeColors, getColors, themes }
|