【DocsAfterDark】Googleドキュメントをダークモードにするアドオン
![「DocsAfterDark」アドオンのアイコン画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_06.png)
この記事では、PCウェブサイト版「Googleドキュメント」をダークモードにするFirefoxアドオン「DocsAfterDark(ドックス・アフター・ダーク)」について書きます。
本アドオンを導入すると、Googleドキュメントページをダークモードにできます。ダークモードは、背景の白色を黒色にして、文字色を白くして、全体的に暗くするモードを指します。
背景を黒にして、ページ部分は灰色にする、枠線を表示する…といったオプションも用意されています。Googleドキュメント上の左下に、専用ボタンが追加されるので、ワンクリックでライト・ダークモードを切り替えられます。
以前、類似のChrome拡張機能「Google Docs Dark Mode」の記事を書きました。
上記拡張機能のFirefoxアドオンを探してみたのですが、見つかりませんでした。類似アドオンを探してみたところ、本記事で紹介する「DocsAfterDark」を見つけたので記事にします。「DocsAfterDark」のほうは、Chrome拡張機能もありました。
本記事は、アドオン(拡張機能)を導入できるPCブラウザ向けです。スマホアプリ版ではできません。
提供元:Raymond Wang(GitHub、寄付)
記事執筆時のバージョン:0.6.2(2023年9月24日)
インストール方法
Firefoxアドオンストアからダウンロードできます。
Chrome・Vivaldi・Edgeをご利用の方は、以下のChromeウェブストアからインストールできます。
類似の拡張機能「Google Docs Dark Mode」については、別で記事を書いています。気になる方は、参考にしてみてください。
をクリックします。
![「DocsAfterDark」アドオンをインストールする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_02-1000x643.png)
「追加」をクリックします。
![「DocsAfterDark」アドオンをインストールする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_03.png)
「OK」をクリックします。プライベートウィンドウでも使いたい場合は、「この拡張機能のプライベートウィンドウでの実行を許可する」にチェックを入れます。
ボタンからはアクセスしないので、右クリック→「オーバーフローメニューにピン留め」で非表示にしておくと、スッキリしていいかもしれません。
![「DocsAfterDark」アドオンをインストールする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_04.png)
使い方
「Googleドキュメント」にアクセスします。「ドキュメントに移動」をクリックします。
![PCブラウザで「Googleドキュメント」にアクセスする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/10/google-docs-dark-mode_05-1000x585.png)
ページ選択画面が表示されます。文書を開きます。この時点ではダークモードになっていませんが、上部に本アドオンの通知などが表示されると思います。通知は初回だけ表示されます。
![PCブラウザで「Googleドキュメント」にアクセスする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_07-1000x530.png)
文書を開くと、自動的にダークモードで表示されると思います。背景とページが、灰色っぽい黒色になり、文字が白色になります。
![「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像2](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_08-1000x600.png)
左下に専用アイコンが表示されます。
![「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像3](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_09.png)
クリックでライトモード(デフォルト)・ダークモードを、ワンクリックで切り替えられます。
![「DocsAfterDark」Firefoxアドオンを使って、ダークモードにしたGoogleドキュメント画像4](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_10.png)
設定
アドオンメニューの「DocsAfterDark」アイコンをクリックします。ポップアップで設定画面が表示されます。
![「DocsAfterDark」Firefoxアドオンの設定画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_18.png)
機能のオンオフ
「Global Toggle」のオンオフで、一時的に本アドオンを無効化できます。
![「DocsAfterDark」Firefoxアドオンの「Global Toggle」設定画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_17.png)
【Invert Options】反転
「Invert Options」の「Invert」で、ページの反転をオンオフできます。文字色を白にするか黒にするかです。見やすいほうにすればいいかなと思います。
![「DocsAfterDark」Firefoxアドオンの「Invert Options」設定画像1](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_13-1000x526.png)
【Invert Options】グレースケール
「Invert Options」の「Grayscae」で、グレースケールフィルターを適用するかどうか選択できます。チェックを付けると、若干ページ全体が灰色になります。
![「DocsAfterDark」Firefoxアドオンの「Invert Options」設定画像2](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_14-1000x590.png)
背景(Document Background)
ページの背景を変更できます。
「DocsAfterDark」の「Document Background」オプション項目 | |
---|---|
Default | デフォルトの白い背景 |
Shade | 薄いグレーの色合い。黒文字はまだ読める |
Dark | 濃いグレー。黒文字は読みにくくなるため、色の変更が必要になる場合がある |
Black | 真っ黒な背景 |
Custom | backgroundプロパティに有効なCSS宣言を使用できる |
「Shade」にした場合、以下のようになります。ページの背景が白に近い灰色になります。文字は黒色で、視認性はそこそこいいと思います。
![「DocsAfterDark」Firefoxアドオンの「Document Background」を「Shade」にした画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_11-1000x568.png)
「Dark」にした場合、以下のようになります。背景が黒に近い灰色、文字が黒色になるので、見えにくいと思います。文字色を見やすいよう変更する必要がでてくるかもしれません。
![「DocsAfterDark」Firefoxアドオンの「Document Background」を「Dark」にした画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_12-1000x582.png)
枠線(Document Border)
「Document Border」の「Show Border」にチェックすると、ページの周りに枠線が追加されます。枠線が不要な場合は、チェックを外します。比較画像を貼っておきます。
![「DocsAfterDark」Firefoxアドオンの「Show Border」オプションのオンオフ比較画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_15.png)
ボタンの位置(Toggle Button Options)
「Toggle Button Options」の「Raise Button」にチェックすると、左下のテーマ切り替えボタンが、若干上にずれます。
![「DocsAfterDark」Firefoxアドオンの「Raise Button」にチェックした画像](https://www.naporitansushi.com/wp-content/uploads/2023/10/docs-after-dark_16.png)
Firefoxアドオンストアの説明によると、場合によっては、下部に表示される系のアドオンなどと干渉して、ボタンがクリックできなくなる時があるようです。そういった場合にチェックすることで、上にずらせます。他の要素と重なる問題を回避できます。
感想
以上、PCウェブサイト版「Googleドキュメント」をダークモードにするFirefoxアドオン「DocsAfterDark(ドックス・アフター・ダーク)」についてでした。
「Dark Reader(ダーク・リーダー)」を利用すれば、ウェブサイト全体をダークモードにできます。Googleドキュメント上だけ暗くしたい!という場合は、本記事が役立つかもしれません。