【CSS】夜になったら自動でダークモードにする【JavaScript】

CSSとJavaScriptの組み合わせで夜になったら自動でダークモードにしてみます。流行ですもんね～
ちなみにこの記事でも18:00～翌06:00に適用されるようになっています。

下記を参考に、適当にヘッダーに入れるなり、該当のブロックにインラインで入れるなりしてみて下さい。

<script type="text/javascript">
<!--
var now = new Date();
var hour = now.getHours();
if(hour < 6 || hour >= 18){
document.write('<style type="text/css">body{background-color:#10171f;color:#8698a4;}a:link{color:#4c9eeb;}a:visited{color:#5e5ce6;}a:active{color:#fa325a;}</style>');
}
-->
</script>

<!--

var now = new Date();

var hour = now.getHours();

if(hour < 6 || hour >= 18){

document.write('<style type="text/css">body{background-color:#10171f;color:#8698a4;}a:link{color:#4c9eeb;}a:visited{color:#5e5ce6;}a:active{color:#fa325a;}</style>');

}

-->

</script>

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

たにぐちまこと

Enjoy!

【CSS】夜になったら自動でダークモードにする【JavaScript】

コメント (0)