آموزش SVG Toggle Button – نحوه مدیریت حالت تاریک با CSS و جاوا اسکریپت
چگونه می توان حالت تاریک را در CSS و جاوا اسکریپت تشخیص داد؟ چگونه می توانید به صورت دستی آن را با یک دکمه جابجایی لغو کنید؟ و چگونه می توان با SVG یک نماد خورشید و ماه ایجاد کرد؟
در این آموزش نحوه تشخیص حالت تاریک در CSS و جاوا اسکریپت را یاد می گیرید و یک دکمه جابجایی با SVG ایجاد می کنید تا رفتار پیش فرض را لغو کنید. شما از HTML ساده، CSS و جاوا اسکریپت استفاده خواهید کرد، پس قبل از شروع نیازی به نیاز اولیه ندارید.
همچنین می توانید این مقاله را به صورت ویدئویی در یوتیوب تماشا کنید .
فهرست مطالب
نحوه تشخیص حالت تاریک در جاوا اسکریپت
نحوه تغییر حالت تاریک با جاوا اسکریپت
نحوه مدیریت حالت تاریک با CSS
فرض کنید یک وب سایت ساده با متن دارید. به طور پیش فرض، رنگ متن را سیاه و رنگ پس زمینه را سفید تنظیم می کنید. پیاده سازی حالت تاریک برای این سایت با CSS بسیار ساده است:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Dark Mode</title> <link rel="stylesheet" href="index.css" /> <script src="index.js" defer></script> </head> <body> <p> How to detect dark mode in CSS and in JavaScript? How can we override it manually with a toggle button? In this quick tutorial, we look into detecting dark mode in CSS and JavaScript, and then we create a toggle button with SVG to override the default behavior. </p> </body> </html> 
تنها کاری که باید انجام دهید این است که یک درخواست رسانه اضافه کنید و یک شرط تنظیم کنید. با این شرط، عبارات CSS زیر را به گونه ای تنظیم می کنید که فقط در صورتی معتبر باشند که طرح رنگ ترجیحی تیره باشد.
در داخل این پرس و جو رسانه ای، می توانید رنگ ها را برای حالت تاریک تعریف کنید. در این حالت، رنگ‌ها را برگردانده و رنگ متن را سفید و رنگ پس‌زمینه را روی سیاه قرار می‌دهید:
body { font-family: Montserrat; margin: 50px; max-width: 500px; } @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } }این تنظیمات را از تنظیمات سیستم عامل یا مرورگر شما می گیرد. به طور پیش فرض، از سیستم عامل می آید، اما مرورگر می تواند تصمیم بگیرد که آن را لغو کند. در Google Chrome، می‌توانید این تنظیم را در قسمت «ظاهر» پیدا کنید. به طور پیش فرض، از تنظیمات دستگاه پیروی می کند.
نکته جالب در مورد راه حل CSS این است که اگر هنگام بازدید از وب سایت این تنظیمات را تغییر دهید، استایل به طور خودکار به روز می شود.
به این ترتیب، می توانید یک استایل سفارشی برای عنصر بدنه و هر عنصر دیگر نیز تنظیم کنید.
اگرچه در یک مورد کار نمی کند. شما نمی توانید با CSS به آنچه در داخل یک عنصر HTML Canvas است استایل دهید. اگر یک بازی را کاملاً از جاوا اسکریپت با استفاده از Canvas API یا Three.js ساخته‌اید، باید رنگ‌ها را برای حالت تاریک در جاوا اسکریپت نیز تنظیم کنید.
در مراحل بعدی، ما این موضوع را پوشش خواهیم داد و نحوه ایجاد یک دکمه جابجایی SVG برای جابجایی بین حالت های روشن و تاریک را تحلیل خواهیم کرد.
نحوه کدنویسی نماد Sun با SVG
قبل از اینکه نحوه مدیریت حالت تاریک در جاوا اسکریپت را بیاموزید، بیایید یک انحراف سریع داشته باشیم و ببینیم که چگونه یک دکمه تغییر حالت تاریک را با SVG کدنویسی کنیم. تشخیص حالت تاریک یک چیز است، اما باید به کاربر اجازه دهید به صورت دستی بین حالت روشن و تاریک جابجا شود.
اگر به یک مقدمه سریع برای کدنویسی نمادهای SVG نیاز دارید، آموزش قبلی من را تحلیل کنید. این شامل بسیاری از نمونه های عالی از سطح مبتدی تا پیشرفته است. و اگر با SVG ها تازه کار هستید، نگران نباشید. اینها نمونه های بسیار ساده ای هستند.
پس ، اجازه دهید با عنصر svg شروع کنیم. این به عنوان محفظه ای برای تمام عناصر تصویر عمل می کند. اندازه آن را 30 برابر 30 قرار دهید:
svg سپس، یک دایره اضافه کنید. برای عنصر circle ، باید مختصات مرکز دایره و شعاع آن را تنظیم کنید. مختصات مرکز هر دو 15 و شعاع 6 است. سپس یک رنگ را با ویژگی fill تنظیم کنید:
<svg width="30" height="30"> <circle cx="15" cy="15" r="6" fill="currentColor" /> </svg> 
circle به عنوان هسته خورشید اضافه می کنیم برای تنظیم رنگ، می توانید از ویژگی currentColor استفاده کنید که تنظیمات color فعلی را از CSS می گیرد. بعداً وقتی حالت‌های تاریک و روشن را تغییر می‌دهید، به کارتان می‌آید. این نماد به طور خودکار رنگ ها را تغییر می دهد.
سپس، اشعه خورشید را اضافه کنید. برای این کار باید از عنصر line استفاده کنید، جایی که باید مختصات شروع و پایان را تنظیم کنید. همچنین می‌توانید رنگ stroke را با ویژگی stroke ، stroke-width برای گفت ن ضخامت، و ویژگی stroke-linecap برای گرد کردن انتهای خطوط تنظیم کنید:
<svg width="30" height="30"> <circle cx="15" cy="15" r="6" fill="currentColor" /> <line id="ray" stroke="currentColor" stroke-width="2" stroke-linecap="round" x1="15" y1="1" x2="15" y2="4" ></line> </svg> 
line را به عنوان یک خورشید اضافه می کنیماکنون، هنگامی که یک پرتو دارید، می توانید از همان پرتو برای ترسیم بقیه اشعه ها مجددا استفاده کنید.
می توانید به این پرتو یک id بدهید و با عنصر use دوباره از آن استفاده کنید. برای عناصر استفاده مجدد، می توانید یک چرخش تنظیم کنید. زاویه چرخش و مرکز چرخش را تنظیم کنید. می خواهید پرتوها را به دور مرکز خورشید بچرخانید، پس آن را روی 15,15 تنظیم کنید. سپس، چرخش را برای هر پرتو 45 درجه افزایش دهید:
<svg width="30" height="30"> <circle cx="15" cy="15" r="6" fill="currentColor" /> <line id="ray" stroke="currentColor" stroke-width="2" stroke-linecap="round" x1="15" y1="1" x2="15" y2="4" ></line> <use href="#ray" transform="rotate(45 15 15)" /> <use href="#ray" transform="rotate(90 15 15)" /> <use href="#ray" transform="rotate(135 15 15)" /> <use href="#ray" transform="rotate(180 15 15)" /> <use href="#ray" transform="rotate(225 15 15)" /> <use href="#ray" transform="rotate(270 15 15)" /> <use href="#ray" transform="rotate(315 15 15)" /> </svg> 
نحوه تشخیص حالت تاریک در جاوا اسکریپت
قبل از اینکه به نماد ماه برسیم، بیایید ببینیم که چگونه حالت تاریک را در جاوا اسکریپت تشخیص دهیم. این می تواند هنگام ساخت یک بازی مفید باشد، همانطور که چند هفته پیش در آموزش بازی Gorillas JavaScript انجام دادیم.
در آن بازی، ما روی یک عنصر HTML Canvas با جاوا اسکریپت طراحی می‌کردیم. همه رنگ ها را با جاوا اسکریپت تنظیم می کنیم. اگر بخواهیم از حالت تاریک پشتیبانی کنیم، می توانیم رنگ ها را بر اساس یک متغیر darkMode تنظیم کنیم. اما چگونه تشخیص دهیم که در حالت تاریک هستیم؟ چگونه مقدار این متغیر را تنظیم کنیم؟
کد زیر نمونه ای از آموزش بازی بالا است. در اینجا قبل از اینکه یک مستطیل روی بوم بکشیم، رنگ پر را تنظیم می کنیم. برای کسب اطلاعات بیشتر در مورد طراحی روی یک عنصر canvas ، این آموزش را تحلیل کنید.
canvas ، رنگ ها را از جاوا اسکریپت تنظیم می کنیم. اما چگونه حالت تاریک را تشخیص دهیم؟تشخیص حالت تاریک در جاوا اسکریپت نیز بسیار ساده است. جالب اینجاست که این راه حل به انتخابگرهای پرس و جوی CSS که قبلاً استفاده می کردید نیز بستگی دارد.
شما می توانید یک شی matchMedia با همان شرایطی که در CSS استفاده کردیم ایجاد کنید. این روش می تواند تحلیل کند که آیا سند با یک درخواست رسانه مطابقت دارد یا خیر. Pass on prefers-color-scheme: dark به عنوان آرگومان:
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); let darkMode = darkModeMediaQuery.matches; . . . function drawBuildings() { state.buildings.forEach((building) => { ctx.fillStyle = darkMode ? "#254D7E" : "#947285"; ctx.fillRect(building.x, 0, building.width, building.height); }); } سپس، می توانید ویژگی matches این شی را تحلیل کنید. اگر درست باشد، شما در حالت تاریک هستید. می‌توانید این را در یک متغیر ذخیره کنید، و بعداً، می‌توانید از این متغیر برای تصمیم‌گیری در مورد رنگ‌هایی که هنگام نقاشی روی عنصر بوم استفاده کنید، استفاده کنید.
با این حال، هنگامی که بین حالت روشن و تاریک جابجا می شوید، این متغیر به طور خودکار رفرش نمی شود. شما باید یک شنونده رویداد اضافه کنید که تشخیص دهد آیا تنظیمات تغییر می کنند.
در اینجا، ما تابعی را تعریف می کنیم که ویژگی matches شی ورودی را تحلیل می کند تا تصمیم بگیرد که آیا به حالت روشن یا تاریک تغییر داده اید:
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); let darkMode = darkModeMediaQuery.matches; darkModeMediaQuery.addEventListener("change", (e) => { if (e.matches) { darkMode = true; } else { darkMode = false; } }); . . . function drawBuildings() { state.buildings.forEach((building) => { ctx.fillStyle = darkMode ? "#254D7E" : "#947285"; ctx.fillRect(building.x, 0, building.width, building.height); }); } حالا اگر رنگ ها را بر اساس این متغیر darkMode تنظیم کنید، باید ببینید که ظاهر بازی با تغییر حالت روشن و تاریک در تنظیمات سیستم عامل تغییر می کند. این نسخه ی نمایشی را تحلیل کنید تا آن را در عمل ببینید.
نحوه کدنویسی نماد ماه با SVG
قبل از اینکه در مورد نادیده گرفتن تنظیمات پیش‌فرض سیستم‌عامل با یک دکمه جابجایی بحث کنیم، اجازه دهید نیمی دیگر از نماد تغییر وضعیت خود را تحلیل کنیم: بیایید یک ماه بکشیم.
با یک عنصر svg با همان اندازه شروع کنید و یک مسیر در داخل آن تعریف کنید. شما می توانید یک عنصر path با تنظیم ویژگی d آن تعریف کنید. در این ویژگی، شما یک مسیر از یک سری دستور می سازید:
path با یک سری دستورات تعریف می کنیم برای رفتن به موقعیت اولیه با دستور move-to شروع می کنید. این دستور از حرف M و مختصات شروع تشکیل شده است:
سپس از دستور arc برای رسم قوس بیرونی ماه استفاده کنید. این دستور ممکن است کمی ترسناک به نظر برسد زیرا دارای چندین ویژگی است. بیایید ببینیم چه چیزی داریم:
یک دستور همیشه دستور قبلی را ادامه می دهد، پس این کمان قوس را از مختصات دستور حرکت به رسم می کند. دستورات نیز با مختصات نقطه پایانی پایان می یابند.
در اینجا، شما تعیین می کنید که در آن قوس به پایان می رسد. بقیه خصوصیات در مورد نحوه رسم یک قوس از نقطه شروع به نقطه پایان است:
دو ویژگی اول شعاع افقی و عمودی قوس ما هستند. در مورد ما، ما قصد داریم قوس دایره ای داشته باشیم، پس مقدار یکسانی را برای هر دو تعیین می کنیم. با آرگومان سوم می توانید یک چرخش تنظیم کنید. وقتی هر دو شعاع یکسان هستند، این ویژگی هیچ تفاوتی ندارد. می توانید آن را در صفر رها کنید:
سپس، ما ویژگی پرچم قوس بزرگ را داریم. با این کار می‌توانید تصمیم بگیرید که مسیر طولانی یا کوتاه را تا مختصات نهایی ما طی کنید. می توانید ببینید که می توانید به روش های مختلف به نقطه پایانی برسید، حتی با شعاع های یکسان.
دو قوس وجود دارد - در مورد اول، شما راه طولانی را می روید و در مورد دوم، راه کوتاه را خواهید رفت. این یک پرچم است، پس مقدار در اینجا می تواند 0 یا 1 باشد:
در نهایت، پرچم رفت و برگشت وجود دارد. این اساساً تعیین می کند که آیا باید قوس را در جهت عقربه های ساعت بکشید یا در خلاف جهت عقربه های ساعت. دو گزینه منعکس کننده یکدیگر هستند. در حالت اول، شما این را صفر می کنید - در حالت دوم، آن را روی یک تنظیم می کنید:
اکنون که یک قوس دارید، دیگری را تنظیم می کنید. در اینجا، نقطه پایان را روی ابتدا قرار می دهید. به همان مختصاتی که برای دستور move-to استفاده کردید.
سپس می توانید از همان شعاع ها استفاده کنید، اما باید پرچم قوس بزرگ و پرچم حرکت را تغییر دهید تا به یک ماه ختم شود:
<svg width="30" height="30"> <path fill="currentColor" d=" M 23, 5 A 12 12 0 1 0 23, 25 A 12 12 0 0 1 23, 5" /> </svg> 
چگونه می توان از این دو آیکون در یک دکمه برای تغییر حالت روشن و تاریک در جاوا اسکریپت استفاده کرد؟
نحوه تغییر حالت تاریک با جاوا اسکریپت
اگر می‌خواهید تنظیمات سیستم یا مرورگر را برای حالت تاریک با یک سوئیچ دستی لغو کنید، دیگر نمی‌توانید به درخواست رسانه CSS اعتماد کنید. این برای رندر کردن UI بر اساس تنظیمات کار می کند، اما نمی توانید آن را از جاوا اسکریپت لغو کنید.
در عوض، می توانید یک کلاس dark-mode تعریف کنید و آن را از جاوا اسکریپت تغییر دهید.
در CSS، کلاسی را تعریف کنید که همان تنظیماتی را که کوئری رسانه قبلا انجام داده بود، تغییر دهد. سپس در جاوا اسکریپت می توانید از همان منطقی که قبلا داشتید استفاده کنید تا تنظیمات پیش فرض را بدست آورید و سپس این کلاس را اضافه یا حذف کنید.
می توانید این کلاس را در بارگذاری صفحه اولیه ما تنظیم کنید و اگر روی دکمه ای کلیک کنید آن را تغییر دهید:
body { font-family: Montserrat; margin: 50px; max-width: 500px; } .dark-mode { background-color: black; color: white; }حال، چگونه می توان این را با یک دکمه تغییر داد؟ در فایل HTML خود، یک عنصر دکمه با کنترل کننده رویداد اضافه کنید. سپس، هر دو SVG را به داخل این عنصر دکمه منتقل کنید و برای آنها شناسه اختصاص دهید. شما قابلیت مشاهده این نمادها را از جاوا اسکریپت تغییر می دهید:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Dark Mode</title> <link rel="stylesheet" href="index.css" /> <script src="index.js" defer></script> </head> <body> <p> How to detect dark mode in CSS and in JavaScript? How can we override it manually with a toggle button? In this quick tutorial, we look into detecting dark mode in CSS and JavaScript, and then we create a toggle button with SVG to override the default behavior. </p> <button onclick="toggleDarkMode()"> <svg width="30" height="30" id="light-icon"> <circle cx="15" cy="15" r="6" fill="currentColor" /> <line id="ray" stroke="currentColor" stroke-width="2" stroke-linecap="round" x1="15" y1="1" x2="15" y2="4" ></line> <use href="#ray" transform="rotate(45 15 15)" /> <use href="#ray" transform="rotate(90 15 15)" /> <use href="#ray" transform="rotate(135 15 15)" /> <use href="#ray" transform="rotate(180 15 15)" /> <use href="#ray" transform="rotate(225 15 15)" /> <use href="#ray" transform="rotate(270 15 15)" /> <use href="#ray" transform="rotate(315 15 15)" /> </svg> <svg width="30" height="30" id="dark-icon"> <path fill="currentColor" d=" M 23, 5 A 12 12 0 1 0 23, 25 A 12 12 0 0 1 23, 5" /> </svg> </button> </body> </html>button منتقل کنید و برای هر کدام یک id منحصر به فرد تنظیم کنیدهمچنین می‌توانید ظاهر پیش‌فرض عنصر دکمه را در CSS، به جز ویژگی مکان‌نما، لغو تنظیم کنید. شما باید آن را به عنوان اشاره گر داشته باشید:
. . . button { all: unset; cursor: pointer; } . . .حال، اجازه دهید کنترل کننده رویداد را در جاوا اسکریپت پیاده سازی کنیم. ابتدا باید با شناسه به نمادهای SVG دسترسی پیدا کنید:
const lightIcon = document.getElementById("light-icon"); const darkIcon = document.getElementById("dark-icon"); . . . سپس، در صورتی که در حالت dark-mode را به عنصر body اضافه کنید و یکی از نمادهای SVG را بر اساس متغیر darkMode مخفی کنید. حالت تاریک را مانند قبل تشخیص می دهید:
. . . // Check if dark mode is preferred const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); let darkMode = darkModeMediaQuery.matches; // Set dark-mode class on body if darkMode is true and pick icon if (darkMode) { document.body.classList.add("dark-mode"); darkIcon.setAttribute("display", "none"); } else { lightIcon.setAttribute("display", "none"); } . . . و در نهایت، می تواند تابعی را که خاصیت darkMode را تغییر می دهد، پیاده سازی کند. این تابع کلاس dark-mode را در عنصر بدنه تغییر می دهد و نمادهای SVG را تغییر می دهد:
. . . // Toggle dark mode on button click function toggleDarkMode() { // Toggle darkMode variable darkMode = !darkMode; // Toggle dark-mode class on body document.body.classList.toggle("dark-mode"); // Toggle light and dark icons if (darkMode) { lightIcon.setAttribute("display", "block"); darkIcon.setAttribute("display", "none"); } else { lightIcon.setAttribute("display", "none"); darkIcon.setAttribute("display", "block"); } }اکنون، این کار می کند: به طور پیش فرض، شما هنوز تنظیمات را از سیستم عامل یا مرورگر دارید. اما هنگامی که روی این دکمه کلیک کنید، این دکمه به صورت دستی لغو می شود.
مراحل بعدی
با وجود همه این موارد، عملکردی دارید که به طور پیش‌فرض تنظیمات حالت تاریک را از مرورگر یا سیستم‌عامل می‌گیرد و می‌توانید با یک دکمه جابجایی زیبا آن را لغو کنید. در نسخه YouTube این آموزش ، همچنین می‌توانید نحوه استفاده از localStorage را برای ذخیره این تنظیم برای جلسه بعدی بیاموزید.
اگر می‌خواهید درباره SVG اطلاعات بیشتری کسب کنید، SVG-tutorial.com را تحلیل کنید، جایی که می‌توانید با مثال‌های بسیار عالی درباره SVG از سطوح مبتدی تا پیشرفته بیشتر بیاموزید.
اگر می‌خواهید از این رفتار در یک بازی استفاده کنید، آموزش بازی گوریل‌های جاوا اسکریپت را تحلیل کنید، جایی که ما کل بازی را از ابتدا می‌سازیم. این یک آموزش عظیم دو ساعته است که طراحی روی یک عنصر Canvas با جاوا اسکریپت و کل منطق بازی با جاوا اسکریپت ساده را پوشش می دهد.
برای آموزش ساخت بازی جاوا اسکریپت در کانال من عضو شوید:
یوتیوب
برچسب‌ها
|
ارسال نظر