SwicthコンポーネントのcolorScheme を指定することで、
選択中の色を変更することができます。

公式ドキュメント

<Switch colorScheme="teal" size="lg" />

以下のようなカスタムテーマで設定したカラーコードを設定したい場合、
colorScheme="theme.primary"のように指定しても
ブラウザではcolor: theme.primary.500; のようになってしまい、色が反映されません..

const theme = extendTheme({
  colors: {
    theme: {
      primary: '#30A49D',
    },
  },
})

以下のように、 500 のプロパティを新たに追加することで
colorSchemeの値をカスタマイズできるようになります。

const theme = extendTheme({
  colors: {
    switch: {
      500: '#30A49D',
    },
  },
})

<Switch colorScheme="switch" size="lg" />