# ライトモードとダークモードの切り替えでチラつき解消
おはようございます.何だか寒い日が続きます、寒いのはあまり好きではないですね….今年の冬は平年よりも寒いかもですね.
さて、先日の午前中にこのブログサイトのデザインなどをいじってました.今まであった「文字の大きさ変更」が消えてたり、文字の行間が微妙に変わっていたりしています.
それとライトモードとダークモードのちらつきを解消しました.参考にしたサイトは[こちら](https://blog.stin.ink/articles/how-to-implement-a-perfect-dark-mode)になります.サイトを参照していただければ分かるかなと思いますが、なぜチラつきが発生するのかをこちらでも簡潔に説明するとjavascriptの読み込みタイミングによりチラつきが発生します.
> なるほど.
> 真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog<https://t.co/MuS50JIn01>
>
> — 田岡 寿章(taoka\_toshiaki) (@taoka\_toshiaki) [October 29, 2025](https://twitter.com/taoka_toshiaki/status/1983425841980952917?ref_src=twsrc%5Etfw)
切り替えを制御する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;
})();
```
[  普通って何だろう🤔
](https://zip358.com/2026/02/10/%e6%99%ae%e9%80%9a%e3%81%a3%e3%81%a6%e4%bd%95%e3%81%a0%e3%82%8d%e3%81%86%f0%9f%a4%94.html)
[  紹介料はポイントで貰ってきたけど.
](https://zip358.com/2026/02/09/%e7%b4%b9%e4%bb%8b%e6%96%99%e3%81%af%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%81%a7%e8%b2%b0%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e3%81%91%e3%81%a9.html)
[  AIは能力の鏡だとさ.そうかも知れない.
](https://zip358.com/2026/02/08/ai%e3%81%af%e8%83%bd%e5%8a%9b%e3%81%ae%e9%8f%a1%e3%81%a0%e3%81%a8%e3%81%95-%e3%81%9d%e3%81%86%e3%81%8b%e3%82%82%e7%9f%a5%e3%82%8c%e3%81%aa%e3%81%84.html)
[  考え過ぎずに行動力.逆算出来れば凄いけどね.
](https://zip358.com/2026/02/07/%e8%80%83%e3%81%88%e9%81%8e%e3%81%8e%e3%81%9a%e3%81%ab%e8%a1%8c%e5%8b%95%e5%8a%9b-%e9%80%86%e7%ae%97%e5%87%ba%e6%9d%a5%e3%82%8c%e3%81%b0%e5%87%84%e3%81%84%e3%81%91%e3%81%a9%e3%81%ad.html)
[  ネガティブ思考は駄目なのか本当にそう？
](https://zip358.com/2026/02/06/%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e6%80%9d%e8%80%83%e3%81%af%e9%a7%84%e7%9b%ae%e3%81%aa%e3%81%ae%e3%81%8b%e6%9c%ac%e5%bd%93%e3%81%ab%e3%81%9d%e3%81%86%ef%bc%9f.html)