diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx index 7d3dae51..c93f958f 100644 --- a/src/components/Separator.tsx +++ b/src/components/Separator.tsx @@ -22,7 +22,7 @@ const ComponentSeparator: React.FC = ({ style, { backgroundColor: colors.backgroundDefault, - borderTopColor: colors.border, + borderTopColor: colors.separator, borderTopWidth: 1, marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft, marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight diff --git a/src/utils/styles/themes.ts b/src/utils/styles/themes.ts index daced6f5..7ee34c71 100644 --- a/src/utils/styles/themes.ts +++ b/src/utils/styles/themes.ts @@ -1,4 +1,5 @@ import { DarkTheme, DefaultTheme } from '@react-navigation/native' +import { Platform, PlatformColor } from 'react-native' export type Theme = 'light' | 'dark_lighter' | 'dark_darker' @@ -16,6 +17,7 @@ export type ColorDefinitions = | 'backgroundOverlayDefault' | 'backgroundOverlayInvert' | 'border' + | 'separator' | 'shimmerDefault' | 'shimmerHighlight' @@ -94,6 +96,33 @@ const themeColors: { dark_darker: 'rgb(90, 90, 90)' }, + separator: { + light: PlatformColor( + Platform.select({ + ios: 'separator', + android: '?android:attr/dividerVertical', + default: 'rgb(180, 180, 180)' + }), + 'rgb(180, 180, 180)' + ) as unknown as string, + dark_lighter: PlatformColor( + Platform.select({ + ios: 'separator', + android: '?android:attr/dividerVertical', + default: 'rgb(90, 90, 90)' + }), + 'rgb(90, 90, 90)' + ) as unknown as string, + dark_darker: PlatformColor( + Platform.select({ + ios: 'separator', + android: '?android:attr/dividerVertical', + default: 'rgb(90, 90, 90)' + }), + 'rgb(90, 90, 90)' + ) as unknown as string + }, + shimmerDefault: { light: 'rgba(25, 25, 25, 0.05)', dark_lighter: 'rgba(250, 250, 250, 0.05)',