پیشنمایش زنده
کد HTML
<label
for="hr"
class="flex flex-row items-center gap-2.5 dark:text-white light:text-black"
>
<input id="hr" type="checkbox" class="peer hidden" />
<div
for="hr"
class="h-5 w-5 flex rounded-md border border-[#a2a1a833] light:bg-[#e8e8e8] dark:bg-[#212121] peer-checked:bg-[#7152f3] transition"
>
<svg
fill="none"
viewBox="0 0 24 24"
class="w-5 h-5 light:stroke-[#e8e8e8] dark:stroke-[#212121]"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 12.6111L8.92308 17.5L20 6.5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
Front-end
</label>
کد CSS
.flex{display:flex}.hidden{display:none}.h-5{height:1.25rem}.w-5{width:1.25rem}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2\.5{gap:0.625rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-\[\#a2a1a833\]{border-color:#a2a1a833}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.peer:checked ~ .peer-checked\:bg-\[\#7152f3\]{--tw-bg-opacity:1;background-color:rgb(113 82 243 / var(--tw-bg-opacity))}@media (prefers-color-scheme: dark){.dark\:bg-\[\#212121\]{--tw-bg-opacity:1;background-color:rgb(33 33 33 / var(--tw-bg-opacity))}.dark\:stroke-\[\#212121\]{stroke:#212121}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}}