Chrome拡張機能は、ライトモードとダークモードでオーバーレイをどのように同期させるか？
YuzuLingo · 2026/11/01
Chrome拡張機能は、テーマカラーをライブトークンとして扱い、ライトモードまたはダークモードが変更されたときに各インジェクトされた表面に通知することによって、オーバーレイを同期させます。ツールバー、辞書ポップアップ、マスクのアウトライン、CSSハイライトは、ページのリフレッシュを待つのではなく、即座に再描画されます。
なぜコンテンツスクリプトのUIはテーマ設定に不便なのか
オーバーレイは、拡張機能が所有していないページの内側に存在します。スタイルはシャドウルート、浮遊ツールバー、またはCSSハイライトレジストリに存在するかもしれません。インジェクト時に一度描画が行われると、学習者がブラウザやサイトのテーマを後で切り替えた場合に誤ったパレットが固定されます。
散在する16進値ではなく中央集中的なトークン
単一のUIカラーオブジェクトは、アクティブテーマのためのアクセント、表面、ミューテッドテキスト、ソフトフィルを保持します。テーマを適用すると、これらのトークンが一度変化します。呼び出し元は描画時にオブジェクトから読み取るため、古いライトモードの黒がダークモードのポップアップにハードコードされることはありません。
サブスクライバー駆動の再描画
各長寿命オーバーレイはテーマ変更に登録します。通知時に、ツールバーはルートクロームを再適用し、辞書ポップアップは最後のカードを再描画し、ホバーのハイライトCSSが再生成され、空または読み込み中のOCRクロームが更新されます。マスクのアウトラインは更新され、地域の境界が新しいコントラストに一致します。
クロームの色を字幕テキストの色から分離する
UIクロームはライトモードとダークモードに従うべきです。認識された字幕テキストはしばしばダークマスクの上にあり、学習者がどちらのテーマでも読み取れるように固定された明るいインクが必要です。OCRテキストの色をテーマトークンにバインドするのは一般的なバグであり、新しい領域は誰かが手動で色を上書きするまで黒に見えます。
「完全にテーマ化された」とは実際にはどういう意味か
完全なパスには、アクティブなチップ状態、ソフトアクセントフィル、ポップアップの文脈ハイライト、読み込み認識などのステータスラインが含まれます。これらのいずれかがまだリフレッシュを必要とする場合、テーマのサブスクリプションはその表面を見逃しています。
