خانه / cf / افزودن حالت تاریک و روشن به وب سایت با جاوا اسکریپت

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

اگر شما اغلب در اواخر شب کار می کنید، نور صفحه نمایش روشن کامپیوتر شما باعث بروز چشم درد می شود،بسیاری از برنامه ها، وب سایت ها و حتی سیستم عامل با حالت رنگی حالت تاریک به عنوان یک جایگزین می آید،وب سایت های محبوب مانند یوتیوب نیز یک طرح رنگی تیره ارائه می دهند، این به کاربران امکان می دهد فیلم ها را در اوایل شب با یک تجربه راحت تر تماشا کنند.در این مقاله می خواهیم با روش های افزودن حالت تاریک و روشن به وب سایت با استفاده از جاوا اسکریپت آشنا شویم.

۱.قدم اول ساخت طرح اولیه با HTML

در این مرحله با استفاده از HTML یک اسکلت بندی ساده همراه با یک دکمه سوئیچ اضافه خواهیم کرد برای اینکه بتوانیم از حالت تاریک به روشن و بلعکس حرکت کنیم(برای یادگیری HTML از دوره آموزش رایگان HTML 5 کدفرند استفاده کنید).

<label class="switch">   <input type="checkbox" id="checkbox" onclick="toggle()">   <span class="slider"></span> </label>  <p id="text"></p>

دقت کنید که حتما برای سوئیچ خود رویداد OnClick را تعریف کنید در غیر این صورت کدهای جاوا اسکریپت اجرا نخواهند شد

۲.استایل دهی با Css

بعد از اسکلت بندی سازه یا سایت نوبت به استایل دهی میرسد که ما با استفاده از Css به عناصر html استایل های مدنظرمان را اعمال می کنیم.(برای یادگیری Css و Css3 از دوره رایگان کدفرند استفاده کنید).

