![](https://yoshikitam.wpx.jp/2001y/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-25-18.07.11.png)
このダークモードに対応したサイトを見ると一つ違和感がある。
それは横のスクロールバーがライトテーマになっていることだ。macOS だとまだ主張が少ないが Windows の Chrome などで見るとかなり主張が激しく感じる。
この問題はスクロールバーに限った話ではなく、input
やselect
などブラウザデフォルトのUIパーツを利用しているもの全てに言える。
この問題を解決するには、以下のようにHTMLにname="color-scheme"
の meta タグを指定する必要がある。
<meta name="color-scheme" content="light dark">
このタグは現在のカラーテーマではなく、**「サイトが対応しているカラーテーマ」**を示しているため、ダークテーマに対応している場合はlight dark
を記す。
しかし、このサイトのようにユーザーが任意でテーマ変更できる仕様になっている場合は、CSSで記述した方が使い勝手が良いだろう。
html.dark {
color-scheme: dark;
}
![](https://yoshikitam.wpx.jp/2001y/wp-content/uploads/2023/08/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-08-25-18.24.17.png)