管理している web サイトのひとつを定期更新するため、半月ぶりに Mac の Safari を使い WordPress のダッシュボードを開いたところ、なぜか想定外のダークモード風になっていた。
私は、十代の頃の事故の影響で視力に障害をかかえていて、暗い背景に明るい文字色の画面はチカチカしてとても見づらいので、基本的にダークモードは使用しない。macOS や Photoshop などアプリケーションでもライトモードのみを使用している。次の画像はライトモードに指定している macOS の設定画面（［システム環境設定］→［一般］で確認）。
WordPress のダッシュボードは、以前からサイドメニューなどがダークモード風だったが、一部だったのでそのまま使うことも多かったが、今回の状態は Safari のツールバーやタブバー、お気に入りバーまで上側にあるすべての情報表示がダークなので許容できる範囲を超えていた。
ライトモードに戻す試行錯誤
WordPress のダッシュボードの［プロフィール］から［管理画面の配色］を「ライト」に変更してみても、お気に入りバーから上の部分はダークなまま。よく使う他の web ページ（全体に明るいスタイルの）では、同じ現象は起きていない。
この web サイトは、共同作業する人もダッシュボードにログインできるので、なにかプラグンインの追加や CSS の書き換えなどを推測して調べてみたがそれらしい問題は見つからなかった。
ひょんなことでライトな表示に
［管理画面の配色］を「ライト」に変更している状態で、ふと「リロード（このページを再読み込み）」ボタンをクリックしたところ、お気に入りバーから上の部分も以前のようなライトな表示に戻った。「ライト」のベースカラーの薄いグレーが反映されている模様。
結論は、Safari の「タブバーでカラーを表示」によるものだった
2021年9月に macOS Big Sur と macOS Catalina 向けに Safari（バージョン15）がリリースされた。
その仕様変更のひとつに「ツールバーやタブバーに web ページのカラーの反映」がある。 ［Safari］→［環境設定…］→［タブ］の「タブバーでカラーを表示」にチェックが入っていると、表示した webページのベースカラーが Safari のツールバーやタブバーに反映される、というものらしい。
つまり、ダッシュボードに半月ほど触っていない間に、Safari がバージョン15にアップデートされ、WordPressのデフォルトのベースカラーの黒に近い暗い色が、Safari のツールバーやタブバーに反映され、勝手にダークモードになっている、と勘違いした話しになる。
この Safari の振る舞いをテストページで確認
「ツールバーやタブバーに web ページのカラーの反映」のテスト用ページを作ってみた。 お持ちの Mac のシステムが macOS Big Sur か macOS Catalina で Safari がバージョン15なら、次のリンクからテスト用ページを表示し、「タブバーでカラーを表示」のチェックをオンオフして、違いを確認できる。» macOS の Safari v15の「タブバーでカラーを表示」テスト用
（注 このテスト用ページは私が管理している外部サイトになります）
「タブバーでカラーを表示」のチェックが無いときの画像
ツールバーやタブバーは、Safari のデフォルトの明るい色のまま。
「タブバーでカラーを表示」のチェックが入っているときの画像
ツールバーやタブバーは、テストページの <body> の背景にcss指定した［#6677cc］と同じ色になっている。
0 件のコメント:
コメントを投稿