body {   display: flex;   justify-content: center;   align-items: center;   flex-direction: column;   min-height: 100vh; }  p {   font-family: Monospace;   font-size: 14px; }  .switch {   position: relative;   display: inline-block;   width: 60px;   height: 34px; }  .switch input {    opacity: 0;   width: 0;   height: 0; }  .slider {   position: absolute;   cursor: pointer;   top: 0;   left: 0;   right: 0;   bottom: 0;   background-color: #ccc;   transition: .4s; }  .slider:before {   position: absolute;   content: "";   height: 26px;   width: 26px;   left: 4px;   bottom: 4px;   background-color: white;   transition: .4s; }  input:checked + .slider {   background-color: #5BC236; }  input:focus + .slider {   box-shadow: 0 0 1px #2196F3; }  input:checked + .slider:before {   transform: translateX(26px); }

اگر از دوره آموزش Css کدفرند استفاده کرده باشید تمامی کدهای بالا برای شما اشنا خواهند بود اما در رابطه با ویژگی Flex کمی توضیح نیاز است.

Flexbox ها کدهای جدید در CSS می باشند که توسط W3C برای رفع مشکلات استفاده از کد های float و طراحی زیبا و دقیق تر سایت ها بخصوص سایت های ریسپانسیو ارائه شده است. پس از منسوخ شدن استفاده از table در طراحی قالب سایت، استفاده از کد float جز کد های پرطرفدار طراحان به شمارمی رفت که استفاده از آن طراحان را دچار مشکلاتی می کرد.

علاوه بر اینکه استفاده از Flexbox ها اصولی تر از کدهای Float می باشند، استفاده از آن تاثیر بسزایی درindex صفحات سایت توسط موتورهای جستجوی گوگل نیز دارد و در نتیجه در سئوی سایت بسیار موثر است.

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۶۹ هزار تومان

مهمترین نکته ای که در روزهای اول ارائه Flexbox وجود داشت این بود که این کدها تنها برای طراحی بخشی از صفحه سایت (برای مثال منو) استفاده می گردید و برای طراحی قالب کل صفحه مورد استفاده نبود، چرا که برای ساخت قالب اصلی سایت با Flexbox ها باید از مجموعه کدهای Flexbox و CSS در کنار هم استفاده شود که به این مجموعه Grid Layout Module گفته می شود. جدا از تمام مزایای Grid Layout Module، این مجموعه یک محدویت بزرگ را برای طراحان به همراه داشت، حتی آخرین نسخه های بروزرسانی مرورگرها هم با آن مشکل داشت. در واقع یکی از علت هایی که ورژن های مختلفی از Flexbox ها ارائه شد تردید شرکت های ارائه دهنده مرورگر ها در پشتیبانی از آن بود.

امروزه قالبلیت های Flexbox تنها در مرورگر IE9 و پایین تر قابل پشتیبانی نیست.

به کمک کد های Flexbox می توانیم بجای اینکه برای هر آبجکت بصورت انفرادی خصوصیت تعیین کنیم، تمام آبجکت ها را بصورت گروه در آورده و برای آنها style های گروهی قرار دهیم. در واقع استفاده از Flexbox ها بهترین گزینه برای موقعیت دهی آبجکت های درون یک صفحه می باشد.

۳.قدم سوم کدهای اجرایی جاوا اسکریپت

بعد از ایجاد ساختار و استایل دهی نوبت به جان بخشیدن به عناصر است که بتوانیم با افزودن حالت تاریک و روشن به یک صفحه وب خوانایی و کار را در زمان های مختلف بهبود ببخشیم.(برای یادگیری جاوا اسکریپت می توانید از دوره آموزش کامل جاوا اسکریپت کدفرند استفاده کنید).

// Get prefers-color-scheme media query if (window.matchMedia("(prefers-color-scheme: dark)").matches) {   window.localStorage.setItem("isDarkMode", "true"); }  // When browser window loads, check dark mode window.onload = function() {   const isDarkMode = window.localStorage.getItem("isDarkMode") === "true";      if (isDarkMode) {     document.body.style.background = "#000000";     document.getElementById("text").innerHTML = "Turn on the lights!";     document.getElementById("text").style.color = "#ffffff"     document.getElementById("checkbox").checked = false;       } else {     document.body.style.background = "#ffffff";     document.getElementById("text").innerHTML = "Turn off the lights!";     document.getElementById("text").style.color = "#000000"     document.getElementById("checkbox").checked = true;   } }  // Toggle dark mode function toggle() {   const isDarkMode = window.localStorage.getItem("isDarkMode") === "true";      if (isDarkMode) {     window.localStorage.setItem("isDarkMode", "false");     document.body.style.background = "#ffffff";     document.getElementById("text").innerHTML = "Turn off the lights!";     document.getElementById("text").style.color = "#000000"     document.getElementById("checkbox").checked = true;   } else {     window.localStorage.setItem("isDarkMode", "true");     document.body.style.background = "#000000";     document.getElementById("text").innerHTML = "Turn on the lights!";     document.getElementById("text").style.color = "#ffffff"     document.getElementById("checkbox").checked = false;     } }

در کدهای بالا ابتدا با استفاده از دستور window.onload = function() حالت تاریک رو فراخوانی می کنیم هنگام سوئیچ شدن و با استفاده از DOM یک سری استایل ها را با استفاده از جاوا اسکریپت به عناصر اضافه می کنم تا صفحه تاریک شود و برای برگشت به حالت روشن نیز از روش بلعکس ولی با مقدار استایل دهی متفاوت استفاده می کنیم.می توانید از طریق این لینک به صورت زنده این حالت رو مشاهده کنید.

استراتژی بازاریابی محتوا

نوشته افزودن حالت تاریک و روشن به وب سایت با جاوا اسکریپت اولین بار در CodeFriend.ir پدیدار شد.

درباره ی admin

مطلب پیشنهادی

رنگ ها در طراحی وب : هر آنچه باید درباره رنگ‌ها بدانید

موفقیت هر قطعه از ارتباطات بصری به رنگ بستگی دارد. تحقیقات در زمینه تاثیر رنگ در بازاریابی به ما نشان می‌دهد که تنها ۹۰ ثانیه طول می‌کشد تا یک تصمیم ناخودآگاه در مورد یک محصول اتخاذ شود، و اینکه ۶۲ تا ۹۰ درصد از این تصمیمات تنها براساس رنگ ها هستند. در نتیجه، افزایش آگاهی شما از نظریه رنگ ها و روان‌شناسی آنها می‌تواند یک راه موِثر برای کمک به افزایش ارتباط با مشتری و بازدید کننده باشد، و در بسیاری از نمونه‌ها قابلیت رابط کاربری شما را بهبود می‌بخشد.در این پست قصد داریم با روان‌شناسی رنگ ها و تاثیر رنگ ها در طراحی وب آشنا شویم. پیشنهاد شگفت انگیز کدفرند،دانلود به تمامی دوره های آموزشی کدفرند تنها با ۶۹ هزار تومان درک کنید که کدام رنگ چه معنایی برای مخاطب شما دارد به طور کلی، رنگ‌های مختلف موارد زیر را به تصویر می‌کشند: رنگ قرمز (Red) مفاهیم مثبت : انرژی،اشتیاق،قدرت،حرارت،هیجان مفاهیم منفی : عصبانیت،تهاجم،ترس،شورش،شرارت محل استفاده : ایجاد اخطار،ایجاد فوریت،افزایش اشتیاق رنگ زرد (Yellow) مفاهیم مثبت : شادی،خوش بینی،صمیمت،بازیگوشی،سرگرمی مفاهیم منفی : انتقادی،بی صبری و بی تابی،تکان ده..

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *