Improve switch contrast in zinc theme
This commit is contained in:
@@ -10,6 +10,7 @@ const { theme } = vi.hoisted(() => ({
|
|||||||
colors: {
|
colors: {
|
||||||
surface3: "#333",
|
surface3: "#333",
|
||||||
accent: "#0a84ff",
|
accent: "#0a84ff",
|
||||||
|
accentForeground: "#fff",
|
||||||
palette: { white: "#fff" },
|
palette: { white: "#fff" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -53,6 +53,11 @@ export function Switch({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const thumbAnimatedStyle = useAnimatedStyle(() => ({
|
const thumbAnimatedStyle = useAnimatedStyle(() => ({
|
||||||
|
backgroundColor: interpolateColor(
|
||||||
|
progress.value,
|
||||||
|
[0, 1],
|
||||||
|
[theme.colors.palette.white, theme.colors.accentForeground],
|
||||||
|
),
|
||||||
transform: [{ translateX: progress.value * thumbTravel }],
|
transform: [{ translateX: progress.value * thumbTravel }],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@@ -116,7 +121,6 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
},
|
},
|
||||||
thumb: {
|
thumb: {
|
||||||
backgroundColor: theme.colors.palette.white,
|
|
||||||
shadowColor: "rgba(0, 0, 0, 0.25)",
|
shadowColor: "rgba(0, 0, 0, 0.25)",
|
||||||
shadowOffset: { width: 0, height: 1 },
|
shadowOffset: { width: 0, height: 1 },
|
||||||
shadowRadius: 2,
|
shadowRadius: 2,
|
||||||
|
|||||||
Reference in New Issue
Block a user