تغییر 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 ذخیره کنید.
پایان.!
در صورتی که سوالی در ارتباط با کد بالا دارید در بخش نظرات همین نوشته برای ما بنویسید.
موفق باشید.