ここ数日でダークモードを実装しました！
てがきろうブログではThe THORをブログテーマに用いています。しかしThe THORにはダークモード実装オプションがないので、追加CSSで対応しました。
そして実際にどのように出力されるかを見るために、このページを製作しました！
ではどのように表示されるか見てみます。
なおダークモード、ライトモード切替ボタンはありません。（TheTHORでの実装の仕方がわからない）
お手持ちの機器のほうで画面表示設定を行ってください。
これはh2の見出しです
どうでしょうか。h2に関しては特に何もいじっておりません。この赤字は#FF5959です。通常の赤字と比較していかがでしょうか？
比較してみてください。検討してください。こちらはNormalの太さです。
これはh3の見出しです
h3の見出しは左側の線の色を調整しています。ライトモードでは通常の#04044Cですが、ダークモードでは#4169E1です。
これはh4の見出しです
より小さいh4の見出しを作りました。たまに現れます。これはあまり使わないですね。青字で書くとダークモードでは何が書いてあるか判別できません。
なので少々淡い青を使います。どうでしょうか見やすいですか？
ただライトモードだと少々判別がしづらいですね。#4D6DEB
これはh5の見出しです
ここまでダークモードに対応させたいです。
緑色の文字を忘れていました。太字はこんな感じ。
淡い緑にしてみます。ライトモードだとちょっとみにくいですね。
太字はどうでしょうか。太字なら許容範囲です。#77B592
緑は淡くなくても大丈夫そうです。好みのほうを使います。
その他の色のマーカーも引いてみましょう。
まずは赤色です。いかがですか？
続いて青色です。
その次は緑色です。
この4色はダークモードに対応させておきたいですね。
続いてボックス系を見てみましょう。
これから目次を書きまーす。
- これは目次1つ目です
- これは2つ目。しっかりとマーカーが反映されているかな
- もう一つ、番号のない項目です
- いかがですか
吹き出しは今後使わないので、ダークモードには対応させません。
資料は以上ですね。
しっかりと見えていますでしょうか？
もしほかのページで表示がおかしいことがございましたら、TwitterのDM等でお知らせください。
