読み込み中...

【CSS】ダークモードを実装する方法を5ステップで解説！初心者でも簡単にマスター

ダークモードCSSのステップ解説 CSS
2024.02.18
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

皆さん、ウェブサイトやアプリケーションのデザインでダークモードが注目されていますが、実際にどのように実装すれば良いのか悩んでいませんか？

この記事では、ダークモード対応の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が適用されるようにしています。

まとめ

最後までお読みいただき、ありがとうございました。

このアイデアを活かしてお役立てできれば幸いです。