Google Chrome, Microsoft Edge でWebブラウザーのスクロールバーをダークモードのカラーに変更する - CSS

Webブラウザのスクロールバーをダークモードのカラーに変更するコードを紹介します。

概要

こちらの記事ではシンプルなダークモードの切り替えコードを紹介しました。
紹介したコードでダークモードに切り替えられますが、スクロールバーのカラーは明るい色のままです。この記事では、スクロールバーのカラーもダークモードに変更するコードを紹介します。

動作確認

以下のコードを準備します。

ScrollbarDarkColor.css

body {
  background-color: #FFFFFF;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
}

ScrollbarDarkColor.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ScrollbarDarkColor.css" />
</head>
<body>
  <h2>テストページです</h2>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
</body>
</html>

HTMLファイルをWebブラウザで開きます。Webブラウザのカラーがライトカラーのモード場合は下図の表示になります。

Webブラウザのカラーがダークカラーのモードの場合は下図の表示になります。ページはダークカラーで表示されていますが、ウィンドウの右側のスクロールバーは明るい色で表示されています。

対処法

CSSの :root 疑似クラスに color-scheme: dark; を指定するとスクロールバーもダークモードの表示に切り替わります。

コード

CSSのコードを下記に変更します。

ScrollbarDarkColor.css

body {
  background-color: #FFFFFF;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
}

解説

メディアクエリでダークモードの場合 @media (prefers-color-scheme: dark) に以下のコードを追記します。

  :root {
    color-scheme: dark;
  }

実行結果

HTMLファイルをWebブラウザで開きます。Webブラウザのカラーがライトカラーのモード場合は下図の表示になります。ライトモードの場合は変化はありません。

Webブラウザのカラーがダークカラーのモードの場合は下図の表示になります。スクロールバーの色がダークカラーに変わることが確認できます。

スクロールバーのカラーもダークモードに対応できました。

補足

color-scheme: dark;を指定した場合、スクロールバーのカラー以外に、サブミットボタンのデフォルト色やファイル選択コントロールのボタンカラーも変化します。

ScrollbarDarkColor.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="ScrollbarDarkColor.css" />
</head>
<body>
  <h2>テストページです</h2>

  <form method="post" enctype="multipart/form-data" action="">
    <input name="File01" type="file" /><br />
    <input type="submit" value="POST" />
  </form>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>
  <p>コンテンツです。</p>

</body>
</html>