@Blog

おはようございます.何だか寒い日が続きます、寒いのはあまり好きではないですね….今年の冬は平年よりも寒いかもですね.

さて、先日の午前中にこのブログサイトのデザインなどをいじってました.今まであった「文字の大きさ変更」が消えてたり、文字の行間が微妙に変わっていたりしています.

それとライトモードとダークモードのちらつきを解消しました.参考にしたサイトはこちらになります.サイトを参照していただければ分かるかなと思いますが、なぜチラつきが発生するのかをこちらでも簡潔に説明するとjavascriptの読み込みタイミングによりチラつきが発生します.

切り替えを制御するjsをフッターに書くのではなくヘッダー内に書くこと.そしてブラウザカラーのモードとローカルストレージが不一の場合にチラつきが発生するのでヘッダー内で制御することです.

因みに参照サイトはTypeScriptで記載されていますが、Jsで制御したい場合は下記のコードを参照することで上手く動作すると思います.

明日へ続く

(function () {
  const prefers = window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";
  const fromStorage = localStorage.getItem("theme");
  const colorMode = !fromStorage
      ? prefers
      : fromStorage === "light"
        ? "light"
        : "dark";
  window.document.documentElement.dataset.colorMode = colorMode;
})();