Components

:root {
  color-scheme: dark;

  --color-accent: light-dark(#7c3aed, #2dd4bf);
}

.switch.md {
  --switch-width: var(--size-40);
  --switch-height: 22px;
}

.switch_box.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

import { useState } from "react";

import Switch from "@/components/library/react/Switch/Switch";

export default function Settings() {
  const [notify, setNotify] = useState(true);

  return (
    <Switch
      size={{ base: "sm", desktop: "md" }}
      label="Email alerts"
      checked={notify}
      onChange={setNotify}
    />
  );
}

<script setup lang="ts">
import { ref } from "vue";

import Switch from "@/components/library/vue/Switch/Switch.vue";

const notify = ref(true);
</script>

<template>
  <Switch
    :size="{ base: 'sm', desktop: 'md' }"
    label="Email alerts"
    v-model="notify"
  />
</template>