先に結論をいうと、夜間モードのときだけ使う色を別に指定すれば解決します。 Ankiの夜間モードはカードの背景と既定の文字色だけを暗くし、テンプレートで自分が指定した色には手を付けません。そのため、明るい背景を見ながら選んだ青い文字や濃いグレーの説明は、暗い背景でもそのまま残って埋もれてしまいます。色を自動で反転する機能はなく、もともとそうしないように作られています。
背景は暗くなるのに、なぜ文字色だけそのままなのか
Ankiは夜間モードをオンにすると、カードに nightMode という目印を付け、その目印が付いたカードの背景と既定の文字色を暗いほうに上書きします。既定のノートタイプのテンプレートに background-color: white と書いてあっても夜間には暗くなるのは、これが理由です。
ただし、この上書きが効くのはカード全体だけです。カードの中の個々の要素 — たとえば答えだけを青く塗った .answer や、穴埋めを強調した .cloze — に直接指定した色は、カード全体の設定より具体的な指定なので、そのまま優先されます。CSSでは、より具体的な指定が優先されるからです。
そのため、実際に出てくる症状はたいてい次のようなものです。
- 背景はちゃんと暗くなったのに青い答えの文字だけが埋もれる
- 薄いグレーにした例文や注釈がほとんど見えない
- 蛍光ペンのように塗った背景の強調がまぶしすぎる
つまり不具合ではなく、カード全体はAnkiが自動で切り替え、個々の色は使う人が決める、という仕組みなのです。
Ankiの既定のテンプレートも、すでにこの方法を使っています
Ankiに最初から用意されている穴埋め（Cloze）のノートタイプのテンプレートを開くと、次の2行が入っています。
.cloze { color: blue; }
.nightMode .cloze { color: lightblue; }
1行目は普段の色、2行目は夜間モードのときだけ使う色です。暗い背景では青が埋もれるので、明るい水色に変えてあるわけです。 Ankiの既定のテンプレートで実際に使われている方法なので、私たちがすることも同じです — 色を使っている要素ごとに、夜間用の色をもう一組つくっておけば済みます。
ankieditorでの設定方法
コードを書かずに、クリックだけで作れます。
- テンプレートを読み込んだあと、プレビューの上にある [夜間モード] にチェックを入れます。カードがAnkiの夜間モードと同じ表示になります。
- その状態で色が埋もれている部分をクリックします。カード全体を変えるなら、何もない場所をクリックします。
- 左のパネルにある文字色や背景色の設定から、色を選びます。ここで選んだ色は夜間モードでのみ適用され、普段の色はそのまま残ります。
- 元に戻したいときは、色の下にある [この対象の夜間の色をリセット] を押します。夜間の色だけが消えて、普段の色は残ります。
- 仕上がったら [コードをコピー] でテンプレートをコピーし、 Ankiに貼り付けます。
夜間モードがオンの間は色だけを変えられます。フォント・文字サイズ・行揃え・行間は薄く表示され、変更できなくなります。これらの値は通常時と夜間で変える必要がなく、夜間だけ別に指定してしまうと、あとで普段の文字サイズを変えたときに夜間だけ古い値のまま残ってずれてしまうからです。サイズや行揃えは夜間モードをオフにして変えれば、両方にまとめて適用されます。
実際に作られるCSS
ankieditorがテンプレートのスタイルの部分に書き込むルールは、次のような形です。
.card.nightMode { background-color: #2f2f31; }
.nightMode .answer { color: #7fb2ff; }
カード全体は .card.nightMode、カードの中の要素は .nightMode の後ろにその要素を書く形です。Ankiのマニュアルが案内している2つの形そのままで、デスクトップ・AnkiDroid・AnkiMobileのどれも同じ目印を使うため、どの端末でも同じように適用されます。自分で入力したい場合は、このコードをそのままテンプレートに貼り付けてもかまいません。
どんな色を選べばよいか
暗い背景では同じ系統のより明るい色を選ぶのが基本です。色そのものを変えてしまうと、カードの印象まで変わって、かえって迷いのもとになります。
- 青 → 水色（
#1e6fd9→#7fb2ff） — 答えや穴埋めの強調で、いちばんよく使う組み合わせです。 - 赤 → サーモン・薄いピンク（
#c0392b→#ff9b8a） — 誤答の印や注意書きに使います。 - 濃いグレー → 薄いグレー（
#666666→#aaaaaa） — 例文や出典のように、本文より弱めに置く文字に使います。 - 蛍光色の背景 → 暗い背景＋明るい文字 — 黄色い背景に黒い文字のままだと、夜間には目立ちすぎます。背景を濃い茶系まで落として文字を明るくするほうが、目への負担が少なくなります。
真っ白（#ffffff）は避けたほうがよいでしょう。暗い背景でコントラストが強すぎると文字がにじんで見えて、長時間の復習では疲れます。ごく明るいグレー（#e8e8e8くらい）のほうが楽です。
ノートタイプごとに背景色を変えたいとき
文字色ではなく背景そのものを変えたい場合もあります。英単語、専門用語、雑学のように何種類ものカードを混ぜて復習していると、カードの見た目が全部同じなせいで、今どのカードを見ているのか一瞬わからなくなることがあります。英語のカードは白のまま、専門のカードは淡いクリーム色、雑学のカードは淡い水色 — このくらいの違いがあるだけで、カードが出た瞬間に自然と頭が切り替わります。
やり方は簡単です。カードの何もない場所をクリックしてカード全体を選び、「文字の書式」の背景色から色を選びます。必ず淡いトーンを選んでください。濃い色は文字とのコントラストを損なうので、長く見ていると目が疲れやすくなります。プレビューで文字がちゃんと読めるかを確かめながら選ぶとよいでしょう。
ここで勘違いしやすい点が一つあります。「デッキごとに色を変える」つもりでも、そうはなりません — Ankiのテンプレートはデッキではなくノートタイプ単位で適用されるからです。科目ごとにノートタイプを分けて使っているならそのまま思いどおりになりますが、ひとつのノートタイプを複数の科目で共有している場合は、そのカードが全部同じ色になります。
そして、この記事の内容とは逆向きの注意点があります — 今指定した背景色は、実は夜間モードでは残りません。夜間になるとAnkiがキャンバスを暗く塗り直し、その規則がノートタイプの.cardの背景設定に勝ってしまうからです — これはこの記事の前半で説明したのと同じ規則です。主に夜間に学習していてもノートタイプを区別したいなら、上で見た方法で夜間専用の背景色を別に指定するか（こうして作られる.card.nightModeの規則は実際に勝ちます）、背景色の代わりに文字色や区切り線でノートタイプを区別するほうがよいでしょう。
気をつけたいこと
端末によって背景色が少しずつ違います。Ankiは夜間の背景色をテンプレートに固定せず、アプリ側が決めるようにしています。デスクトップとモバイルでは暗い背景のトーンが微妙に違うことがある、ということです。ですから背景に近すぎる色（たとえば背景とほとんど同じ濃いグレーの文字）は、ある端末では見えにくくなることがあります。明るさの差には余裕をもたせてください。
区切り線の色は夜間もそのままです。区切り線に付けた色はカード全体の設定ではなく個々の要素の色なので、夜間モードは手を付けません。ごく薄いグレーの線を選んでいると、暗い背景では消えたように見えます。区切り線にも夜間の色を別に指定するか、最初から中間のトーンを選んでおくほうが安全です。
ノートタイプごとに設定が必要です。テンプレートはノートタイプ単位で保存されるので、複数のノートタイプを使っているなら、それぞれに手を入れることになります。
よくある質問
Ankiの夜間モードは色を自動で反転してくれないのですか？
反転しません。カードの背景と既定の文字色だけを暗いほうに変えて、テンプレートで自分が指定した色はそのまま残します。自動で反転すると、意図して選んだ色まで壊れてしまうため、あえてこう動くようになっています。個々の色は夜間用を別に指定してください。
夜間モードで決めた色は、普段の色まで変えてしまいますか？
変えません。夜間用の色は別のルールとして記録され、夜間モードのときだけ適用されます。普段の色はそのまま残っていて、ankieditorで夜間モードをオフにすれば、元の色に戻った画面をすぐに確かめられます。
背景は変えていないのに、カードが白いままです。
テンプレートに夜間専用の背景色がすでに指定されている可能性が高いです。夜間モードをオンにしたままカードの何もない場所をクリックして [この対象の夜間の色をリセット] を押すと、 Anki既定の夜間の背景に戻ります。
夜間モードで区切り線が見えなくなる問題は、「区切り線を太くする」で色選びのコツとあわせて扱っています。カードの背景色そのものを変える方法は、ノートタイプごとに背景色を変えたいときを参考にしてください。