بیاموزید که چگونه با استفاده از جاوا اسکریپت، ویژگی های سفارشی CSS، ذخیره سازی محلی و تنظیمات سیستم، The Ultimate Theme Toggle™️ را برای وب سایت خود بسازید. بدون چارچوب مورد نیاز!
من قبلاً با تغییر حالت روشن و تاریک مخالف بودم. “ضامن، تنظیمات برگزیده سیستم کاربر است!” من ساده‌لوحانه فریاد می‌زنم و ترجیح می‌دهم به درخواست رسانه CSS با طرح رنگ ترجیحی، موضوع را در وب‌سایت شخصی من کنترل کند. بدون ضامن. چاره ای نیست. 🫠
از زمانی که به یک چیز تبدیل شد، من یک کاربر حالت تاریک بودم. اما اخیراً ترجیح دادم استفاده کنم مقداری وب‌سایت‌ها و ابزارها در حالت روشن – از جمله وب‌سایت شخصی من – در حالی که تنظیمات سیستم من را کاملاً در تاریکی نگه می‌دارم. نیاز به ضامن داشتم من نیاز به انتخاب داشتم! و بقیه هم همینطور.
در این پست به شما نشان خواهم داد که چگونه The Ultimate Theme Toggle™️ را برای وب سایت خود در جاوا اسکریپت ساختم که:
- یک تم ترجیحی را در فضای ذخیره سازی مرورگر محلی ذخیره و بازیابی می کند،
- به تنظیمات سیستم کاربر برمی گردد،
- اگر هیچ یک از موارد بالا شناسایی نشد، به یک موضوع پیش‌فرض برمی‌گردد.
TL;DR: این کد روی CodePen است.
یک ویژگی داده به تگ HTML خود اضافه کنید
در تگ HTML خود، یک ویژگی داده مانند data-theme و یک مقدار پیش فرض روشن یا تاریک به آن بدهید. در گذشته من از ویژگی سفارشی استفاده کرده ام color-mode به جای یک ویژگی داده (مثلا color-mode="light"). در حالی که این کار می کند، به عنوان HTML معتبر طبقه بندی نمی شود و من نمی توانم هیچ سندی روی آن پیدا کنم! هر گونه بینش در این مورد بسیار قدردانی می شود. 😅
<html lang="en" data-theme="light">
<!-- all other HTML -->
</html>
قالب بندی را از طریق[ویژگیهایسفارشیCSS
در CSS خود، رنگ‌های تم خود را از طریق خصوصیات (یا متغیرهای) سفارشی CSS در زیر هر مقدار برای data-theme صفت. توجه داشته باشید که لزوماً نیازی به استفاده ندارید :root در ترکیب با data-theme، اما برای ویژگی های جهانی که با موضوع تغییر نمی کنند (در مثال زیر نشان داده شده است) مفید است. درباره کلاس شبه CSS :root در MDN بیشتر بدانید.
:root {
--grid-unit: 1rem;
--border-radius-base: 0.5rem;
}
[data-theme="light"] {
--color-bg: #ffffff;
--color-fg: #000000;
}
[data-theme="dark"] {
--color-bg: #000000;
--color-fg: #ffffff;
}
/* example use of CSS custom properties */
body {
background-color: var(--color-bg);
color: var(--color-fg);
}
را تغییر دهید data-theme به صورت دستی روی تگ HTML خود مشخص کنید، و شما می بینید که تم خود تغییر می کند (تا زمانی که از آن ویژگی های CSS برای استایل دادن به عناصر خود استفاده می کنید)!
یک دکمه جابجایی در HTML بسازید
یک دکمه HTML را به هدر وب سایت خود یا هر جا که نیاز به تغییر موضوع دارید اضافه کنید. a اضافه کنید data-theme-toggle ویژگی (از این برای هدف قرار دادن دکمه در جاوا اسکریپت بعداً استفاده خواهیم کرد)، و اگر می‌خواهید از نمادهایی روی دکمه خود استفاده کنید (مانند خورشید و ماه برای نمایش حالت روشن و تاریک به ترتیب) از یک برچسب آریا استفاده می‌کنیم. خوانندگان و فناوری کمکی می توانند هدف دکمه تعاملی را درک کنند.
<button
type="button"
data-theme-toggle
aria-label="Change to light theme"
>Change to light theme (or icon here)</button>
محاسبه تنظیم تم در بارگذاری صفحه
اینجا جایی است که ما تنظیمات تم را بر اساس آنچه من می نامم محاسبه می کنیمآبشار ترجیحی“.
اولویت تم را از فضای ذخیره‌سازی محلی دریافت کنید
ما می‌توانیم از ویژگی localStorage در جاوا اسکریپت برای ذخیره تنظیمات برگزیده کاربر در مرورگری استفاده کنیم که بین جلسات (یا تا زمانی که به صورت دستی پاک شود) باقی می‌ماند. در The Ultimate Theme Toggle™️، اولویت ذخیره شده کاربر مهمترین تنظیم است، بنابراین ابتدا به دنبال آن خواهیم بود.
در بارگذاری صفحه، استفاده کنید localStorage.getItem("theme") برای بررسی اولویت ذخیره شده قبلی. بعداً در پست، با هر بار فشار دادن کلید، مقدار موضوع را به‌روزرسانی می‌کنیم. اگر مقدار ذخیره محلی وجود نداشته باشد، مقدار خواهد بود null.
// get theme on page load
localStorage.getItem("theme");
// set theme on button press
localStorage.setItem("theme", newTheme);
تشخیص تنظیمات سیستم کاربر در جاوا اسکریپت
اگر اولویت موضوع ذخیره شده در آن وجود نداشته باشد localStorage، تنظیمات سیستم کاربر را با استفاده از روش window.matchMedia() با ارسال یک رشته پرس و جو رسانه ای شناسایی می کنیم. برای اهداف آبشار ترجیحی فقط باید یک تنظیم را محاسبه کنید، اما کد زیر نشان می دهد که چگونه می توانید تنظیمات سیستم روشن یا تاریک را تشخیص دهید.
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
// or
const systemSettingLight = window.matchMedia("(prefers-color-scheme: light)");
window.matchMedia() برمی گرداند a MediaQueryList که شامل رشته پرس و جو رسانه ای است که درخواست کرده اید و اینکه آیا آن را درخواست کرده اید matches (درست/نادرست) تنظیمات سیستم کاربر.
{
matches: true,
media: "(prefers-color-scheme: dark)",
onchange: null
}
به یک موضوع پیش فرض برگردید
اکنون به a دسترسی دارید localStorageمقدار و تنظیمات سیستم از طریق window.matchMedia()، می‌توانید تنظیمات تم ترجیحی را با استفاده از آبشار ترجیحی (ذخیره‌سازی محلی، سپس تنظیمات سیستم) محاسبه کنید و به موضوع پیش‌فرض انتخابی خود بازگردید (که باید تم پیش‌فرضی باشد که قبلاً در تگ HTML خود مشخص کرده‌اید).
ما این کد را در بارگذاری صفحه اجرا می کنیم تا تنظیمات تم فعلی را محاسبه کنیم.
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
if (localStorageTheme !== null) {
return localStorageTheme;
}
if (systemSettingDark.matches) {
return "dark";
}
return "light";
}
const localStorageTheme = localStorage.getItem("theme");
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
یک شنونده رویداد را به دکمه جابجایی اضافه کنید
در مرحله بعد، یک شنونده رویداد راه‌اندازی می‌کنیم تا با فشار دادن دکمه، موضوع را تغییر دهد. دکمه را در DOM با استفاده از ویژگی داده (data-theme-toggle) قبلاً اضافه کردیم و یک شنونده رویداد به دکمه کلیک اضافه کنید. مثال زیر کاملاً پرمخاطب است، و ممکن است بخواهید برخی از عملکردهای زیر را به توابع ابزار (که در مثال در CodePen انجام داده‌ام) خلاصه کنید. بیایید این را طی کنیم:
- موضوع جدید را به صورت رشته ای محاسبه کنید
- متن دکمه را محاسبه و به‌روزرسانی کنید (اگر از نمادها روی دکمه خود استفاده می‌کنید، اینجا جایی است که تغییر را انجام می‌دهید)
- برچسب aria را روی دکمه به روز کنید
- ویژگی data-theme را روی تگ HTML تغییر دهید
- اولویت تم جدید را در حافظه محلی ذخیره کنید
- فعلی ThemeSetting را در حافظه به روز کنید
// target the button using the data attribute we added earlier
const button = document.querySelector("[data-theme-toggle]");
button.addEventListener("click", () => {
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
// update the button text
const newCta = newTheme === "dark" ? "Change to light theme" : "Change to dark theme";
button.innerText = newCta;
// use an aria-label if you are omitting text on the button
// and using sun/moon icons, for example
button.setAttribute("aria-label", newCta);
// update theme attribute on HTML to switch theme in CSS
document.querySelector("html").setAttribute("data-theme", newTheme);
// update in local storage
localStorage.setItem("theme", newTheme);
// update the currentThemeSetting in memory
currentThemeSetting = newTheme;
});
برای تایید localStorage در حال به روز رسانی است، ابزار توسعه دهنده خود را باز کنید، به آن بروید Application برگه، گسترش دهید Local Storage و سایت خود را انتخاب کنید شما یک لیست key:value را مشاهده خواهید کرد. به دنبال theme و روی دکمه کلیک کنید تا بروزرسانی آن را در زمان واقعی مشاهده کنید. صفحه خود را دوباره بارگیری کنید و خواهید دید که اولویت تم حفظ شده است!
همه را کنار هم بگذار!
- اکنون می‌توانید Ultimate Theme Toggle™️ خود را توسط:
- با استفاده از ویژگی های سفارشی CSS برای تعیین رنگ های تم مختلف، از طریق یک ویژگی داده در تگ HTML شما تغییر می کند.
- استفاده از یک دکمه HTML برای روشن کردن کلید
- محاسبه طرح زمینه ترجیحی در بارگیری صفحه با استفاده از آبشار ترجیحی (ذخیره‌سازی محلی > تنظیمات سیستم > طرح زمینه پیش‌فرض بازگشتی)
- تغییر موضوع با کلیک روی دکمه جابجایی، و ذخیره اولویت کاربر در مرورگر برای بازدیدهای بعدی
در اینجا CodePen کامل است و می توانید نسخه کارآمد آن را در وب سایت شخصی من بررسی کنید. جابجایی مبارک!
