Windows版ブラウザのダークモードで select 要素の背景色を修正

ActiveAdminのダークモードにおいて、Windows環境のブラウザで <select> 要素のドロップダウンリストが視認しにくくなる問題が修正されました。この変更により、<option> と <optgroup> 要素に明示的な背景色が設定され、クロスプラットフォームでの視認性が改善されます。

背景

Windows環境のブラウザ（Chrome等）では、ダークモード時に <select> 要素のドロップダウンリストの背景色がOSのダークモード設定に従って自動的に変更されます。しかし、ActiveAdminが設定していた dark:bg-white/5 の背景色は親要素のみに適用されており、実際のドロップダウン項目（<option> 要素）には適用されていませんでした。この結果、ドロップダウンを開いた際に項目が読みにくくなる問題が発生していました。

macOS環境ではこの問題は発生せず、Windows環境特有の表示問題として報告されていました。PR内ではTailwind CSSの公式フォームレイアウト例でも同様の対応が行われていることが確認されています。

技術的な変更

app/javascript/active_admin/base/plugin.js に新しいスタイル定義が追加されました。

変更後:

[':where(select:not([multiple]))']: {
  'option, optgroup': {
    '@apply dark:bg-gray-800': {}
  }
},

:where(select:not([multiple])) セレクタにより、単一選択の <select> 要素のみが対象となります。multiple 属性を持つ複数選択リストは除外されます。

配下の option と optgroup 要素に dark:bg-gray-800 が適用され、ダークモード時に明示的な背景色（グレー800）が設定されます。この背景色は、ActiveAdminのダークモードカラースキームと調和する濃いグレーです。

:where() 擬似クラスは詳細度を0にするため、他のスタイルとの競合リスクを最小限に抑えています。これにより、カスタムスタイルでの上書きが容易になります。

設計判断

:where() 擬似クラスの採用 により、詳細度を抑えた実装が選択されました。

通常のセレクタ select:not([multiple]) option を使用する代わりに、:where() でラップすることで詳細度を0に保っています。これはTailwind CSSのプラグイン設計方針に沿った判断であり、ユーザーがカスタムスタイルで簡単に上書きできるようにするためです。

また、select:not([multiple]) の条件により、複数選択リストは対象外としています。複数選択リストは表示特性が異なり、別の調整が必要になる可能性があるためです。

まとめ

本PRは、Windows環境特有のダークモード表示問題に対処した変更です。:where() 擬似クラスを活用することで詳細度を抑えつつ、<option> 要素に明示的な背景色を設定し、クロスプラットフォームでの視認性を確保しています。Tailwind CSSのベストプラクティスに従った実装により、カスタマイズ性も維持されています。