色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在瀏覽器中檢測OS是否處于黑暗模式？

CSS
阮建安1年前7瀏覽0評論

類似于“如何檢測OS X是否處于黑暗模式？”僅適用于瀏覽器。

有沒有人發現，在Safari/Chrome/Firefox中，有沒有辦法檢測用戶的系統是否處于新的OS X黑暗模式？

我們想改變我們的網站的設計是黑暗模式友好的基礎上當前的操作模式。

新標準在W3C媒體查詢級別5中注冊。

注意:目前僅在Safari技術預覽版本68中可用

如果用戶偏好為輕:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

如果用戶偏好為深色:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

如果用戶沒有偏好，還可以選擇no-preference。但是我建議你在這種情況下使用普通的CSS，并且正確地層疊你的CSS。

編輯(2018年12月7日):

在Safari Technology Preview Release 71中，他們宣布了Safari中的切換開關，以使測試更容易。我還制作了一個測試頁面來觀察瀏覽器的行為。

如果您安裝了Safari技術預覽版71，您可以通過以下方式激活:

開發& gt實驗特征& gt黑暗模式CSS支持

然后，如果您打開測試頁面并打開元素檢查器，您會看到一個切換暗/亮模式的新圖標。

toggle dark/light mode

編輯(2019年2月11日): 蘋果推出了新的Safari 12.1黑暗模式

編輯(2019年9月5日): 目前世界上25%的人可以使用黑暗模式CSS。資料來源:caniuse.com

即將推出的瀏覽器:

iOS 13(估計下周蘋果的Keynote之后會出貨) EdgeHTML 76(不確定何時發布) 編輯(2019年11月5日): 目前世界上74%的人可以使用黑暗模式CSS。資料來源:caniuse.com

編輯(2020年2月3日):微軟Edge 79支持黑暗模式。(2020年1月15日發布)

我的建議是:你應該考慮實現黑暗模式，因為大多數用戶現在都可以使用它(針對你的網站的夜間用戶)。

注意:現在所有主流瀏覽器都支持黑暗模式，除了:IE，Edge

編輯(2020年11月19日): 目前世界上88%的人可以使用黑暗模式CSS。資料來源:caniuse.com

CSS-framework Tailwind CSS v2.0支持黑暗模式。(2020年11月18日發布)

編輯(2020年12月2日):

谷歌Chrome為開發工具增加了黑暗主題仿真。資料來源:developer.chrome.com

編輯(2022年5月2日):

目前世界上90%的人可以使用黑暗模式CSS。資料來源:caniuse.com

如果您想從JS中檢測它，您可以使用以下代碼:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

要觀察變化:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Spec已啟動(見上文)，可作為媒體查詢。一些東西已經登陸Safari，請參見此處。所以理論上你可以在Safari/Webkit中這樣做:

@media (prefers-dark-interface) { color: white; background: black }

在MDN上，提到了CSS媒體特征反轉顏色。插頭:我在這里寫了關于黑暗模式的博客。

根據Mozilla的說法，這是截至2020年的首選方法

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

對于Safari/Webkit，您可以使用

@media (prefers-dark-interface) { background: #000; }

我搜索了Mozilla API，他們似乎沒有任何與瀏覽器窗口顏色相對應的變量。盡管我找到了一個可能對你有幫助的頁面:如何在CSS中使用操作系統樣式。盡管有標題，Chrome和Firefox的顏色是不同的。

使用BootStrap 5.3.0-alpha1并基于Mark Szabo的回答，我使用了這個(我使用的是TypeScript):

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        switchColorScheme();
    });

    function switchColorScheme() {
        document.querySelector('html')!.dataset.bsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? "dark"
            : "light";
    }

    switchColorScheme();

在加載頁面之前，它已經檢測到瀏覽器的當前亮模式或暗模式，并相應地在元素上設置bootstrap屬性。

這還不是正式的，但你可以使用:

背景色:帆布 顏色:canvasText

現任官員:https://www.w3.org/TR/css-color-3/ 建議草案:https://www.w3.org/TR/css-color-4/

(不要抨擊我貼這個。我不是在宣傳它，我只是說它有效。)