mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-22 03:00:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

adjust border color for switch in dark mode

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-20 22:37:17 -06:00
parent cbaadff929
commit 4cf72e355f
1 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/Global/helpers/switch-with-label.tsx
View File

@@ -1,5 +1,6 @@
import { SizeTokens, XStack, Separator, Switch, Theme, styled, getToken } from "tamagui";
import { Label } from "./text";
import { useColorScheme } from "react-native";
interface SwitchWithLabelProps {
onCheckedChange: (value: boolean) => void,
@@ -15,28 +16,31 @@ const JellifySliderThumb = styled(Switch.Thumb, {
})
export function SwitchWithLabel(props: SwitchWithLabelProps) {
const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
return (
<XStack alignItems="center" gap="$3">
<Label
size={props.size}
htmlFor={id}
const isDarkMode = useColorScheme() === 'dark'
const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
return (
<XStack alignItems="center" gap="$3">
<Label
size={props.size}
htmlFor={id}
>
{props.label}
</Label>
<Separator minHeight={20} vertical />
<Switch
id={id}
size={props.size}
checked={props.checked}
onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)}
backgroundColor={props.checked ? getToken("$color.telemagenta") : getToken("$color.purpleGray")}
borderColor={isDarkMode ? getToken("$color.amethyst") : getToken("$color.purpleDark")}
>
{props.label}
</Label>
<Separator minHeight={20} vertical />
<Switch
id={id}
size={props.size}
checked={props.checked}
onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)}
backgroundColor={props.checked ? getToken("$color.telemagenta") : getToken("$color.purpleGray")}
borderColor={getToken("$color.purpleDark")}
>
<JellifySliderThumb animation="bouncy" />
</Switch>
</XStack>
<JellifySliderThumb animation="bouncy" />
</Switch>
</XStack>
)
}