[ 解決済 ] ダークモードの無効化

[morisac]

■ WordPress のバージョン
6.5.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.21.1

■ Pro Unit のバージョン
0.26.8

■ スキンの種類
Origin III

■ 期待する動作
ダークモードでもきちんと視認性のある文字色にしたい。
これを変わらないようにするか、別の文字色に変わるように変更したいです。

■ 自分で試した事
文字色の指定

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
ダークモードにすると自動的に文字色が変更され、背景色と同色化してしまいます。
画像1枚目：ダークモード
画像2枚目：ライトモード

なお、現象が確認できるのはiPhoneで、PCではきちんと表示されます。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

お世話になっております。Lightningのご利用ありがとうございます。

iOSの設定からダークモードを選択しているということであっていますか。

ダークモード対応用のCSSを入れていらっしゃるようですので、ダークモードに対応されないようでしたら以下のCSSを削除すると良いのかなと思います。

          @media (prefers-color-scheme: light) {
                body {
                    background-color: #fff;
                    color: #000;
                }
            }

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

ダークモードに対応する場合
添付画像を確認しますと、おそらくですが、グループブロックで囲ってある部分が薄いグレーでラップされているため、ダークモードにしても、ここの背景色は変わらないため、テキストだけが白くなり見えづらくなっているのではないかと思います。

具体的には、女性の画像の部分から「顎関節不調のセルフチェックしてみませんか」のセクションまでがグループブロックで囲ってあり、そのグループブロックの背景色が薄いグレーなので、薄いグレーの部分の背景色はダークモードにしてもそのまま変わらないため、テキストが白くなってしまっているように思います。

編集画面からグループブロックの背景色を確認してください。
おそらく #f4f4f4　が入っていると思いますがいかがでしょうか。

#f4f4f4の部分を黒の半透明の薄い色にするのはどうでしょうか。
たとえばこちらの色はどうでしょう。#0000000F

[morisac]

@うなこ様

ご返答ありがとうございます。

>ダークモード対応用のCSSを入れていらっしゃるようですので、ダークモードに対応されないようでしたら以下のCSSを削除すると良いのかなと思います。
→カスタムCSSに入っていました。
　過去に制作したデータを流用していたので、どこかの段階で入れたのを失念していました。
　該当箇所を削除したところ、ダークモードが無効化されました。
　ひとまずこちらで進めていきます。

ダークモードにも対応しなければならない場合も考えられますので、対応する場合でいただいたアドバイスも実施してみます。
また同様の内容で質問をさせていただく可能性もありますので、ひとまず完了にはせず、試したのちにご返答、完了報告をさせていただきます。

引き続き、何卒よろしくお願いいたします。

[投稿者]

投稿