必要な部分のみ書いています。
index.html
<head>
<link rel="stylesheet" type="text/css" id="dark-mode-link" href="./css/dark-mode.css">
</head>
<body>
<p>ダークモード！</p>
<script>
const darkModetoggleSwitch = document.querySelector("#darkModetoggleSwitch")
const darkModeLink = document.querySelector('#dark-mode-link');
darkModetoggleSwitch.addEventListener('click', toggleDarkMode);
function toggleDarkMode() {
if (darkModeLink.href.includes('dark-mode.css')) {
darkModeLink.href = '';
} else {
darkModeLink.href = 'dark-mode.css';
}
}
</script>
</body>
dark-mode.css
body {
background-color: #121212;
color: #ffffff;
}
手動で切り替える方法。ボタンでの切り替え実装。参考サイトではローカルに保存して、最初の読み込み時に分けていたりしてます。
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
OSの設定で切り替える方法です。mac、windows、ios、androidどれでもいけると思います。
参考