https://takao.blog/ja/tags/dark-mode/Recent content in Dark-Mode on たかおの解説Hugo -- gohugo.iojaたかおの解説Sat, 13 Jun 2026 23:11:50 +0900https://takao.blog/ja/web/css-light-dark-color-scheme/Fri, 10 Oct 2025 00:00:00 +0900https://takao.blog/ja/web/css-light-dark-color-scheme/<img src="https://takao.blog/img/thumnail.webp" alt="Featured image of post CSSのlight-dark()関数を使用した簡潔なダークモードテーマ実装" /><h2 id="従来のダークモード実装の問題点">従来のダークモード実装の問題点 </h2><p>従来のダークモード実装では、<code>@media (prefers-color-scheme: dark)</code> でラップした重複したCSSルールが必要でした。これにより、特に大規模なスタイルシートではメンテナンスコストが増大します。<code>light-dark()</code> CSS関数はこの重複を完全に排除します。</p>