当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【DocsAfterDark】Googleドキュメントをダークモードにするアドオン

FireFoxアドオン

「DocsAfterDark」アドオンのアイコン画像

この記事では、PCウェブサイト版「Googleドキュメント」をダークモードにするFirefoxアドオン「DocsAfterDark(ドックス・アフター・ダーク)」について書きます。

「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像1

本アドオンを導入すると、Googleドキュメントページをダークモードにできます。ダークモードは、背景の白色を黒色にして、文字色を白くして、全体的に暗くするモードを指します。

背景を黒にして、ページ部分は灰色にする、枠線を表示する…といったオプションも用意されています。Googleドキュメント上の左下に、専用ボタンが追加されるので、ワンクリックでライト・ダークモードを切り替えられます。

以前、類似のChrome拡張機能「Google Docs Dark Mode」の記事を書きました。

上記拡張機能のFirefoxアドオンを探してみたのですが、見つかりませんでした。類似アドオンを探してみたところ、本記事で紹介する「DocsAfterDark」を見つけたので記事にします。「DocsAfterDark」のほうは、Chrome拡張機能もありました。

本記事は、アドオン(拡張機能)を導入できるPCブラウザ向けです。スマホアプリ版ではできません。

提供元:Raymond WangGitHub寄付
記事執筆時のバージョン:0.6.2(2023年9月24日)

インストール方法

Firefoxアドオンストアからダウンロードできます。

Chrome・Vivaldi・Edgeをご利用の場合

Firefoxへ追加をクリックします。

「DocsAfterDark」アドオンをインストールする手順画像1

「追加」をクリックします。

「DocsAfterDark」アドオンをインストールする手順画像2

「OK」をクリックします。プライベートウィンドウでも使いたい場合は、「この拡張機能のプライベートウィンドウでの実行を許可する」にチェックを入れます。

ボタンからはアクセスしないので、右クリック→「オーバーフローメニューにピン留め」で非表示にしておくと、スッキリしていいかもしれません。

「DocsAfterDark」アドオンをインストールする手順画像3

使い方

Googleドキュメント」にアクセスします。「ドキュメントに移動」をクリックします。

PCブラウザで「Googleドキュメント」にアクセスする手順画像1

ページ選択画面が表示されます。文書を開きます。この時点ではダークモードになっていませんが、上部に本アドオンの通知などが表示されると思います。通知は初回だけ表示されます。

PCブラウザで「Googleドキュメント」にアクセスする手順画像2

文書を開くと、自動的にダークモードで表示されると思います。背景とページが、灰色っぽい黒色になり、文字が白色になります。

「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像2

左下に専用アイコンが表示されます。

「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像3

クリックでライトモード(デフォルト)・ダークモードを、ワンクリックで切り替えられます。

「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像4

設定

アドオンメニューの「DocsAfterDark」アイコンをクリックします。ポップアップで設定画面が表示されます。

「DocsAfterDark」Firefoxアドオンの設定画像

機能のオンオフ

「Global Toggle」のオンオフで、一時的に本アドオンを無効化できます。

「DocsAfterDark」Firefoxアドオンの「Global Toggle」設定画像

【Invert Options】反転

「Invert Options」の「Invert」で、ページの反転をオンオフできます。文字色を白にするか黒にするかです。見やすいほうにすればいいかなと思います。

「DocsAfterDark」Firefoxアドオンの「Invert Options」設定画像1

【Invert Options】グレースケール

「Invert Options」の「Grayscae」で、グレースケールフィルターを適用するかどうか選択できます。チェックを付けると、若干ページ全体が灰色になります。

「DocsAfterDark」Firefoxアドオンの「Invert Options」設定画像2

背景(Document Background)

ページの背景を変更できます。

「DocsAfterDark」の「Document Background」オプション項目
Defaultデフォルトの白い背景
Shade薄いグレーの色合い。黒文字はまだ読める
Dark濃いグレー。黒文字は読みにくくなるため、色の変更が必要になる場合がある
Black真っ黒な背景
Custombackgroundプロパティに有効なCSS宣言を使用できる

「Shade」にした場合、以下のようになります。ページの背景が白に近い灰色になります。文字は黒色で、視認性はそこそこいいと思います。

「DocsAfterDark」Firefoxアドオンの「Document Background」を「Shade」にした画像

「Dark」にした場合、以下のようになります。背景が黒に近い灰色、文字が黒色になるので、見えにくいと思います。文字色を見やすいよう変更する必要がでてくるかもしれません。

「DocsAfterDark」Firefoxアドオンの「Document Background」を「Dark」にした画像

枠線(Document Border)

「Document Border」の「Show Border」にチェックすると、ページの周りに枠線が追加されます。枠線が不要な場合は、チェックを外します。比較画像を貼っておきます。

「DocsAfterDark」Firefoxアドオンの「Show Border」オプションのオンオフ比較画像

ボタンの位置(Toggle Button Options)

「Toggle Button Options」の「Raise Button」にチェックすると、左下のテーマ切り替えボタンが、若干上にずれます。

「DocsAfterDark」Firefoxアドオンの「Raise Button」にチェックした画像

Firefoxアドオンストアの説明によると、場合によっては、下部に表示される系のアドオンなどと干渉して、ボタンがクリックできなくなる時があるようです。そういった場合にチェックすることで、上にずらせます。他の要素と重なる問題を回避できます。

感想

以上、PCウェブサイト版「Googleドキュメント」をダークモードにするFirefoxアドオン「DocsAfterDark(ドックス・アフター・ダーク)」についてでした。

Dark Reader(ダーク・リーダー)」を利用すれば、ウェブサイト全体をダークモードにできます。Googleドキュメント上だけ暗くしたい!という場合は、本記事が役立つかもしれません。

FireFoxアドオン