diff --git a/components/Login/helpers/server-address.tsx b/components/Login/helpers/server-address.tsx
index ba86a665..2916224b 100644
--- a/components/Login/helpers/server-address.tsx
+++ b/components/Login/helpers/server-address.tsx
@@ -67,7 +67,10 @@ export default function ServerAddress(): React.JSX.Element {
onCheckedChange={(checked) => setUseHttps(checked)}
label="Use HTTPS"
size="$2"
- width={100} />
+ width={100}
+ backgroundColor="$accentColor"
+ />
+
diff --git a/components/helpers/switch-with-label.tsx b/components/helpers/switch-with-label.tsx
index 775faa7d..c0e348d1 100644
--- a/components/helpers/switch-with-label.tsx
+++ b/components/helpers/switch-with-label.tsx
@@ -1,7 +1,16 @@
-import { SizeTokens, XStack, Separator, Switch } from "tamagui";
+import { SizeTokens, XStack, Separator, Switch, ColorTokens } from "tamagui";
import { Label } from "./text";
-export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void, width?: number }) {
+interface SwitchWithLabelProps {
+ onCheckedChange: (value: boolean) => void,
+ size: SizeTokens
+ checked: boolean;
+ label: string;
+ width?: number | undefined;
+ backgroundColor?: ColorTokens;
+}
+
+export function SwitchWithLabel(props: SwitchWithLabelProps) {
const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
return (
@@ -17,7 +26,7 @@ export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, lab
size={props.size}
checked={props.checked}
onCheckedChange={(checked: boolean) => props.onCheckedChange(checked)}
- backgroundColor="$color"
+ backgroundColor={props.backgroundColor}
>