🚀 شروع کار

برای استفاده از کامپوننت‌ها و کالکشن‌ها، لازمه ابتدا تنظیمات اولیه‌ی مربوط به رنگ‌ها و استایل‌های پایه رو انجام بدی.

این بخش بهت نشون می‌ده چطور فایل‌های استایل رو آماده و ساختاردهی کنی :)

📁 ساختار فایل‌ها

ما از یک فایل به نام colors.css داخل پوشه‌ی theme استفاده می‌کنیم تا رنگ‌های اصلی پروژه رو تعریف کنیم. این فایل به‌سادگی قابل ویرایش و شخصی‌سازی برای تم روشن و تاریکه.

css └── 📁 theme └── 📄 colors.css

🎨 تعریف رنگ‌ها در colors.css

در فایل colors.css، رنگ‌های تم روشن و تاریک به این صورت تعریف می‌شن:

:root {
    --surface-color: oklch(1 0 0);
    --surface-content-color: oklch(0 0 0);

    --surface-1-color: oklch(96.5% 0 0);
    --surface-1-content-color: oklch(14.5% 0 0);

    --surface-2-color: oklch(92.7% 0.001 286.375);
    --surface-2-content-color: oklch(55.2% 0.016 285.938);

    --surface-3-color: oklch(85.7% 0.001 286.375);
    --surface-3-content-color: oklch(55.2% 0.016 285.938);

    --card-color: oklch(1 0 0);
    --card-content-color: oklch(0 0 0);

    --primary-color: oklch(48.8% 0.243 264.376);
    --primary-content-color: oklch(92.2% 0 0);

    --accent-color: oklch(44.4% 0.011 73.639);
    --accent-content-color: oklch(98.5% 0.001 106.423);

    --success-color: oklch(43.2% 0.095 166.913);
    --success-content-color: oklch(95% 0.052 163.051);

    --warning-color: oklch(84.1% 0.238 128.85);
    --warning-content-color: oklch(12.9% 0.042 264.695);

    --info-color: oklch(52% 0.105 223.128);
    --info-content-color: oklch(95.6% 0.045 203.388);

    --destructive-color: oklch(44.4% 0.177 26.899);
    --destructive-content-color: oklch(97.1% 0.013 17.38);

    --border-color: oklch(92% 0.004 286.32);
    --input-color: oklch(92% 0.004 286.32);
    --ring-color: oklch(92% 0.004 286.32);
}

.dark {
    --surface-color: oklch(0.173 0 0);
    --surface-content-color: oklch(1 0 0);

    --surface-1-color: oklch(18.674% 0.00002 271.152);
    --surface-1-content-color: oklch(92.797% 0.00011 271.152);

    --surface-2-color: oklch(22.213% 0.00003 271.152);
    --surface-2-content-color: oklch(75.423% 0.01568 285.945);

    --surface-3-color: oklch(30.118% 0.00003 271.152);
    --surface-3-content-color: oklch(63.736% 0.01784 285.832);

    --card-color: oklch(0.173 0 0);
    --card-content-color: oklch(1 0 0);

    --primary-color: oklch(48.8% 0.243 264.376);
    --primary-content-color: oklch(92.2% 0 0);

    --accent-color: oklch(44.4% 0.011 73.639);
    --accent-content-color: oklch(98.5% 0.001 106.423);

    --success-color: oklch(43.2% 0.095 166.913);
    --success-content-color: oklch(95% 0.052 163.051);

    --warning-color: oklch(84.1% 0.238 128.85);
    --warning-content-color: oklch(12.9% 0.042 264.695);

    --info-color: oklch(52% 0.105 223.128);
    --info-content-color: oklch(95.6% 0.045 203.388);

    --destructive-color: oklch(44.4% 0.177 26.899);
    --destructive-content-color: oklch(97.1% 0.013 17.38);

    --border-color: oklch(24.354% 0.00003 271.152);
    --input-color: oklch(34.07% 0.00004 271.152);
    --ring-color: oklch(36.002% 0.00004 271.152);
}

تو می‌تونی رنگ‌های بیشتری رو هم به دلخواه به این فایل اضافه کنی.

🧩 ایمپورت و استفاده در app.css

برای استفاده از رنگ‌ها و تعریف تنظیمات پایه، کافیه محتویات زیر رو داخل فایل app.css قرار بدی:

@import "tailwindcss";

@import "./theme/colors.css";

@variant dark (&:where(.dark, .dark *));

@theme {
  --text-2xs: 0.65rem;

  --color-surface: var(--surface-color);
  --color-surface-content: var(--surface-content-color);

  --color-surface-1: var(--surface-1-color);
  --color-surface-1-content: var(--surface-1-content-color);

  --color-surface-2: var(--surface-2-color);
  --color-surface-2-content: var(--surface-2-content-color);

  --color-surface-3: var(--surface-3-color);
  --color-surface-3-content: var(--surface-3-content-color);

  --color-card: var(--card-color);
  --color-card-content: var(--card-content-color);

  --color-primary: var(--primary-color);
  --color-primary-content: var(--primary-content-color);

  --color-accent: var(--accent-color);
  --color-accent-content: var(--accent-content-color);

  --color-info: var(--info-color);
  --color-info-content: var(--info-content-color);

  --color-success: var(--success-color);
  --color-success-content: var(--success-content-color);

  --color-warning: var(--warning-color);
  --color-warning-content: var(--warning-content-color);

  --color-destructive: var(--destructive-color);
  --color-destructive-content: var(--destructive-content-color);

  --color-border: var(--border-color);
  --color-input: var(--input-color);
  --color-ring: var(--ring-color);
}

@layer base {
  * {
    @apply border-border ring-ring;
  }

  /* total width */
  *::-webkit-scrollbar {
    @apply bg-surface-1 w-4;
  }

  /* background of the scrollbar except button or resizer */
  *::-webkit-scrollbar-track {
    @apply bg-surface-1;
  }

  /* scrollbar itself */
  *::-webkit-scrollbar-thumb {
    @apply bg-surface-3 border-solid border-4 border-surface-1 rounded-2xl;
  }

  /* set button(top and bottom of the scrollbar) */
  *::-webkit-scrollbar-button {
    @apply hidden;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-surface font-medium text-surface-content overflow-x-hidden;
  }

  [x-cloak] {
    @apply !hidden;
  }
}

✅ نتیجه

با این تنظیمات، پروژه‌ات آماده‌ی استفاده از دارک‌مود و استایل‌های پایه‌ای مورد نیاز برای کامپوننت‌ها و کالکشن‌ها خواهد بود.

💡 این بخش بین تمام کامپوننت‌ها و کالکشن‌ها مشترکه، پس فقط یک‌بار نیازه تنظیمش کنی.

💡 کالکشن‌ها ممکنه شامل رنگ‌بندی‌های متنوع‌تری بشن یا نیاز به یه‌سری تنظیمات اضافی پیدا کنن که همه اینا توی قسمت "راهنمای استفاده" توی صفحه خود کالکشن توضیح داده میشن.