#019 正式対応したダークモードの設定

⬅️　前の記事　　次の記事　➡
 📔　egword チップスマガジン

egword がアップデートされ、v.2.2 になりました。小数点1桁めの数字が増えたのは久しぶりです。それだけ物書堂としては重要なバージョンアップだったのでしょう。このバージョンから、macOS Big Sur のユーザインタフェールを意識したデザインが採用され、アプリケーションアイコンが角丸四角形になるとともに、UI上のアイコンも SVGフォーマットになり解像度やカラートーンの変更に柔軟に対応できるようになりました。この改変でやっとダークモードへの正式対応がなされました。

この記事では、正式対応がなったダークモードの使い方のチップスについて紹介します。

ダークモードはUIとコンテンツの2つがある

正式対応された egword のダークモードでは、カラートーンの適用対象が2つあります。ひとつは❶ユーザインタフェース(UI)であり、もうひとつは❷コンテンツです。

❶ UIとは、ウインドウの枠やツールバー、インスペクタパネルなどのサブウインドウ群です。

❷ コンテンツとは、ワープロの文書部分、つまり用紙と文字です。

たとえば safari では❶の部分しかダークトーンにならないため、ダークモードでブラウズしても画面のほとんどは真っ白のままです。（いつか、Webサイト側で表示を切り替えるような CSS を書く時代がくるかもしれませんが。）

egword では❷の部分に対してもダークトーンにするための配慮がなされました。そのため、たとえ白い紙に黒い文字の文章を書くときでも、画面を暗くすることができます。それには標準の指定のままではだめで、［表示］メニュー→［用紙背景を隠す］を選択する必要があります。

❶ UIをダークトーンにするには

egword の UI をダークトーンにするには、egword 側で設定する項目はありません。macOS のコントロールパネルで［外観モード］から「ダーク」を設定するだけです（下図）。

ただし、ここではもう少しこだわってみようと思います。以前の投稿で UI の色をカスタマイズする方法について書きました。egword では UI も一部分は自分で好きな色に設定できるのです。

egword の環境設定で設定できる各種のカラーは、ライトトーン用、ダークトーン用の区別はできず、1色づつしか選べません。たとえばウインドウ背景にライトトーンに合わせて青鼠色を設定していた場合、ダークモードに切り替えても青鼠色のままなので少し明るすぎます。（下図）

自分で色を設定していると、「ダークモードではそれなりに暗くしたい、でも、ライトモードで使うときは明るくしたい」ということがあると思います。そのような場合は、カラーピッカーで調合する色を工夫することで対応できます。

一般的に色を調合するときには、下図のように RGB の値を基準に選んでいくと思います。少なくともわたしはそうです。

これに対して、ダークモードに対応した色を選択する場合は［不透明度］を利用して色を調合します。

不透明度は「アルファ値」ともいい、macOS が画面を表示するときに必要とする基本的な色の強さのパラメータです。わたしたちは日常コンピュータで「鼠色」を調合するときポスターカラーで「白」に「黒」を混ぜる感覚で考えます。ところがアルファ値も利用できれば、透明水彩で「黒」を薄塗りするように「鼠色」にすることができます。ただし半透明な色は背景の色に左右されるので、目的の色になるのはあくまでも背景が白の場合だけです。下図のように背景に他の色がある場合は色が透けてしまうので「鼠色」にはなりません。

この性質を利用して、ライトモードとダークモードの両方に対応した色を作ります。

カラーピッカーの設定を HSB つまみにしておき、まず、彩度を100%にします。これは透明水彩で絵を描くとき安易に「白」を混ぜないようにするのと似ています。そのあとは、色相、明度、不透明度の3つのスライダーを動かして、色を調合します。彩度のスライダーをいじるのは、色を白濁させたいときなので、最後に調整するとやりやすいと思います。（作例では彩度100%のままいじっていません。）

こうしてライトモードとダークモードを行き来しながら、両方のトーンで自分好みの色になるようにしてゆきます。

こうすることで、ライトモード、ダークモードの両方に対応する色を設定することができます。

❷ コンテンツをダークトーンにするには

文章をダークトーンにするには、［表示］メニュー→［用紙背景を隠す］を実行します。コンテンツの色を変えるかどうかをユーザーに選択させる仕様にしたのは、作っている書類によっては白黒反転しては支障が出ることもあるからなのでしょう。

「用紙背景」とは、［レイアウト設定］ダイアログ→［セクション］タブ→［背景色］で設定できる色です。初期値は「白」になっていて、ほとんどの人はここを変更していることはないと思います。この色を隠すのですから、ウインドウ背景色が出てくるのかと思いますがどうやらそうではなく、macOS の外観モードに依存するレイヤが露出するということのようです。この設定をしても、用紙背景色は画面上でプレビューできなくなっているだけで、印刷時にはレイアウト設定で指定したとおりに印刷されます。

またこのとき、本文の文字色は「自動」にしておく必要があります。本文の文字色を自動にするにはインスペクタパネルの文字の色の✔を外しておきます。ほとんどの人はここの✔はしていないと思います。

⬅️　前の記事　　次の記事　➡
 📔　egword チップスマガジン