SumatraPDF の配色を見やすくしたい！！

# SumatraPDF の配色を見やすくしたい！！

SumatraPDF は、PDF、ePub、Mobi、XPS、DjVu、CHM、CBZ、CBR を閲覧することが出来る Windows 用の無料リーダーです。

SumatraPDF の取得は以下から。

> [Free PDF Reader - Sumatra PDF](https://www.sumatrapdfreader.org/download-free-pdf-viewer) ver.3.2（2020/9 現在）
> 最終更新時: **ver.3.4.3**

デフォルトでの配色は非常に目が疲れるので、任意に配色を変更して見やすくしていきたい。

## 設定の表示と変更

左上の `☰` から ` 設定 (S) > 詳細設定 (A)` と進めば txt ファイルで設定を変更することが出来る。または、以下のディレクトリに格納されているので直接編集する。

```
%APPDATA%\Local\SumatraPDF\SumatraPDF-settings.txt
```

設定の詳細は以下から見ることが出来る。

<!-- https://www.sumatrapdfreader.org/settings/settings3-3-1 -->

https://www.sumatrapdfreader.org/settings/settings3-4-3

`SumatraPDF-settings.txt` では、以下のように `#` に続く 16 進数のカラーコード (Hex 値) で表現されている。このカラーコードを書き変えることで任意の色に変更することが出来る。今回、変更していきたい設定は以下の部分になる。

```
MainWindowBackground = #fff200
FixedPageUI [
	TextColor = #000000
	BackgroundColor = #ffffff
	SelectionColor = #f5fc0c
	WindowMargin = 2 4 2 4
	PageSpacing = 4 4
]
```

※ この他にも設定項目がありますが、今回は全く触れません。

### 注意

設定の変更にはいくつか注意点がある。

- `MainWindowBackground` では SumatraPDF 全体の背景色を選択するものの、これを安易に `#000000` にすると文字が読めなくなる場合がある。
  - これは文書プロパティ等の閲覧ウィンドウにもこの設定が効いているためで、そのくせ閲覧ウィンドウの文字色は黒から変更することが出来ない。黒地に黒文字というサイアクなことになる。
- コメントアウトの方法は存在しないようだが、設定ファイルの最終行の以下の部分より下に張り付けておけば、いつでもコピペで変更することが出来る。

```
# Settings after this line have not been recognized by the current version
```

もっと楽な方法があると良いが、現状ではこの方法しかなさそうである。

また、コマンドラインから `-invert-colors` によって反転させることが出来る。しかし、この方法は将来のバージョンで削除される可能性があるため非推奨のオプションとされている。

> [Command-line arguments \- SumatraPDF documentaiton](https://www.sumatrapdfreader.org/docs/Command-line-arguments)

## ○ デフォルトでの配色

SumatraPDF のデフォルトでの配色は、以下のようになっている。

> Sample image: Default theme
> <img src = "https://i.gyazo.com/43f6c6e8f9f9f20164ddbadf709c7efa.png" width = "80%" alt = "Sample image: Default theme">

それぞれの配色と設定名を対応させると次の表のようになる。

|             Settings              |   Color   |      Color sample      |
| :-------------------------------: | :-------: | :--------------------: |
| `MainWindowBackground` <br> 背景色 | `#fff200` |       ![#fff200]       |
|       `TextColor` <br> 文字        | `#000000` | ![#000000] <br>(Black) |
| `BackgroundColor` <br> 文書背景色  | `#ffffff` | ![#ffffff] <br>(White) |
|  `SelectionColor` <br> 文字選択色  | `#f5fc0c` |       ![#f5fc0c]       |

[#fff200]: https://via.placeholder.com/30x60/fff200/FFFFFF/?text=%20
[#ffffff]: https://via.placeholder.com/30x60/ffffff/FFFFFF/?text=%20
[#000000]: https://via.placeholder.com/30x60/000000/FFFFFF/?text=%20
[#f5fc0c]: https://via.placeholder.com/30x60/f5fc0c/FFFFFF/?text=%20


```
MainWindowBackground = #fff200
FixedPageUI [
	TextColor = #000000
	BackgroundColor = #ffffff
	SelectionColor = #f5fc0c
	WindowMargin = 2 4 2 4
	PageSpacing = 4 4
]
```

- 白黒でハッキリしているが、目がチカチカして疲れる
- 背景色が黄色なのもかなり派手

ということで、以下のように変更してみよう。

## ○ 配色の変更

以下のような 2 つの配色パターンを作成してみた。配色は [Google のカラーピッカー](https://www.google.com/search?q=color+picker) を利用して作成した。

色彩に関してド素人の人間が作成しているので万人には良くないかもしれないですが、個人的には非常に満足しているので自慢げに紹介します。

### ■ 目に優しそうな配色

通常の配色からかけ離れないことを心掛けた。

|             Settings              |   Color   | Color sample |
| :-------------------------------: | :-------: | :----------: |
| `MainWindowBackground` <br> 背景色 | `#7fd486` |  ![#7fd486]  |
|       `TextColor` <br> 文字        | `#0d0116` |  ![#0d0116]  |
| `BackgroundColor` <br> 文書背景色  | `#fcf6e6` |  ![#fcf6e6]  |
|  `SelectionColor` <br> 文字選択色  | `#5b89f5` |  ![#5b89f5]  |

[#7fd486]: https://via.placeholder.com/30x60/7fd486/FFFFFF/?text=%20
[#0d0116]: https://via.placeholder.com/30x60/0d0116/FFFFFF/?text=%20
[#fcf6e6]: https://via.placeholder.com/30x60/fcf6e6/FFFFFF/?text=%20
[#5b89f5]: https://via.placeholder.com/30x60/5b89f5/FFFFFF/?text=%20

```
MainWindowBackground = #7fd486
FixedPageUI [
	TextColor = #0d0116
	BackgroundColor = #fcf6e6
	SelectionColor = #5b89f5
	WindowMargin = 2 4 2 4
	PageSpacing = 4 4
]
```

> Sample image: Easy on eyes theme
> <img src = "https://i.gyazo.com/a5dd411c7ccbe5ea15d967977fa453e7.png" width = "80%" alt = "Sample image: Easy on eyes theme">

- 背景色は黒板風に
- 文字はブラック JIS
- 文書背景色は柔らかなクリーム色に (かなり黄色めかもしれない)
- 画像の色は変わらない


### ■ ダークテーマ

ブルーブラックな配色に作った。

|             Settings              |   Color   | Color sample |
| :-------------------------------: | :-------: | :----------: |
| `MainWindowBackground` <br> 背景色 | `#989898` |  ![#989898]  |
|       `TextColor` <br> 文字        | `#d9d4d2` |  ![#d9d4d2]  |
| `BackgroundColor` <br> 文書背景色  | `#001522` |  ![#001522]  |
|  `SelectionColor` <br> 文字選択色  | `#119c0c` |  ![#119c0c]  |


[#989898]: https://via.placeholder.com/30x60/989898/FFFFFF/?text=%20
[#d9d4d2]: https://via.placeholder.com/30x60/d9d4d2/FFFFFF/?text=%20
[#001522]: https://via.placeholder.com/30x60/001522/FFFFFF/?text=%20
[#119c0c]: https://via.placeholder.com/30x60/119c0c/FFFFFF/?text=%20

```
MainWindowBackground = #989898
FixedPageUI [
	TextColor = #d9d4d2
	BackgroundColor = #001522
	SelectionColor = #119c0c
	WindowMargin = 2 4 2 4
	PageSpacing = 4 4
]
```

> Sample image: Dark theme
> <img src = "https://i.gyazo.com/1fa8dc7fcc6501f2973cda021c2fff04.png" width = "80%" alt = "Sample image: Dark theme">

- 文書背景色はブルーブラックに
- 文字は少しトーンを落とした
- 画像の色が変わる

## ○ Adobe Acrobat Reader DC で同じことをしたい！

PDF リーダーとして標準的に利用されているのは [Adobe Acrobat Reader DC](https://acrobat.adobe.com/jp/ja/acrobat/pdf-reader.html) だろうか。
これでも同じように配色を変更したい。

> Continuous Release | ver.2020.012.20043

### ■ テーマの変更

デフォルトはライトテーマになっており白ベースになっている。これをダークテーマに変更したい。

```
表示 (V) > 表示テーマ (H) > ダークグレー(D)
```

リーダー全体が**ダークグレー**に変更される。

### ■ アクセシビリティの変更

```
編集 (E) > 環境設定 (N) > 分類 (G) > アクセシビリティ
```

ここから、文書のカラー設定オプションの「**カラーの表示を調整**」のチェックボックスにチェックを入れると、カスタムカラーを使用することが出来る。
このカスタムカラーはカラーパレットから「**ページ背景色**」と「**テキスト色**」を任意に変更することが出来る。

ここでは特に色の紹介はしないが、上と同様の色にしてみてはどうだろうか。

# 参考

- [Free PDF Reader - Sumatra PDF](https://www.sumatrapdfreader.org/free-pdf-reader)
  - [SumatraPDF documentation](https://www.sumatrapdfreader.org/docs/SumatraPDF-documentation)
    - [Command-line arguments](https://www.sumatrapdfreader.org/docs/Command-line-arguments)
    - [Version history](https://www.sumatrapdfreader.org/docs/Version-history)
- [sumatrapdfreader/sumatrapdf: SumatraPDF reader \- GitHub](https://github.com/sumatrapdfreader/sumatrapdf)

この他、キーボードショートカットの一覧などを見ておくとより良く利用できるようになるだろう。

> [Keyboard shortcuts \- SumatraPDF documentaiton](https://www.sumatrapdfreader.org/docs/Keyboard-shortcuts)

サンプルの PDF ファイルは PDF.js のドキュメントを利用した。

> [compressed.tracemonkey-pldi-09.pdf](https://mozilla.github.io/pdf.js/web/viewer.html)

# さいごに

自分の好きな色で、目が痛くなるような配色はなるべく避けて、長時間の閲覧でも疲れない配色にしよう！

配色に関して、目に優しくかつ見やすい色サブセットをググっても意外と出てこない (調べ方が悪かったか??)。あまりこのようなことに時間をかけるのもばかばかしいので、適度に見切りをつけて変更していけると良いだろう。
配色を考えるのが面倒だが白黒は見づらいから変更したい!! という人は、ぜひこの記事の配色をパクって効率的に閲覧してほしい。

SumatraPDF を利用している人は、ビューワとして SumatraPDF を利用し、印刷時には Adobe Acrobat Reader を利用しているのではないだろうか。
Acrobat Reader の配色の変更を紹介したが、アクセシビリティの変更はあまり必要ないかもしれない。

## Version 3.4.x

バージョン 3.4 以降、さまざまな機能が追加された。代表的なものを列挙しておきたい。

- コマンドパレットの追加 (`Ctrl+K`)
- キーボードショートカットのカスタマイズ
- 選択文字列の検索や翻訳検索をブラウザに送信
- SVG ファイルのサポート
- アノテーションのサポートの向上
- 色反転のためのキーボードショートカットの追加 (`i`)

本記事で特に重要な点は、色反転のためのキーボードショートカットの追加になるだろう。PDF を開いて `i` を押下すると色が反転する。ページ番号を表示させるためのキーボードショートカットは `I` に変更された。

また、コマンドパレットで扱われるコマンドに関しては以下の記事を参照してほしい。かなり多くのコマンドが追加されている。これらをキーボードショートカットにすることも出来る。

> - [Command Palette \- SumatraPDF Manual](https://www.sumatrapdfreader.org/docs/Command-Palette)
> - [Full list of commands SumatraPDF \- Gist](https://gist.github.com/Yarakashi-Kikohshi/6c84abc96b130ee671285273e93b5e76)

## Future version

<!--
複数の配色設定を紹介したが、これらを切り替えるには設定ファイルを書き換える必要がある。以下のような Issue が上がっている。

> [Invert Colors (dark color) key or menu option \- Issue #275 \| sumatrapdf \- GitHub](https://github.com/sumatrapdfreader/sumatrapdf/issues/275)

次バージョンの 3.4 では解消されるようである。

また、
-->

ツールバーなどのテーマについて、以下のような issue が上がっている。

- [Selected tab needs more contrast when SumatraPDF window has the focus \- Issue #559](https://github.com/sumatrapdfreader/sumatrapdf/issues/559)
- [Theme Support Plan \- Issue #898](https://github.com/sumatrapdfreader/sumatrapdf/issues/898)

## 色見本表示

> [Markdown でカラーコードの色見本を表示する Tips - Qiita](https://qiita.com/suin/items/1f3898c1fa108b1e47b1)

Qiita ではカラーコードを打てば自動的に色見本を表示させてくれるが、上記事を参考にあえて大きく表示させてみました。サンプルとして以下に示しておく。

```
https://via.placeholder.com/<box size>/<box color>/<text color>/?text=%20
https://via.placeholder.com/30x60/000000/FFFFFF/?text=%20
```

> *cf*. [Placeholder\.com](https://placeholder.com/)


# 追記

- 2020/09/08 : Adobe Acrobat Reader DC での配色の変更方法を追加しました。
- 2021/07/27 : 軽微修正。
- 2021/10/07 : サンプル画像を追加。
- 2022/06/03 : ver.3.4.x について追記。