夜になったら自動的にダークモードに切り替える

Javascript

CSSのprefers-color-schemeを使う場合、ユーザーが選択しないとナイトモードになりません

body {
    background-color: #fff;
    color: #333; 
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
}

今回は18時から6時になったら自動でダークモードに切り替えます

const date = new Date();
const hour = date.getHours();
if ( hour >= 18 || hour < 6 ) {
    document.body.classList.add("darkmode");
} else {
    document.body.classList.remove("darkmode");
}

ページを開くたびに関数が実行されるので、時間に応じたモードが適用されるはず

BACK