Webサイトのデザインにダークモードを追加することは、ユーザーエクスペリエンスを向上させ、目の疲れを軽減する重要なステップです。この記事では、簡単な手順でどのようにしてダークモードを実装するかについて説明します。
CSSでスタイルを作成
まず、通常のスタイルシートとダークモード用のスタイルシートを作成します。これにより、ダークモードが有効になったときに適切なスタイルが適用されます。
/* styles.css */
/* 通常のスタイル */
body {
background-color: #ffffff; /* デフォルトの背景色 */
color: #333333; /* デフォルトのテキスト色 */
}
h1 {
color: #000000; /* デフォルトの見出し色 */
}
/* dark-mode.css */
/* ダークモードのスタイル */
body.dark-theme {
background-color: #222222; /* ダークモードの背景色 */
color: #dddddd; /* ダークモードのテキスト色 */
}
.dark-theme h1 {
color: #ffffff; /* ダークモードの見出し色 */
}JavaScriptでダークモードのトグル機能を実装
次に、JavaScriptを使用してダークモードの切り替え機能を実装します。これにより、ユーザーがダークモードとライトモードを切り替えることができます。
// dark-mode.js
const darkModeToggle = document.getElementById('darkModeToggle');
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.body.classList.toggle('dark-theme');
} else if (currentTheme === 'light') {
document.body.classList.toggle('light-theme');
}
darkModeToggle.addEventListener('click', () => {
let theme;
if (prefersDarkScheme.matches) {
document.body.classList.toggle('light-theme');
theme = document.body.classList.contains('light-theme') ? 'light' : 'dark';
} else {
document.body.classList.toggle('dark-theme');
theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
}
localStorage.setItem('theme', theme);
});HTMLでトグルボタンを追加
ユーザーがダークモードを切り替えるためのトグルボタンをHTMLに追加します。これにより、ユーザーが好みのモードを選択できるようになります。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
<title>Dark Mode Example</title>
</head>
<body>
<h1>Welcome to Dark Mode Example</h1>
<button id="darkModeToggle">Toggle Dark Mode</button>
<script src="dark-mode.js"></script>
</body>
</html>まとめ
ダークモードの追加は、Webサイトの利便性とユーザーエクスペリエンスを向上させるための重要なステップです。この手順を使用して、あなたのWebサイトを目に優しい夜間モードに変えてみてください。
