Tweak dark mode on web

zio/stable
Paul Frazee 2023-08-30 10:56:07 -07:00
parent b847917969
commit cd8ae1298e
1 changed files with 10 additions and 3 deletions

View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
interface Props { interface Props {
testID?: string testID?: string
@ -19,14 +20,20 @@ export function TitleColumnLayout({
contentStyle, contentStyle,
}: React.PropsWithChildren<Props>) { }: React.PropsWithChildren<Props>) {
const pal = usePalette('default') const pal = usePalette('default')
const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
const contentBg = useColorSchemeStyle(pal.view, {
backgroundColor: pal.colors.background,
borderColor: pal.colors.border,
borderLeftWidth: 1,
})
const layoutStyles = horizontal ? styles2Column : styles1Column const layoutStyles = horizontal ? styles2Column : styles1Column
return ( return (
<View testID={testID} style={layoutStyles.container}> <View testID={testID} style={layoutStyles.container}>
<View style={[layoutStyles.title, pal.viewLight, titleStyle]}> <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
{title} <View style={[layoutStyles.content, contentBg, contentStyle]}>
{children}
</View> </View>
<View style={[layoutStyles.content, contentStyle]}>{children}</View>
</View> </View>
) )
} }