🌓 Faviconシステムダークモードに応じて変更する方法!

👋 こんにちは再び！

ようこそ別のブログ記事に戻って、この1つも非常に役立つでしょう!このポストでは、システムダークモードに従ってFaviconを変更できる方法について説明しました.
例はGitHub . 私のシステムカラーが暗いとき、ロゴは明るくなります、そして、私のシステムカラーが軽いとき、ロゴは暗くなります.
同じ目標を達成しよう!
だから、私はindex.html ファイルと私は、中でJavaScriptを書きます<script> 以下のようにタグを付けます.あなたはそれを書くことができます.js 必要ならファイル.

1 .🌓 暗闇と光faviconを得る

私はあなたがあなたのウェブサイトのfaviconを持っていると仮定するので、あなたは光、またはそれの暗いバージョンを作成することができますかどこかにそれを見つける.私は2 SVGを作成したので、それらを使用する場合はそれらを得ることができます.ちょうどこのコードをコピーして、2つのファイルlight.svg and dark.svg それぞれ.

<!-- light.svg -->
<svg width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="74" cy="74" r="74" fill="#2F363D"/>
<path d="M81.0492 31.6375C80.8101 32.5561 81.0332 33.4788 81.604 34.2894C84.1202 37.3037 86.1702 40.7743 87.5239 44.584C88.8795 48.1636 89.5387 52.0824 89.5026 56.2253C89.4212 65.5469 85.5333 74.0296 79.3553 80.0754C73.1772 86.1212 64.5924 89.8443 55.2318 89.7626C51.3026 89.7283 47.4951 89.0045 44.0382 87.8235C40.3513 86.5253 37.016 84.6548 34.148 82.2128C32.8859 81.166 31.0349 81.3801 29.9837 82.6369C29.3989 83.4374 29.1597 84.356 29.3828 85.2787C31.9554 95.0837 37.7748 103.651 45.5799 109.819C53.2714 115.756 62.833 119.292 73.2336 119.383C85.83 119.493 97.3149 114.529 105.708 106.316C114.101 98.1024 119.284 86.8689 119.394 74.21C119.487 63.6225 115.874 53.8084 109.817 45.9295C103.646 37.9344 94.7982 32.1027 84.6498 29.5973C83.0359 29.1229 81.41 30.0294 81.0492 31.6375Z" fill="#F8E3A1"/>
</svg>

<!-- dark.svg -->
<svg width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="74" cy="74" r="74" fill="#6E40C9"/>
<path d="M81.0492 31.6375C80.8101 32.5561 81.0332 33.4788 81.604 34.2894C84.1202 37.3037 86.1702 40.7743 87.5239 44.584C88.8795 48.1636 89.5387 52.0824 89.5026 56.2253C89.4212 65.5469 85.5333 74.0296 79.3553 80.0754C73.1772 86.1212 64.5924 89.8443 55.2318 89.7626C51.3026 89.7283 47.4951 89.0045 44.0382 87.8235C40.3513 86.5253 37.016 84.6548 34.148 82.2128C32.8859 81.166 31.0349 81.3801 29.9837 82.6369C29.3989 83.4374 29.1597 84.356 29.3828 85.2787C31.9554 95.0837 37.7748 103.651 45.5799 109.819C53.2714 115.756 62.833 119.292 73.2336 119.383C85.83 119.493 97.3149 114.529 105.708 106.316C114.101 98.1024 119.284 86.8689 119.394 74.21C119.487 63.6225 115.874 53.8084 109.817 45.9295C103.646 37.9344 94.7982 32.1027 84.6498 29.5973C83.0359 29.1229 81.41 30.0294 81.0492 31.6375Z" fill="#F8E3A1"/>
</svg>

2 .🔗 <リンク集

今、我々はFaviconを持って、我々は単に作成することができます<link> タグを私たちのタブに表示する.また、それを与えるid それで、我々は我々のJavaScriptでそれを選ぶことができます.

これは光がどのように見えるかです

3 .📜 JavaScriptを使用してfaviconを変更します。

さあ、Aを作ろう<script> タグと最初のステップは<link> タグを使用して、システムが暗いか軽いかを教えてくれるメディア問い合わせを使用します.The prefers-color-scheme メディアクエリ.Read more . 基本的に、カラースキームが暗いかどうかを確認します.

const faviconTag = document.getElementById("faviconTag");
const isDark = window.matchMedia("(prefers-color-scheme: dark)");

変数の初期化後、カラースキームを検出し、href 属性を<link> タグ.The matches プロパティisDark 変数リターンtrue or false 色計画に従います.

const changeFavicon = () => {
  if (isDark.matches) faviconTag.href = "./dark.svg";
  else faviconTag.href = "./light.svg";
};

今、私たちが関数を呼ぶ効果を見るために、我々はそれを呼び出します.
しかし、ユーザーが我々のサイトを見ることの間でカラースキームを変えるならば、それはちょうどgetthubがする方法でリアルタイムで変わりません.そのためにはsetInterval 関数を毎秒呼び出します.
これが最後のJSコードです👇

🚨 CAUTION: Keep the default href attribute on the <link> tag because Internet Explorer can get a dark logo on it's light tab

🎉 結果！

また、それについてYouTubeでビデオをチェックしてください!
私はこのブログのポストは、あなたのウェブサイトを改善する助けと思います.下のコメントで同じ機能を使用してサイトを共有し、任意の提案やフィードバックをお知らせください.それを与える、他の人にそれを共有します.
読書ありがとう!