🌓
【CSS】ダークモード対応の基本
勉強中に学んだ、
- ライトモードとダークモードを切り替える設定
をメモ書きとして残しておきます。
OSの設定に応じて変更する場合
- @mediaクエリを利用して、OSの設定に応じて、変更する
@media (prefers-color-scheme: dark) {
/* ダークモード時の処理 */
}
以下、参考です。OSの背景を「ライトモード」⇔「ダークモード」にしてみてください。
※ jsはテキスト変更用です。
- javascriptを使ってクラスを追加し、クラス名があるときは、配色を変更する処理を加える
let osDark = window.matchMedia("(prefers-color-scheme: dark)");
// ダークモードがオンのときに実行する処理
function darkModeOn() {
document.documentElement.classList.add("darkmode")
}
// ダークモードがオフのときに実行する処理
function darkModeOff() {
document.documentElement.classList.remove("darkmode");
}
// ロード時の状況に応じて切り替え
if (osDark.matches) { // OSでダークモードがオンの場合
darkModeOn();
}
// OSの設定変更に応じて切り替え
osDark.addListener(function () {
if (osDark.matches) { // ダークモードをオンにした場合
darkModeOn();
} else { // ダークモードをオフにした場合
darkModeOff();
}
})
以下、参考です。OSの背景を「ライトモード」⇔「ダークモード」にしてみてください。
ボタンに応じて表示を変える場合
ボタンは以下のサイトで作成したものを使用しました。
<div class="content">
<h1 id="text">ライトモード</h1>
<aside class="switch">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0">
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
</aside>
</div>
@charset "UTF-8";
/* 変数 */
:root {
--text: #444444;
--back: #FFFFFF;
--change: 0.5s ease-in-out;
}
:root.darkmode {
--text: #EBEBEB;
--back: #231802;
}
/* 基本設定 */
body {
font-family: sans-serif;
background: var(--back);
color: var(--text);
transition: var(--change);
margin: 0;
height: 100vh;
}
/* コンテンツ */
.content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.content #text {
margin-bottom: 20px;
}
.darkmode .content {
transition: var(--change);
}
/* スイッチ */
.onoffswitch {
position: relative;
width: 76px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
height: 36px;
padding: 0;
line-height: 36px;
border: 2px solid #F26A74;
border-radius: 36px;
background-color: #F26A74;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block;
width: 36px;
margin: 0px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 38px;
border: 2px solid #F26A74;
border-radius: 36px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label {
background-color: #E13845;
}
.onoffswitch-checkbox:checked+.onoffswitch-label,
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
border-color: #E13845;
}
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
right: 0px;
}
let osDark = window.matchMedia("(prefers-color-scheme: dark)");
let switchButton = document.getElementById("myonoffswitch");
let text = document.getElementById("text");
// ダークモードをオンにする処理
function darkModeOn() {
document.documentElement.classList.add("darkmode");
switchButton.checked = true;
text.innerText = "ダークモード";
}
// ダークモードをオフにする処理
function darkModeOff() {
document.documentElement.classList.remove("darkmode");
switchButton.checked = false;
text.innerText = "ライトモード";
}
// ロード時の状況に応じて切り替え
if (osDark.matches) { // OSでダークモードがオンの場合
darkModeOn();
}
// スイッチの操作に応じて切り替え
switchButton.addEventListener("change", function () {
if (switchButton.checked) { // スイッチをオンにした場合
darkModeOn();
} else { // スイッチをオフにした場合
darkModeOff();
}
})
// OSの設定変更に応じて切り替え
osDark.addListener(function () {
if (osDark.matches) { // ダークモードをオンにした場合
darkModeOn();
} else { // ダークモードをオフにした場合
darkModeOff();
}
})
参考資料
Discussion