ホームページ >ウェブフロントエンド >jsチュートリアル >JSでユーザーがダークモードかどうかを検出する方法
JSでユーザーがダークモードかどうかを検出する方法
- 王林オリジナル
- 2024-08-24 22:30:03665ブラウズ
導入
Web サイトがユーザーの好みに基づいてライト モードとダーク モードをどのようにシームレスに切り替えるのか疑問に思ったことはありますか?これは魔法ではなく、最新の Web テクノロジーを賢く利用したものです。この投稿では、ユーザーがダーク モードを好むかどうかを検出する背後にあるシンプルかつ強力なテクニックと、この情報を使用して Web サイトのユーザー エクスペリエンスを向上させる方法を明らかにします。
ダークモード検出について
ダーク モードの人気により、多くの Web サイトやアプリケーションがユーザーのシステム設定に合わせたテーマを提供するようになりました。この機能は、JavaScript の matchMedia API を使用して実現されます。これにより、Web アプリケーションは、ユーザーの配色設定などのメディア クエリの変更に応答できます。
仕組み
matchMedia API
window.matchMedia メソッドは、メディア クエリを評価し、ユーザーの好みに基づいてサイトの外観を調整する方法を提供します。ダーク モードが有効になっているかどうかを確認するには、次の JavaScript 関数を使用できます:
// Check if the user prefers dark mode
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
実際の実装
index.html
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Demo</title>
<style>
.dark {
background: black;
color: white;
}
.light {
background: white;
color: black;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<!-- scripts -->
<script>
// Function to check if dark mode is enabled
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// Function to update the theme based on the user's preference
function updateTheme() {
if (isDarkMode()) {
document.body.classList.add("dark");
document.body.classList.remove("light");
} else {
document.body.classList.add("light");
document.body.classList.remove("dark");
}
}
// Initial theme setup
updateTheme();
// Listen for changes in the color scheme preference
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
</script>
</body>
</html>
- updateTheme 関数: この関数はダーク モードの設定をチェックし、それに応じてクラスを更新します。 リアルタイム更新: 配色設定の変更を検出し、更新テーマを呼び出してリアルタイムで外観を調整するイベント リスナーを matchMedia に追加しました。
システムの配色を変更すると、ページを更新しなくても、Web サイトは設定を反映するように自動的に調整されます。
GitHub でフォローしてください Avinash Tare
以上がJSでユーザーがダークモードかどうかを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。