web-dev-qa-db-ja.com

ウェブサイトの「ライトをオフにする」?

Youtubeには、この素敵なボタン(見落としやすい-ビデオの左上)があり、「ライトをオフにする」ことができます。サイトの背景が白から黒に変わり、テキストの色が黒から灰色に変わります。 Firefoxには、「Turned Off The Lights」と呼ばれる無関係のプラグインがあり、非常によく似た機能を備えています。

これにより、Webサイトが非常に読みやすくなります。ただし、どちらのテクノロジーもYouTubeでのみ機能します。 all Webサイトで同じ効果を達成するために何かありますか?できればFirefoxで?

つまり、Firefoxで表示されるすべてのWebサイトで、背景を非常に暗く、テキストの色を明るくしたいのですが、どうすればよいですか?

3
user50105

このユーザースクリプト 選択したWebサイトの色を反転します。すべてのWebサイトで色を反転するには、*// @includeリストに追加するだけです。テストしたばかりで、ほとんどのサイトで正常に機能しますが、背景画像に大きく依存しているサイトではうまく機能しない可能性があります。これらのサイトを除外するようにスクリプトを設定できます。

ユーザースクリプトが何であるかわからない場合は、 primer が必要です。

2
MBraedley

Turn Off the Lights ブラウザ(Chrome、Safari、Opera、IE)拡張機能は、すべてのWebサイト(ビデオまたはビデオなし)をサポートします。ワンクリックでページが暗くなり、不透明度を(100%以下に)変更するオプションがあります

おまけに、「目の保護」には、選択した時間(夜の場合など)に自動的にライトをオフにするオプションがあると読みました。

新しい機能が必要な場合は、コードプロジェクトページで報告してください。

2
Willem

ユーザースタイルシート
CSSはカスケードスタイルシートを意味します。 「カスケード」は、それらが適用される順序です。

すべてのWebプレゼンテーション(形状、フォント、配置、レイアウト)は、現在スタイルシートで処理されることになっていますが、一部のWebサイトではHTMLスタイルを使用している場合がありますが、ベストプラクティスとしては大したことではなく、非推奨です。

上部には外部スタイルシートがあり、サーバー上の任意のページからリンクできます。次は、埋め込みスタイルシート(通常はページドキュメントのHTMLの上部)、次にインラインスタイルシート(サイト全体のスタイルシートを作成したり、埋め込みスタイルを使用して特定のページの特定の項目を無効にしたり、複数の外部スタイルシートを上にリンクしたりできます)です。 HTML(下の行(下の行)は上の行を無効にします)を使用して、要素の特定のものをインラインスタイルでオーバーライドします。おそらく、サイトの1つの段落を真っ赤で太字にし、スクロールアクティビティの上に浮かせたい場合です。

アクセシビリティ標準の一部としてのユーザースタイルシートが最後になり、すべてのテキストをサイズ36にしたり、すべての背景を黒にしたり、テキストを灰色にしたりする場合は、他のすべてを無効にします。

私はこれを行ったことがありませんが、背景にCSSを追加して、ブラウザーを再起動するだけだと思います。

body { background-color:#b0c4de; }

背景色のCSSタグです(黒はffffffまたは000000のいずれかですが、忘れています)。外部スタイルシートにはヘッダーはなく、タグだけがあります。

例1 (qualtrics)、 例2 (w3schools)

したがって、次のようになります。

body p h1 h2 { background-color: 000000; }
p h1 h2 a { text-color: 818181; }
0
conspiritech