如果用戶喜歡-color-scheme：dark，則設置暗模式

Question

我目前有一個切換按鈕，它在我的<body>上切換 class .dark-mode ，然后將首選項保存到本地存儲中。

不過，默認情況下它會加載到淺色主題中。

我希望這樣做，如果客戶prefers-color-scheme: dark ，它會自動切換到黑暗模式，如果不是，那么它會保持亮光。

<script>
/* Dark Mode Selection */
// On page load set the theme.
    (function() {
    let onpageLoad = localStorage.getItem("theme") || "";
    let element = document.body;
    element.classList.add(onpageLoad);
    document.getElementById("theme").textContent =
        localStorage.getItem("theme") || "light";
    })();



    function themeToggle() {
    let element = document.body;
    element.classList.toggle("dark-mode");

    let theme = localStorage.getItem("theme");
    if (theme && theme === "dark-mode") {
        localStorage.setItem("theme", "");
    } else {
        localStorage.setItem("theme", "dark-mode");
    }

    document.getElementById("theme").textContent = localStorage.getItem("theme");
    }

</script>

我不確定如何在首次加載時使其默認為首選顏色。

Answer 1

即使沒有 JS，只需閱讀文檔即可顯示答案：

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

如果用戶喜歡-color-scheme：dark，則設置暗模式

問題描述

1 個解決方案

解決方案1
-1 2021-06-10 12:24:14

如果用戶喜歡-color-scheme：dark，則設置暗模式

問題描述

1 個解決方案

解決方案1 -1 2021-06-10 12:24:14

解決方案1
-1 2021-06-10 12:24:14