- ダークモード用のCSSスタイルを作成する まず、ダークモード用のスタイルを定義するためにCSSファイルを作成します。例えば、"dark-mode.css"という名前のファイルを作成します。以下は、ダークモード用の一般的なスタイルの例です。
body {
background-color: #333;
color: #fff;
}
a {
color: #fff;
}
/* 他のスタイルルールを追加する */
- ダークモード用のスタイルを適用する
HTMLファイルの
<head>
セクション内で、ダークモード用のスタイルを適用するためにCSSファイルを読み込みます。以下は、HTMLファイル内でCSSファイルを読み込む方法の例です。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
<!-- 他の<head>内の要素を追加する -->
</head>
<body>
<!-- ページのコンテンツを追加する -->
</body>
</html>
<link>
要素のhref
属性にCSSファイルのパスを指定し、media
属性に(prefers-color-scheme: dark)
を指定します。これにより、ユーザーの環境がダークモードをサポートしている場合にのみ、ダークモード用のスタイルが適用されます。
- ユーザーがダークモードを切り替えられるようにする ユーザーがダークモードを切り替えられるようにするために、トグルスイッチやボタンを追加する方法もあります。以下は、JavaScriptを使用してダークモードの切り替えを実現する例です。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
<script>
function toggleDarkMode() {
var body = document.getElementsByTagName("body")[0];
body.classList.toggle("dark-mode");
}
</script>
</head>
<body>
<button onclick="toggleDarkMode()">ダークモード切り替え</button>
<!-- ページのコンテンツを追加する -->
</body>
</html>
上記の例では、toggleDarkMode()
関数がボタンがクリックされるたびに呼び出され、body
要素のdark-mode
クラスがトグルされます。dark-mode
クラスは、ダークモード用のスタイルを指定するためにCSSファイル内で定義する必要があります。
これらの手順を実行することで、HTMLでダークモードを作成することができます。ユーザーの環境設定やユーザーが切り替えた設定に基づいて、ダークモードが自動的に適用されるようになります。また、ユーザーが切り替えるためのUI要素を追加することもできます。