کامپوننت مشاهده دسته بندی ها
کالکشن مشاهده همه
تمپلیت مشاهده همه
مستندات
صفحه ساز به زودی

با کنار هم چیدن کامپوننتها صفحات مورد نیازتان را بسازید :)

توییت‌ها

ترکیبی از آخرین اخبار، ابزارهای جدید، باگ‌های عجیب و راهکارهای خلاقانه و ..

لینک های مفید
وبلاگ پرسشهای متداول شرایط و قوانین تماس با ما
مستندات توییت‌ها وبلاگ پرسشهای متداول
خانه مستندات آلپاین جی اس
شروع کار رنگ ها
راهنمای استفاده در
آلپاین جی اس
تم تاریک
آلپاین جی اس

پیاده‌سازی دارک مود با Alpine.js

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

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

نصب Alpine.js و پلاگین Persist

npm install alpinejs
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>