تغییر favicon با تغییر به light mode و dark mode در react js
اگر در حال نوشتن یک برنامه با react js هستید و به دنبال این هستید که در صورتی که کاربر دستگاه خود را در حالت light mode یا dark mode قرار داد favicon صفحه را تغییر دهید از این نوشته برای آن استفاده کنید.
تغییر favicon با تغییر به light mode و dark mode در react js
برای این‌کار ابتدا یک فایل js در پوشه‌ی public خود بسازید می‌توانید نام آن را favicon.js بگذارید. محتوای این فایل را با کدهای زیر پر کنید:
addEventListener("load", (event) => {
function set_favicon() {
const usesDarkMode =
window.matchMedia("(prefers-color-scheme: dark)").matches || false;
const favicon = document.getElementById("favicon");
function switchIcon(usesDarkMode) {
if (usesDarkMode) {
favicon.href = "/favicon-light.png";
} else {
favicon.href = "/favicon-dark.png";
}
}
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => switchIcon(e.matches));
switchIcon(usesDarkMode);
}
set_favicon();
});
onload = (event) => {};
سپس فایل index.html که درون فولدر public موجود است قبل از بسته شدن تگ body کد زیر را قرار دهید:
<script src="favicon.js"></script>
سپس خطی که در آن کد مربوط به favicon.ico قرار گرفته است را با کد زیر جایگزین کنید:
<link rel="shortcut icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
حالا باید فایل‌های favicon مربوط به حالت روشن و تیره است را با نام‌های favicon-dark.png و favicon-light.png در پوشه‌ی public ذخیره کنید.
در صورتی که سوالی در ارتباط با کد بالا دارید در بخش نظرات همین نوشته برای ما بنویسید.