[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"lesson:t4-s07-dark-mode":3,"course:taropood":54},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,7,"t4-s07-dark-mode","book",4,"فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},6,"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},8,"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",[20,24,27,32,35,38,41,44,47,51],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خیلی از کاربرها گوشی و کامپیوترشان را روی تمِ تیره گذاشته‌اند و انتظار دارند سایتِ تو هم تیره باشد. در این فصل یاد می‌گیری بفهمی کاربر تمِ روشن خواسته یا تیره، و کلِ صفحه را بینِ این دو جابه‌جا کنی — با همان custom property هایی که در ترم ۲ ساختی. آخر فصل یک صفحه داری که در سیستمِ روشن، روشن است و در سیستمِ تیره، تیره، و در \u003Cstrong>هر دو\u003C\u002Fstrong> رنگ‌هایش خوانا می‌مانند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-light-dark-tokens.a56573758d.160.webp 160w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.320.webp 320w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.640.webp 640w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-light-dark-tokens.a56573758d.1280.jpg\" srcset=\"\u002F_img\u002F01-image-light-dark-tokens.a56573758d.160.jpg 160w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.320.jpg 320w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.640.jpg 640w, \u002F_img\u002F01-image-light-dark-tokens.a56573758d.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارتِ یک‌شکل که دو بار نشان داده شده: یک‌بار با پس‌زمینهٔ کاغذیِ روشن و متنِ تیره، یک‌بار با پس‌زمینهٔ تیره و متنِ روشن؛ بینشان یک دسته نمونه‌رنگ که مقدارهایش بین دو حالت عوض می‌شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>prefers-color-scheme\u003C\u002Fcode> بفهمی کاربر تمِ روشن خواسته یا تیره\u003C\u002Fli>\n\u003Cli>یک theme بسازی که مقدارِ token هایش در حالتِ تیره عوض می‌شود\u003C\u002Fli>\n\u003Cli>بگویی چرا وصله‌کردنِ تک‌تکِ رنگ‌ها همیشه یک‌جا را خراب می‌کند\u003C\u002Fli>\n\u003Cli>با \u003Ccode>color-scheme\u003C\u002Fcode> کاری کنی حتی فرم‌ها و اسکرول‌بارِ مرورگر هم تیره شوند\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۹:\u003C\u002Fstrong> custom property و \u003Ccode>var()\u003C\u002Fcode> — این فصل تماماً روی همان بنا شده.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲ (همین ترم):\u003C\u002Fstrong> \u003Ccode>@media\u003C\u002Fcode> — \u003Ccode>prefers-color-scheme\u003C\u002Fcode> هم یک ویژگیِ \u003Ccode>@media\u003C\u002Fcode> است، مثلِ \u003Ccode>min-width\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲ فصل ۵:\u003C\u002Fstrong> contrast و اینکه رنگِ متن و پس‌زمینه باید فاصلهٔ کافی داشته باشند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارتِ روشن با رنگ‌های ثابت می‌بینی. کارِ این فصل این است که خط‌به‌خط آن را به یک theme تبدیل کنی که خودش با تمِ سیستم، روشن و تیره می‌شود","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-4-responsive\u002Fsession-07-dark-mode",{"kind":21,"heading":33,"html":34},"۱. مشکل: رنگ‌های چسبیده به کد","\u003Ch2 id=\"۱-مشکل-رنگ‌های-چسبیده-به-کد\">۱. مشکل: رنگ‌های چسبیده به کد\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%85%D8%B4%DA%A9%D9%84-%D8%B1%D9%86%DA%AF%E2%80%8C%D9%87%D8%A7%DB%8C-%DA%86%D8%B3%D8%A8%DB%8C%D8%AF%D9%87-%D8%A8%D9%87-%DA%A9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن کارتت رنگ‌هایش را مستقیم و ثابت نوشته:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: #f6edda;\n  color: #2c2114;\n}\n\n.card {\n  background-color: #ffffff;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>در حالتِ روشن عالی است. حالا می‌خواهی dark mode اضافه کنی. مرورگر یک ویژگیِ \u003Ccode>@media\u003C\u002Fcode> مخصوص دارد که می‌گوید کاربر تمِ تیره خواسته: \u003Ccode>prefers-color-scheme: dark\u003C\u002Fcode>. پس ساده‌ترین فکر این است که در آن حالت، پس‌زمینه‌ها را تیره کنی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #14181f;\n  }\n\n  .card {\n    background-color: #1e2530;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>در آزمایشگاه امتحانش کن (پایین‌تر می‌گویم چطور تمِ تیره را روشن کنی). پس‌زمینه‌ها تیره شدند، ولی نتیجه فاجعه است: \u003Cstrong>تیتر و متن تقریباً ناپدید شده‌اند.\u003C\u002Fstrong> متن هنوز رنگِ تیرهٔ \u003Ccode>#2c2114\u003C\u002Fcode> را دارد، و حالا روی یک کارتِ تیره نشسته — تیره روی تیره. کاربر یک لکهٔ محو می‌بیند، نه یک جمله.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> تو فقط پس‌زمینه‌ها را عوض کردی و رنگِ متن ثابت ماند. حالا باید برگردی و رنگِ \u003Ccode><h1>\u003C\u002Fcode>، \u003Ccode><p>\u003C\u002Fcode>، حاشیه‌ها، دکمه و... را هم تک‌تک وصله بزنی — و هر بار یکی را جا می‌اندازی، چون رنگ‌ها همه‌جای فایل پخش‌اند. این دقیقاً همان دردِ «یک رنگ، ده جا» از ترم ۲ است. راهِ حل هم همان است: \u003Cstrong>theme با custom property.\u003C\u002Fstrong> به‌جای وصله‌کردنِ رنگ‌ها، پس‌زمینه و متن را با هم به‌عنوان یک جفت تعریف کن تا همیشه با هم عوض شوند و هیچ‌وقت تیره روی تیره نیفتد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. راهِ حل: theme با custom property","\u003Ch2 id=\"۲-راهِ-حل-theme-با-custom-property\">۲. راهِ حل: theme با custom property\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%B1%D8%A7%D9%87%D9%90-%D8%AD%D9%84-theme-%D8%A8%D8%A7-custom-property\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>از ترم ۲ یادت هست: token ها را یک‌جا روی \u003Ccode>:root\u003C\u002Fcode> تعریف می‌کنی و همه‌جا با \u003Ccode>var()\u003C\u002Fcode> صدایشان می‌زنی. اینجا یک قدمِ تازه اضافه می‌کنیم: \u003Cstrong>همان token ها را داخلِ \u003Ccode>@media (prefers-color-scheme: dark)\u003C\u002Fcode> دوباره تعریف می‌کنیم، با مقدارِ تیره.\u003C\u002Fstrong> خودِ کارت تغییری نمی‌کند؛ فقط مقدارِ متغیرها عوض می‌شود.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --line: #d8ccae;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #14181f;\n    --card: #1e2530;\n    --ink: #f2f4f8;\n    --line: #2c3644;\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا هرجای CSS به‌جای رنگِ ثابت، \u003Ccode>var(--bg)\u003C\u002Fcode>، \u003Ccode>var(--ink)\u003C\u002Fcode> و مثلِ این‌ها را می‌نویسی. دقت کن که \u003Ccode>--bg\u003C\u002Fcode> و \u003Ccode>--ink\u003C\u002Fcode> یک \u003Cstrong>جفت‌اند\u003C\u002Fstrong>: هر بار یکی تیره می‌شود، دیگری روشن. برای همین دیگر هیچ‌وقت تیره روی تیره نمی‌افتد — چون هر دو با هم و در یک‌جا عوض می‌شوند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> تمِ سیستمت را بین روشن و تیره عوض کن (در تنظیماتِ ویندوز، مک یا موبایل؛ یا در DevTools مرورگر، بخشِ Rendering، گزینهٔ \u003Ccode>Emulate prefers-color-scheme\u003C\u002Fcode>). صفحه با هر تغییر، \u003Cstrong>کامل\u003C\u002Fstrong> بین روشن و تیره می‌رود و در هر دو حالت متن خواناست. یک token را دستکاری کن — مثلاً \u003Ccode>--bg\u003C\u002Fcode> تیره را به یک سرمه‌ایِ روشن‌تر ببر — و ببین فقط پس‌زمینه عوض می‌شود و بقیه دست‌نخورده می‌ماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> رنگِ تیره را هیچ‌وقت سیاهِ مطلق (\u003Ccode>#000000\u003C\u002Fcode>) نگذار و متن را سفیدِ مطلق نکن؛ کنترستِ خیلی‌شدید چشم را در تاریکی می‌زند. یک سرمه‌ایِ خیلی‌تیره برای پس‌زمینه و یک سفیدِ کمی‌شکسته برای متن، هم خواناست هم چشم‌نواز.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. color-scheme: به مرورگر خبر بده","\u003Ch2 id=\"۳-color-scheme-به-مرورگر-خبر-بده\">۳. \u003Ccode>color-scheme\u003C\u002Fcode>: به مرورگر خبر بده\u003Ca class=\"head-anchor\" href=\"#%DB%B3-color-scheme-%D8%A8%D9%87-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%D8%AE%D8%A8%D8%B1-%D8%A8%D8%AF%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک تکهٔ آخر ماند. چیزهایی روی صفحه هستند که خودِ مرورگر رنگشان می‌کند، نه CSSِ تو: کادرِ ورودی‌ها، اسکرول‌بار، دکمه‌های پیش‌فرض. اگر به مرورگر نگویی صفحه‌ات تیره است، این‌ها روشن می‌مانند و مثلِ وصله‌های سفید روی تمِ تیره می‌زنند بیرون. یک خط این را حل می‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>:root {\n  color-scheme: light dark;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>color-scheme: light dark\u003C\u002Fcode> یعنی «این صفحه هم روشن را بلد است هم تیره؛ هرکدام که کاربر خواست، عناصرِ بومی‌ات را هم همان‌طور بکش». برخلافِ \u003Ccode>--bg\u003C\u002Fcode>، این یک custom property نیست — یک property واقعیِ CSS است، و کارش هماهنگ‌کردنِ همان چیزهایی است که از دستِ تو خارج‌اند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در تمِ تیره، حالا اسکرول‌بار و هر ورودی‌ای هم تیره‌اند و دیگر لکهٔ سفید نداری. صفحه یک‌دست است.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. کد کاملِ این فصل","\u003Ch2 id=\"۴-کد-کاملِ-این-فصل\">۴. کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>dark mode<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <article class="card">\n        <h1>سلام، تاریکی<\u002Fh1>\n        <p>این صفحه تمِ سیستمِ تو را می‌خواند و خودش را روشن یا تیره می‌کند.<\u002Fp>\n        <a class="btn" href="#">شروع<\u002Fa>\n      <\u002Farticle>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\n\u002F* tem-e roshan: meghdar-e pishfarz-e token-ha *\u002F\n:root {\n  color-scheme: light dark;\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --muted: #6b6150;\n  --brand: #2a6b93;\n  --line: #d8ccae;\n}\n\n\u002F* tem-e tire: haman token-ha, meghdar-e digar *\u002F\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #14181f;\n    --card: #1e2530;\n    --ink: #f2f4f8;\n    --muted: #aab3c5;\n    --line: #2c3644;\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  line-height: 1.9;\n}\n\n.page {\n  padding: 40px 20px;\n}\n\n.card {\n  max-width: 360px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n}\n\n.card h1 {\n  margin-block: 0 10px;\n  color: var(--ink);\n}\n\n.card p {\n  margin-block: 0 16px;\n  color: var(--muted);\n}\n\n.btn {\n  display: inline-block;\n  padding: 10px 18px;\n  border-radius: 10px;\n  background-color: var(--brand);\n  color: #ffffff;\n  font-weight: 700;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.160.webp 160w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.320.webp 320w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.640.webp 640w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.160.jpg 160w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.320.jpg 320w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.640.jpg 640w, \u002F_img\u002F02-image-prefers-color-scheme.0c9bad67f3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کلید یا تنظیمِ سیستم که روی حالتِ تیره است و از آن یک جریان به سمتِ صفحه می‌رود؛ صفحه رنگ‌هایش را از دستهٔ نمونه‌رنگِ تیره می‌گیرد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> صفحهٔ کامل را در هر دو تم ببین. در روشن: کاغذیِ گرم با متنِ تیره. در تیره: سرمه‌ایِ تیره با متنِ روشن. تنها رنگی که ثابت ماند، سفیدِ رویِ دکمه است — چون دکمه در هر دو تم آبیِ پررنگ دارد و سفید رویش خواناست.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> رنگ‌های تمِ تیره‌ات را به دستیار AI ات بده و بپرس «کنترستِ متن روی پس‌زمینه در حالتِ تیره برای خواندن کافی است؟». این یکی از بهترین کاربردهای AI است — یک بازبینیِ دسترس‌پذیری. ولی جوابش را دربست نپذیر: همان‌جا در آزمایشگاه، تمِ تیره را روشن کن و با چشمِ خودت ببین متن راحت خوانده می‌شود یا نه. عدد مهم است، ولی چشم داورِ آخر است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>dark mode\u003C\u002Ftd>\n\u003Ctd>دارک مود\u003C\u002Ftd>\n\u003Ctd>تمِ تیرهٔ صفحه، برای وقتی کاربر سیستمش را تیره گذاشته\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>prefers-color-scheme\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>پریفِرز کالر اسکیم\u003C\u002Ftd>\n\u003Ctd>ویژگیِ \u003Ccode>@media\u003C\u002Fcode> که می‌گوید کاربر تمِ روشن خواسته یا تیره\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>color-scheme\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کالر اسکیم\u003C\u002Ftd>\n\u003Ctd>property ای که به مرورگر می‌گوید صفحه هر دو تم را دارد تا عناصرِ بومی هم هماهنگ شوند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>token\u003C\u002Ftd>\n\u003Ctd>توکِن\u003C\u002Ftd>\n\u003Ctd>همان custom property های theme؛ رنگ و اندازه‌هایی که یک‌جا تعریف و همه‌جا مصرف می‌شوند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":48,"heading":49,"html":50},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا وصله‌کردنِ تک‌تکِ رنگ‌ها برای dark mode همیشه یک‌جا را خراب می‌کند، ولی theme با token خراب نمی‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به theme یک token تازه اضافه کن: \u003Ccode>--accent\u003C\u002Fcode> (یک رنگِ تأکید). در حالتِ روشن یک نارنجیِ گرم بگذار و در حالتِ تیره یک نارنجیِ کمی روشن‌تر تا روی تیره بدرخشد. حالا یک برچسبِ کوچک با این رنگ بساز و مطمئن شو در هر دو تم خوانا و خوش‌رنگ است.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> رنگِ \u003Ccode>--brand\u003C\u002Fcode> را در حالتِ تیره به یک آبیِ \u003Cstrong>روشن\u003C\u002Fstrong> عوض کن (مثلِ \u003Ccode>#6cb6df\u003C\u002Fcode>). حالا سفیدِ روی دکمه را نگاه کن: کنترست کم می‌شود و متن سخت خوانده می‌شود. این را چطور درست می‌کنی؟ (راهنما: رنگِ متنِ دکمه را هم باید token کنی تا در تمِ تیره تیره شود — همان درسِ «رنگِ متن و پس‌زمینه یک جفت‌اند»، این‌بار روی دکمه.)\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی به هر صفحه dark mode بدهی. این آخرین مفهومِ تازهٔ ترمِ Responsive بود. فصل بعد فصلِ پروژه است: همهٔ چیزهایی که این ترم ساختی — \u003Ccode>@media\u003C\u002Fcode>، تصویرِ responsive، تایپوگرافیِ سیال، منوی بازشو و همین dark mode — را در یک صفحهٔ کامل کنارِ هم می‌گذاری که از موبایل تا دسکتاپ، در روشن و تیره، درست کار کند.\u003C\u002Fp>\n",{"course":55,"entitled":63,"lessons":64,"payments_enabled":63,"terms":249,"live":5},{"active_window":56,"effective_price_toman":57,"free":5,"lesson_count":58,"price_toman":59,"slug":60,"summary_fa":61,"title_fa":62},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[65,69,73,77,80,84,87,90,93,97,101,104,107,110,113,116,119,122,125,128,131,135,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,184,185,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246],{"free_preview":5,"order":66,"slug":67,"source":8,"term":66,"title_fa":68},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":70,"slug":71,"source":8,"term":66,"title_fa":72},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":74,"slug":75,"source":8,"term":66,"title_fa":76},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":9,"slug":78,"source":8,"term":66,"title_fa":79},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":81,"slug":82,"source":8,"term":66,"title_fa":83},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":12,"slug":85,"source":8,"term":66,"title_fa":86},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":6,"slug":88,"source":8,"term":66,"title_fa":89},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":16,"slug":91,"source":8,"term":66,"title_fa":92},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":94,"slug":95,"source":8,"term":66,"title_fa":96},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":98,"slug":99,"source":8,"term":66,"title_fa":100},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":66,"slug":102,"source":8,"term":70,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":70,"slug":105,"source":8,"term":70,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":74,"slug":108,"source":8,"term":70,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":111,"source":8,"term":70,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":81,"slug":114,"source":8,"term":70,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":12,"slug":117,"source":8,"term":70,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":6,"slug":120,"source":8,"term":70,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":16,"slug":123,"source":8,"term":70,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":94,"slug":126,"source":8,"term":70,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":98,"slug":129,"source":8,"term":70,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":70,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":66,"slug":136,"source":8,"term":74,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":70,"slug":139,"source":8,"term":74,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":74,"slug":142,"source":8,"term":74,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":9,"slug":145,"source":8,"term":74,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":81,"slug":148,"source":8,"term":74,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":12,"slug":151,"source":8,"term":74,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":6,"slug":154,"source":8,"term":74,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":16,"slug":157,"source":8,"term":74,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":94,"slug":160,"source":8,"term":74,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":98,"slug":163,"source":8,"term":74,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":74,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":66,"slug":169,"source":8,"term":9,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":70,"slug":172,"source":8,"term":9,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":74,"slug":175,"source":8,"term":9,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":9,"slug":178,"source":8,"term":9,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":81,"slug":181,"source":8,"term":9,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":66,"slug":187,"source":8,"term":81,"title_fa":188},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":70,"slug":190,"source":8,"term":81,"title_fa":191},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":74,"slug":193,"source":8,"term":81,"title_fa":194},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":196,"source":8,"term":81,"title_fa":197},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":81,"slug":199,"source":8,"term":81,"title_fa":200},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":12,"slug":202,"source":8,"term":81,"title_fa":203},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":6,"slug":205,"source":8,"term":81,"title_fa":206},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":16,"slug":208,"source":8,"term":81,"title_fa":209},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":94,"slug":211,"source":8,"term":81,"title_fa":212},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":98,"slug":214,"source":8,"term":81,"title_fa":215},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":66,"slug":217,"source":8,"term":12,"title_fa":218},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":70,"slug":220,"source":8,"term":12,"title_fa":221},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":74,"slug":223,"source":8,"term":12,"title_fa":224},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":9,"slug":226,"source":8,"term":12,"title_fa":227},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":81,"slug":229,"source":8,"term":12,"title_fa":230},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":12,"slug":232,"source":8,"term":12,"title_fa":233},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":6,"slug":235,"source":8,"term":12,"title_fa":236},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":16,"slug":238,"source":8,"term":12,"title_fa":239},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":94,"slug":241,"source":8,"term":12,"title_fa":242},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":98,"slug":244,"source":8,"term":12,"title_fa":245},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":247,"source":8,"term":12,"title_fa":248},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105162]