はじめに
皆さん、ウェブサイトやアプリケーションのデザインでダークモードが注目されていますが、実際にどのように実装すれば良いのか悩んでいませんか?
この記事では、ダークモード対応のCSSを初心者でも簡単に理解し実装できるよう、徹底的に解説していきます。
サンプルコード付きで、応用例も紹介するので、ぜひ最後までお読みください。
●ステップ1:ダークモードの判別方法
まずは、ダークモードが有効かどうかを判別する方法を学びましょう。
CSSの@mediaルールを使うことで、簡単に判別できます。
次のサンプルコードを参考にしてください。
@media (prefers-color-scheme: dark) {
/* ここにダークモード時のCSSを記述 */
}
このコードによって、ダークモードが有効な場合に限り、指定したCSSが適用されます。
●ステップ2:ダークモード用のスタイル設定
ダークモード判別の方法がわかったところで、実際にダークモード用のスタイルを設定していきましょう。
ダークモード時の背景色と文字色を変更するサンプルコードです。
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
}
このコードにより、ダークモード時の背景色が暗いグレーに、文字色が白になります。
●ステップ3:画像やアイコンの対応
ダークモード対応では、画像やアイコンも考慮する必要があります。
例えば、ダークモード時に明るい画像を暗くする方法として、CSSのfilterプロパティを利用できます。
次のサンプルコードを参考にしてください。
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0.8);
}
}
このコードにより、ダークモード時の画像の明るさが80%になります。
適切な明るさに調整することで、ダークモード時にも見やすい画像になります。
●ステップ4:ボタンやリンクのスタイル変更
ダークモード対応では、ボタンやリンクのスタイルも変更することが重要です。
次のサンプルコードを参考にしてください。
@media (prefers-color-scheme: dark) {
a {
color: #4e9bff;
}
button {
background-color: #4e9bff;
color: #fff;
}
}
このコードにより、ダークモード時のリンク色が青に、ボタンの背景色が青で文字色が白になります。
適切な配色に変更することで、ダークモード時にも見やすくなります。
●ステップ5:応用例 – ダークモード切り替えボタンの実装
最後に、ユーザーがダークモードとライトモードを切り替えられるようにする方法を紹介します。
JavaScriptとCSSを組み合わせることで実現できます。
次のサンプルコードを参考にしてください。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ダークモード切り替え</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>ダークモード切り替えサンプル</h1>
<button id="toggleButton">ダークモード切り替え</button>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body[data-theme='dark'] {
background-color: #333;
color: #fff;
}
body[data-theme='dark'] a {
color: #4e9bff;
}
body[data-theme='dark'] button {
background-color: #4e9bff;
color: #fff;
}
JavaScript (script.js)
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', () => {
const currentTheme = document.body.getAttribute('data-theme');
document.body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
});
このコードにより、ボタンをクリックすること、ダークモードとライトモードが切り替わります。
data-theme
属性を使って、現在のモードを判別し、それに応じてCSSが適用されるようにしています。
まとめ
最後までお読みいただき、ありがとうございました。
このアイデアを活かしてお役立てできれば幸いです。