ヘルプドキュメントでSVGアイコンを使用してダークモードとの視覚的な互換性を確保する

一般
1

自動ダークモード切り替えを有効にした後、個々のユーザーインターフェイスボタンを説明する多くのスクリーンショットが、白い背景のためにひどく見えることに気づきました。実際のインターフェイスが使用しているSVGコードを再利用しようとしましたが、うまくいきませんでした。

を見つけましたが、Font Awesomeから直接ダウンロードしたSVGファイルを使用しても機能せず、その会話のアイコンへのGitHubリンクは現在のDiscourse UIと完全に一致しませんでした。幸いなことに、

を見つけました。これにより、Font Awesomeのダウンロードには幅と高さが欠けていることがわかりました。v5アイコンをFont Awesomeで見つけ、それらのSVGファイルを調整しました。高さ17pxは投稿アクションボタンにうまく機能し（エディターボタンには14px）、viewBox設定に応じて適切な幅になりました。アスペクト比計算機が役立つことがありました。

幅と高さを追加する必要があっただけでなく、パスにfillを追加する必要もありました。静的な色ではなくfill="currentColor"を選択しました。これは、周囲のテキストの色を優れたデフォルトと見なしたためです。しかし、アイコンが周囲のテキストの色ではなく、UIボタンの色と一致するようにしたかったので、ファイルアップロードの![alt](file)構文を維持しながら、HTMLスパンでラップすることでこれらの特定のSVGをターゲットにできることがわかりました（通常のユーザーはそうしないでしょう）。

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%);
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

このCSSは、ライトカラーテーマでプライマリカラーが黒に設定されている場合と、ダークカラーテーマで#eeeに設定されている場合のvar(--primary-low-mid)を模倣し、エディタープレビューパネルにある既存のラッパースパンも考慮に入れています。CSSフィルタージェネレーターを使用して、このように使用する場合のSVG色の変更方法を調べることができます。（カラーテーマによっては、ユーザーがデバイスをダークモードに設定しているにもかかわらず、自動ダークモード切り替えオプションを好みに設定していない場合にどのように見えるかを確認したい場合があります。 @media (prefers-color-scheme: dark)をCSSで使用すると、中間状態が発生する可能性があります。）

この発見プロセスが他の誰かの役に立つことを願っています！この目的のために作成したアイコンをダウンロードして再利用/調整したい場合（これはかなり時間がかかったため）、これまでに完了したチュートリアルページから取得できます：投稿アクションとリアクション、基本的な投稿スタイル、高度な投稿スタイル、および投票ビルダー。 （個々のアイコンのみを置き換え、コンテキスト画像についてはライトカラーテーマのスクリーンショットを保持しました。これらは、ここメタのヘルプドキュメントから取得した画像と、私たちの特定のサイトのスクリーンショットの混合です。）

「いいね！」 7