Zenn
🌆

astro（その他静的サイト）のダークモード対応（コピペ用）

に公開
CSS
Astro
tech

前置き

サイトのカラーテーマとシステムのカラーテーマが異なるとどうしてもちらつきが発生するので悪しからず。
解決法を知っている人がいれば知りたい。

CSSの対応

【引用元】https://www.tak-dcxi.com/article/hello-world/

:root {
  /* ライトモード時のCSS変数 */
}

:root[data-theme='dark'] {
  /* ダークモード時のCSS変数 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* ダークモード時のCSS変数 */
  }
}

notで書くのは盲点だった。

JSの対応

システムのカラーテーマを判別して、ルートdocumentに識別データを付けるコード。
これをhead内にインラインscriptとして埋め込む。

<head>
<script>
    (function () {
    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
    const systemTheme = prefersDarkScheme ? "dark" : "light";
    const storedTheme = localStorage.getItem("theme");
    const theme = storedTheme ?? systemTheme;
    
    document.documentElement.dataset.theme = theme;
    localStorage.setItem("theme", theme);
    })();
</script>
</head>

切り替えボタン

const toggleTheme = () => {
  const nowTheme = window.document.documentElement.dataset.theme;
  const newTheme = nowTheme === "dark" ? "light" : "dark";
  localStorage.setItem("theme", newTheme);
  window.document.documentElement.dataset.theme = newTheme;
};

<button aria-label="ダークモード" onClick="toggleTheme">☀</button>

Discussion