Meta でトピックを表示する際に「リーダーモード」を導入するテーマコンポーネントを最近インストールしました。
この機能を切り替えるボタンは、トピックのタイムラインコントロールの上部にあります。
これをクリックすると、トピックが「読書モード」になり、気を散らすものを最小限に抑えるために、UI のほとんどがわずかに不透明なカバーで覆われます。
その他、すべてのアバターと画像にフィルターが適用され、グレースケール画像に変換されます。
使用中のスクリーン録画を以下に示します。
このコンポーネントは、ここでメタにインストールされている次のテーマで利用できます。
これはまだ WIP であり、バグレポートやフィードバックがあればここに投稿していただけると幸いです 
素晴らしいですね！
気づいた点として、一部のスタイル変更によってボタンをクリックした際にレイアウトが「ジャンプ」してしまうことがあります。要素が display: none; になっているか、フォントサイズが変更されているのでしょうか？
レイアウトシフトを引き起こすことなく、ボタンを純粋に「グレーアウト」させる（または不要な要素を visibility: hidden; にする）ことは可能でしょうか？
はい、これは私も遭遇した問題でした。
理想的には、サイドバーは通常のサイドバー切り替えボタンをクリックしたときのように、アニメーションで閉じられるべきです。
私のコンポーネントはサイドバーを閉じますが、アニメーションさせないため、急な動きになってしまいます。
以下のいずれかの方法が考えられます。
visibility: hidden; または opacity: 0; はどうでしょうか？ レイアウトには含まれたままで、見えなくなるだけです。クリックやフォーカスも無効にする必要があるかもしれませんね。それとも、ホバーやフォーカス時に再び表示するようにしますか？ 
比較的安全な方法の1つは、ユーザーの操作を模倣することです。
if(document.body.classList.contains("has-sidebar-page")){ // サイドバーが表示されている
document.querySelector(".btn-sidebar-toggle").click()
}
サイドバーのことですか？
もしそうなら、私のコンポーネントで実際にトグルして閉じているので、次のような同じコアな方法を使用しています。
@action
toggleReaderMode() {
if (this.sidebarIsOpen && !this.isActive) {
getOwner(this).lookup("controller:application").set("showSidebar", false);
this.readerModeActive = !this.readerModeActive;
} else {
getOwner(this).lookup("controller:application").set("showSidebar", true);
this.readerModeActive = false;
}
}
実際にページから削除しているものはなく、このサイドバーを閉じるようにトグルしているだけです。
そうですね、しかしそれはレイアウトシフトを引き起こします。なので、開いたままにして、見えなくすることを考えていますか？
はい、わかりました。混乱させてすみません。今、理解しました。リーダーモードはサイドバーのトグルとして知られていないため、トグルされると、望まなかったシフトが発生する可能性があるため、混乱を招く可能性があります。
サイドバーのトグルがシフトを引き起こす場合、リーダーモードが同じことをしても問題ないだろうと推測しました。
サイドバーをトグルしないようにして、それをここにビデオで投稿してみます。
サイドバーを閉じた状態でリーダーモードボタンを使用すると、サイドバーが開き、その後ボタンは何も機能しなくなります。
新しいアイコンが一体何なのか疑問に思っていました。これで分かりました。ありがとう。
しかし。
DiscourseHub、iPad、テーマデフォルト：サイドバーを展開するだけです。
編集。
わかりました、まずサイドバーを開く必要があります。その後、魔法が起こります。ただし…ここではサイドバーを使用しません😏
素晴らしいですね！
どれくらい難しいかわかりませんが、ユーザーがリーダーモードを終了するために ESC キーを押せるようになると良いと思いました。ボタンはタイムラインの一部と見なされるため、トピックの最下部までスクロールすると、ボタンが画面外に出てしまう可能性があります。
素晴らしい機能ですね。ジョーダンさん、素晴らしい仕事です！
デビッドが言ったように、コンテンツをシフトさせないことは可能でしょうか？
また、元の幅を狭める特別な理由があるのでしょうか？何か制限があるのかもしれませんが、私には分かりません。
私が言いたいのは、ある程度このようなことです。
機能としては、サイドバーは既に折りたたみ可能なので、タイムラインと通知バーを隠すだけのようです。トピックごとに別のボタンがあるほど、体験が大きく変わったり改善されたりするようには思えません。
リーダーモードで全幅表示になるなど、読書体験を意味のある形で変えるのであれば、より理にかなっているでしょう。現状では、この機能を使うことはまずないでしょう。皮肉なことに、私にとってはタイムラインにさらに視覚的なノイズが増えるだけです。
フォント、文字サイズ、コンテンツの幅などのオプションを追加する長期的な目標がありますが、今のところは小さな実験であり、作業中です。
移動を制限し、より良いトランジションを実現するための最新の変更がこのコンポーネントにマージされました。これまでのフィードバックに感謝します
大好きです！
トピックマップを非表示にすると、OPと最初の返信の間に大きなギャップができます。グレースケールのトピックマップがどのようになるか気になります。
OPに返信することも、リーダーモードで直接投稿に返信することもできます。トピックの下部から返信することも可能になるべきでしょうか？
はい、もう少し透明にすることもできるかもしれません。スムーズなトランジションで非表示にしようとしましたが、リスト内のアイテムのレンダリング方法により、表示されない場合があり、非表示にしようとすると面倒になります。
これは、すべての小さな投稿通知と時間の間隔でも同じです。考えられる唯一の方法は、要素オブザーバーAPIを使用することですが、それでも、動きはわずかに予測不可能であり、ランダムに発生するジッターに気づきました。
これは私にとって理にかなっています
キーボードショートカット（CTRL＋何か）で切り替えられると最高です（ボタンにカーソルを合わせたときに説明できます）。
画像の白黒化は好きではありません。情報が失われているように感じます。
「いいね」の数、返信ボタン、さらにはアバターなども含め、多くのクロムを削除することには賛成です。
ジョーダン、素晴らしい改善ですね！動きのずれがなくなり、トランジションをスムーズにするアニメーションが追加されたことで、体験が格段に向上しました。
サムの提案に同意します。必須でない情報を非表示にするのであれば、色を戻すのが良い妥協点になるでしょう。ただし、それはオプションにすることもできますね。
はい、はい、はい！！！
リーダーモードに入ると、別のページに移動するにはクリックする必要があり、さらにリーダーモードにするには、再度クリックしてオンに戻す必要があります。ナビゲーションリンクをもう少し目立たせて、機能するようにし、次のトピックに移動したときにオンのままにしておくのはどうでしょうか。
別のアイデアとして、トピックの終わりに達したら自動的にオフにする。
または、最後に訪れたトピックリストの次のトピックに自動的に移動する！
