flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
47 lines (44 loc) • 1.85 kB
JavaScript
import { createTheme } from '../../helpers/create-theme.mjs';
const toggleSwitchTheme = createTheme({
root: {
base: "group relative flex items-center rounded-lg focus:outline-none",
active: {
on: "cursor-pointer",
off: "cursor-not-allowed opacity-50"
},
label: "ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
},
toggle: {
base: "rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25",
checked: {
on: "after:translate-x-full after:border-white",
off: "border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700",
color: {
blue: "border-cyan-700 bg-cyan-700",
dark: "bg-dark-700 border-dark-900",
failure: "border-red-900 bg-red-700",
gray: "border-gray-600 bg-gray-500",
green: "border-green-700 bg-green-600",
light: "bg-light-700 border-light-900",
red: "border-red-900 bg-red-700",
purple: "border-purple-900 bg-purple-700",
success: "border-green-500 bg-green-500",
yellow: "border-yellow-400 bg-yellow-400",
warning: "border-yellow-600 bg-yellow-600",
cyan: "border-cyan-500 bg-cyan-500",
lime: "border-lime-400 bg-lime-400",
indigo: "border-indigo-400 bg-indigo-400",
teal: "bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4",
info: "border-cyan-600 bg-cyan-600",
pink: "border-pink-600 bg-pink-600"
}
},
sizes: {
sm: "h-5 w-9 after:absolute after:left-[2px] after:top-[2px] after:h-4 after:w-4",
md: "h-6 w-11 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5",
lg: "h-7 w-14 after:absolute after:left-[4px] after:top-0.5 after:h-6 after:w-6"
}
}
});
export { toggleSwitchTheme };
//# sourceMappingURL=theme.mjs.map