The THORでダークモードを追加! ボタンをいくつか出力してみました

ここ数日でダークモードを実装しました!

てがきろうブログではThe THORをブログテーマに用いています。しかしThe THORにはダークモード実装オプションがないので、追加CSSで対応しました。

そして実際にどのように出力されるかを見るために、このページを製作しました!

ではどのように表示されるか見てみます。

なおダークモード、ライトモード切替ボタンはありません。(TheTHORでの実装の仕方がわからない)

お手持ちの機器のほうで画面表示設定を行ってください。

これはh2の見出しです

どうでしょうか。h2に関しては特に何もいじっておりませんこの赤字は#FF5959です。通常の赤字と比較していかがでしょうか?

比較してみてください。検討してください。こちらはNormalの太さです。

これはh3の見出しです

h3の見出しは左側の線の色を調整しています。ライトモードでは通常の#04044Cですが、ダークモードでは#4169E1です。

これはh4の見出しです

より小さいh4の見出しを作りました。たまに現れます。これはあまり使わないですね。青字で書くとダークモードでは何が書いてあるか判別できません。

なので少々淡い青を使います。どうでしょうか見やすいですか?

ただライトモードだと少々判別がしづらいですね。#4D6DEB

これはh5の見出しです

ここまでダークモードに対応させたいです。

緑色の文字を忘れていました。太字はこんな感じ。

淡い緑にしてみます。ライトモードだとちょっとみにくいですね。

太字はどうでしょうか。太字なら許容範囲です。#77B592

緑は淡くなくても大丈夫そうです。好みのほうを使います。

その他の色のマーカーも引いてみましょう。

まずは赤色です。いかがですか?

続いて青色です

その次は緑色です

この4色はダークモードに対応させておきたいですね。

続いてボックス系を見てみましょう。

これは試験です。よって読む必要はありません。見なければいけません。
こんにちは、おそらく対応しているはずです。
方眼紙はこんな感じですがあまり使わないでしょう。
はてなボックス、よく使うかと思いきや使いません。
これは注意書きによく使いますね。
こちらは果たして使うのでしょうか?
さあ、質問して答えることはあるのでしょうか?
これはよく使います。ただベージュが気に入らないので、変えるかもしれません。
これもよく使います。ダークモードでは明るすぎるので調整しなければなりません。
ハート型なのでおそらく使いません。ダークモードに対応させるべきでしょうか?

これから目次を書きまーす。

  1. これは目次1つ目です
  2. これは2つ目。しっかりとマーカーが反映されているかな
  • もう一つ、番号のない項目です
  • いかがですか

吹き出しは今後使わないので、ダークモードには対応させません。

資料は以上ですね。

しっかりと見えていますでしょうか?

もしほかのページで表示がおかしいことがございましたら、TwitterのDM等でお知らせください。

広告
NO IMAGE
手書き文字や東武東上線に関する情報を手に入れたい!