تصویر نویسنده

۲۸ مرداد ۱۳۹۹

0

رویکردی بهتر نسبت به حالت شب در وب سایت شما

آموزش

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

پشتیبانی از حالت شب هر روز بیشتر و بیشتر از یک ظاهر خوب به یک امر ضروری تبدیل می شود. البته به ذائقه شما بستگی دارد، اما اگر اینجا هستید احتمالا می خواهید حالت شب را در سایت خود یا برای مشتریان خود پیاده سازی کنید.

وقتی نوبت به وب سایت های تاریک می رسد، رویکردهای مختلفی در وب وجود دارد و ما می خواهم در مورد ۲ رویکرد متفاوت با شما صحبت کنیم، یکی ساده ترین پیاده سازی را دارد و دومی روش مد نظرخود ما می باشد و برای پیاده سازی حالت شب در livecodestream.dev استفاده شده است.

بیایید با روش اول شروع کنیم.

حالت شب در چند خط کد

گزینه اول با استفاده از سحر و جادوی “dark” کار می کند :p ، گذشته از شوخی، بسیار ساده و ظریف است و از یک خط CSS تشکیل شده.

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}

شما احتمالاً تعجب می کنید که چگونه این کار ممکن است و حق دارید که شک و تردید داشته باشید، اما واقعاً ممکن است. قبل از صحبت کردن در مورد اینکه چرا من این گزینه را خیلی دوست ندارم، بیایید آن را در عمل مشاهده کنیم:

همانطور که در مثال مشاهده می شود این روش واقعاً خوب کار می کند، اما با یک اشکال، تصاویر را نیز معکوس می کند. دلیل این امر این است که فیلتر بر تصاویر، پس زمینه و border ها نیز اعمال می شود. اکنون با اجتناب از تغییر در تصاویر (یا بهتر بگوییم با وارون کردن وارونگی) می توان این موضوع را به راحتی برطرف کرد:

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}

html[data-theme='dark'] img {
  filter: invert(1) hue-rotate(180deg)
}

عالی شد! اما همه چیز خیلی معمولی عوض می شود، بگذارید آن را با برخی تغییرات و اضافه کردن رنگ در اینجا و آنجا زیبا تر کنیم:

html {
    transition: color 300ms, background-color 300ms;
}

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}

html[data-theme='dark'] img {
  filter: invert(1) hue-rotate(180deg)
}

زیبا شد! جواب می دهد. شاید همیشه عالی به نظر نرسد، در برخی موارد، ممکن است کمی عجیب به نظر بیاید و ممکن است بخواهیم کنترل بیشتری بر روی هر رنگ داشته باشیم.

حالت شب با متغیرهای CSS

CSS اجازه تعریف خصوصیات سفارشی (متغیرها) را می دهد، که می توانند در CSS با مقادیر مشخص تعریف شوند و در سراسر وب سایت استفاده مجدد شوند. می توانید اطلاعات مفصلی در این باره در اسناد MDN بیابید، با این حال، ما به سرعت در اینجا نحوه ایجاد یک متغیر و نحوه استفاده از آن را به سرعت بررسی خواهیم کرد.

:root {
    --my-var: blue;
}

element {
    color: var(--my-var);
}

بسیار ساده، برای نامگذاری یک متغیر، — را به اول نام متغیر اضافه می کنیم، و برای استفاده از آن ، از تابع () var استفاده می کنیم.
حالا برگردیم به سناریوی خود و سعی کنیم حالت شب را از این طریق پیاده سازی کنیم.

html {
  --background-primary: #fff;
  --color-primary: #333;
}

html[data-theme='dark'] {
  --background-primary: #030303;
  --color-primary: #ccc;
}

html {
  transition: color 300ms, background-color 300ms;
  background: var(--background-primary);
  color: var(--color-primary);
}

h1, h2, p {
  color: var(--color-primary);
}

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

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

منطق انتخاب تم

بیایید اکنون روی جاوا اسکریپت کار کنیم که سوئیچ را امکان پذیر می کند که در واقع بسیار ساده است:

const htmlEl = document.getElementsByTagName('html')[0];

const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;
}

در کد بالا نحوه عملکرد تم از طریق اعمال یک ویژگی داده روی بستر HTML انجام می شود، برای این کار باید عنصر را در متغیر htmlEl ضبط کنیم و در آخر عملکردی داریم که یک نام تم دریافت می کند و ویژگی را تغییر می دهد.

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

// Capture the current theme from local storage and adjust the page to use the current theme.
const htmlEl = document.getElementsByTagName('html')[0];
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    htmlEl.dataset.theme = currentTheme;
}

// When the user changes the theme, we need to save the new value on local storage
const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;
    localStorage.setItem('theme', theme);
}

تمام! بیایید نتیجه را ببینیم:

نتیجه گیری

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

اگر فکر می کنید که راه حل بهتری می شناسید، آن را از طریق بخش نظرات با ما در میان بگذارید.


امیدواریم امروز چیز جدیدی یاد گرفته باشید و از همراهیتان تشکر می کنیم!

منبع : livecodestream

۰ ۰ vote
Article Rating