本日、トップメニューの右側にテーマセレクターを備えたカスタムダークモードを追加しました。
自動的な実装（prefers-color-scheme）は、[data-theme="dark"]セレクタに基づく管理によって置き換えられ、ユーザーがブラウザでダークテーマを選択したときに表示されるようになりました。Operaのように、かなりまともなダークバージョンを表示する"強制ダークモード"オプションがありますが、画像が反転してマイナスに表示されたり、何も設定できないなどのバグがあります。
GeneratePressの要素と CSSを挿入したHTMLとJSを注釈付きの長いスニペットで使用することにしました。
これらは自動バージョンと比較した主な改善点である：
- レンダリングの最適化：統一されたCSSスタイル階層によるちらつきや競合の排除により、ダークテーマの即時読み込みを実現。
- 視覚的な一貫性：動的要素（GenerateBlock、Query Loops、タブ、アコーディオン）の色とフィルターを正確に調整し、読みやすさの問題（白い背景にグレーの色）を回避します。
- 動的要素のコントロール：画像やメニューのブレンドフィルター
（ミックスブレンドモード）や不透明度を補正し、ポリランアイコンやドキュメンタリーページのカードなどの要素が、どのような状況下でも正しいコントラストを維持できるようにします。 - 技術的なクリーンアップ：冗長なセレクタのデバッグとCSSルールの統一により、パフォーマンスとCLSに影響を与えることなく将来のメンテナンスを容易にしました。
これはプラグインでも可能だが、論理的な制約があるため、私はコードで行うことにした。プラグインを節約するためだけでなく、どんな小さなディテールでもきめ細かく制御し、微調整することができ、読み込み速度に影響を与える可能性がある場合に対処できるようにするためだ。
もしこのコードに興味がある人がいたら、口笛を吹いてくれればここに掲載する。もしあなたがダークウェブ・サーフィンを楽しんでいて、何か改善すべき点を見つけたら、遠慮なくコメントを残すか、どの投稿の一番下にもある黄色い「バグ報告」ボタンを強くクリックしてください。
また、私はWordPressの最適化作業や、時にはGenerateBlocksブロックを使ったGeneratePressテンプレートへの移行や適合も行っていることをお伝えしたい。
