ورود به حساب
...
شروع به کار
حالت تاریک
آلپاین (Alpine.js)
خانه

پیاده‌سازی حالت تاریک با Alpine.js

برای فعال‌سازی حالت تاریک در پروژه‌هایی که با Alpine.js توسعه داده می‌شن، می‌توانید از Alpine Store به همراه پلاگین persist استفاده کنید تا حالت تاریک حتی بعد از بارگذاری مجدد صفحه حفظ بشه.

ابتدا مطمئن بشید که پلاگین @alpinejs/persist رو نصب و به پروژه خودتون اضافه کرده‌ باشید.

نصب پلاگین persist

npm install @alpinejs/persist

راه‌اندازی حالت تاریک

سپس کد زیر رو برای ایجاد یک store مخصوص حالت تاریک اضافه کنید:

document.addEventListener("alpine:init", () => {
    Alpine.store("darkMode", {
        on: Alpine.$persist(false).as("is_dark"),
        toggle() {
            this.on = !this.on;
        },
    });
});

در این کد:

یک store به نام darkMode ساخته می‌شه.

پراپرتی on مشخص می‌کنه که حالت تاریک فعال است یا نه.

متد toggle() وظیفه تغییر وضعیت روشن/خاموش حالت تاریک را برعهده دارد.

حالت تاریک در localStorage با کلید is_dark ذخیره می‌شه و بعد از بارگذاری مجدد صفحه حفظ می‌شه.

استفاده در HTML

برای فعال یا غیرفعال کردن حالت تاریک در کل پروژه، می‌توانید تگ html را به صورت زیر تنظیم کنید:

<html
    lang="fa"
    dir="rtl"
    x-bind:class="{ 'dark': $store.darkMode.on }"
    x-data
></html>

سپس برای اضافه کردن یک دکمه جهت تغییر وضعیت حالت تاریک می‌توانید از کد زیر استفاده کنید:

<button
    type="button"
    class="inline-flex items-center justify-center sm:size-10 size-8 cursor-pointer transition-transform active:scale-95"
    x-on:click="$store.darkMode.toggle()"
>
    <!-- icon:sun -->
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        class="size-5 hidden dark:block"
    >
        <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-4 0h.01M12 4v.01M20 12h.01M12 20v.01M6.31 6.31L6.3 6.3m11.41.01l-.01-.01m0 11.4l.01.01M6.3 17.7l.01.01"
        />
    </svg>

    <!-- icon:moon -->
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        class="size-5 dark:hidden"
    >
        <path
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992zm5 1a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2m2 7h2m-1-1v2"
        />
    </svg>
</button>