判斷的方法很簡單，一行 JS 就可以：
盒子小站<script>
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('目前是深色(暗黑)模式');
} else {
console.log('目前是淺色模式');
}
</script>
瀏覽器依據作業系統的設定，自動切換網頁顏色模式的範例：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body data-layout-mode="">
<div class="text1">
<h1>HELLO</h1>
</div>
<script>
$(document).ready(function() {
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('Dark mode is supported');
$('body').attr('data-layout-mode', 'dark');
} else {
$('body').attr('data-layout-mode', '');
}
});
</script>
<style>
/*亮色模式的 css*/
body {
background-color:#ffffff;
}
.text1 {
background-color:#ffff99;
color:#000;
}
/*深色模式的 css*/
body[data-layout-mode=dark] {
background-color:#cecece;
}
body[data-layout-mode=dark] .text1 {
background-color:#666;
color:#fff;
}
</style>
</body>
</html>
瀏覽器依據作業系統 (手機或電腦) 的設定，自動切換網頁顏色模式的範例：
<html>
<body>
<style>
body {
background-color: #ffffff;
}
.text1 {
background-color: #ffff99;
color: #000;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #555;
}
.text1 {
background-color: #666;
color: #fff;
}
}
</style>
<div class="text1">
<h1>HELLO</h1>
</div>
</body>
</html>
