مستنداتشخصی‌سازیرنگ و تم

رنگ و تم

رنگ‌ها، فونت و حالت تیره از چند متغیر CSS کنترل می‌شوند.

متغیرهای طراحی#

همهٔ رنگ‌ها و اندازه‌ها متغیر CSS هستند. برای هماهنگ‌کردن کیت با برند معمولاً تغییر چند متغیر کافی است.

متغیر	نقش	پیش‌فرض (روشن)
`--brand`	رنگ اصلی: دکمه‌ها، فوکوس، لینک‌ها	`#0b7a75`
`--brand-ink`	رنگ متن روی دکمهٔ اصلی	`#fff`
`--gold`	رنگ تأکید: لوگو، گرادیان‌ها، هشدار	`#d99a1e`
`--ok` / `--err`	موفقیت و خطا	`#13744a` / `#c8383f`
`--err-ink` / `--warn-ink`	رنگ متن خطا و هشدار روی زمینهٔ کم‌رنگ	`#a82a31` / `#8a5a00`
`--bg`	پس‌زمینهٔ صفحه	`#f6f8f7`
`--surface` / `--surface-2`	کارت و فیلدها	`#fff` / `#eef3f2`
`--ink` / `--ink-2` / `--line`	متن اصلی، متن کم‌رنگ، خطوط	`#0d2a2e` / `#4b6266` / `#d8e2e0`
`--r-m` / `--r-l`	گردی گوشهٔ فیلد و کارت	`14px` / `24px`
`--sh-2`	سایهٔ کارت	—
`--ease` / `--t`	منحنی و مدت انیمیشن‌ها	`cubic-bezier(.22,1,.36,1)` / `.35s`
`--sp`	فاصلهٔ کناری صفحه	`clamp(1rem,3vw,2rem)`
`--font`	پشتهٔ فونت	Vazirmatn، Tahoma، system-ui

تغییر رنگ برند#

تغییرها را در assets/css/custom.css بنویسید. این فایل در همهٔ صفحه‌ها بعد از mehmannavaz.css بارگذاری می‌شود و با به‌روزرسانی کیت از بین نمی‌رود:

CSS

/* assets/css/custom.css */
:root{
  --brand:#5b3fd6;
  --brand-ink:#fff;
  --gold:#e0a21a;
}
[data-theme=dark]{
  --brand:#a58bff;
  --brand-ink:#14102b;
}

مقدار theme-color در <head> هر صفحه رنگ نوار مرورگر موبایل را تعیین می‌کند؛ آن را هم با رنگ برند یکی کنید.

کنتراست

نسبت کنتراست متن معمولی با زمینه باید دست‌کم ۴٫۵ به ۱ باشد. پس از تغییر --brand، متن دکمه‌ها (--brand-ink روی --brand) و پیام‌های خطا را در هر دو تم بررسی کنید.

پنل برند#

پس‌زمینهٔ پنل کناری (.brand-panel) با مقدارهای ثابت تعریف شده و از --brand پیروی نمی‌کند. برای تغییر آن:

CSS

.brand-panel{
  background:
    radial-gradient(110% 80% at 85% 0, #e06a4a, transparent 62%),
    linear-gradient(160deg, #7a2b1a, #3a120a);
}

تم تیره#

مقدارهای تم تیره زیر [data-theme=dark] تعریف شده‌اند. در هر صفحه یک اسکریپت کوچک در <head> پیش از رندر، تم را از localStorage (کلید mn-theme) یا تنظیم سیستم می‌خواند تا صفحه چشمک نزند. دکمه‌ای با صفت data-theme-toggle تم را عوض می‌کند و انتخاب را ذخیره می‌کند.

قفل کردن یک تم#

اگر فقط یک تم می‌خواهید، اسکریپت <head> را حذف کنید، تم را روی <html> بنویسید و دکمهٔ data-theme-toggle را بردارید:

HTML

<html lang="fa" dir="rtl" data-theme="light">

فونت#

پشتهٔ فونت در متغیر --font است. برای فونت دیگر، آن را در custom.css تعریف و جایگزین کنید:

CSS

@font-face{
  font-family:"MyFont";
  src:url(../fonts/MyFont.woff2) format("woff2");
  font-weight:100 900;
  font-display:swap;
}
:root{ --font:"MyFont", Tahoma, system-ui, sans-serif }

ارقام در متن‌های صفحه‌ها فارسی نوشته شده‌اند و اسکریپت هم ارقام شمارنده‌ها را فارسی نشان می‌دهد؛ فونت انتخابی باید ارقام فارسی را پشتیبانی کند.

مهمان‌نواز نسخهٔ ۲٫۰ · مهر ۱۴۰۵فهرست تغییرات