當瀏覽器處于匿名模式時，選項卡是黑色的。它可以使圖標不是超級可見，甚至在最壞的情況下不可見。這不太好。我看到一些帖子提供了一種方法來檢測黑暗模式，并相應地改變圖標，但經過嘗試:隱姓埋名模式不能被檢測為黑暗模式。此外，有些人提供了用javascript檢測匿名模式的方法，但它們顯然一點也不可靠。

有人有可靠的方法來處理嗎？(除了使favicon的顏色在明暗中可見之外)

謝謝你

# # #對于您的解決方案，您可以創建2個函數 檢測黑暗模式:isDarkMode 檢測匿名模式:isIncognitoMode

以下是您可以參考的代碼:

function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function isIncognitoMode() {
    return new Promise(function(resolve) {
        try {
            localStorage.setItem('IncognitoMode', 'true');
            localStorage.removeItem('IncognitoMode');
            resolve(false);
        } catch (e) {
            resolve(true);
        }
    });
}

function isIncognitoAndDarkMode() {
    return Promise.all([isDarkMode(), isIncognitoMode()]).then(function([darkMode, incognitoMode]) {
        return darkMode && incognitoMode;
    });
}

使用isIncognitoAndDarkMode函數獲取輸出

# # #好吧，我用這個包進行可靠的(顯然)隱姓埋名模式檢測:https://github.com/Joe12387/detectIncognito,和

window.matchMedia('(prefers-color-scheme: dark)');

對于黑暗模式。

在html中我有:

<link class="favicon" rel="icon" href="/icons/favicon.ico" />
<link class="favicon" rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png" />
<link class="favicon" rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png" />
<link class="favicon" rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png" />

(注意課堂)

然后在js文件中:

import { detectIncognito } from 'detectincognitojs';

const matcher = window.matchMedia('(prefers-color-scheme: dark)');

class FaviconService {
    isIncognitoMode() {
        return detectIncognito();
    }

    isDarkMode() {
        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }

    async isIncognitoOrDarkMode() {
        return Promise.all([this.isDarkMode(), this.isIncognitoMode()]).then(function ([
            darkMode,
            incognitoModeResult,
        ]) {
            return darkMode || incognitoModeResult.isPrivate;
        });
    }

    getFaviconLinks() {
        return document.getElementsByClassName('favicon');
    }

    setFaviconsForLightMode() {
        const links = this.getFaviconLinks();

        for (const link of links) {
            link.href = link.href.replace('/dark-icons/', '/icons/');
        }
    }

    setFaviconsForDarkMode() {
        const links = this.getFaviconLinks();

        for (const link of links) {
            link.href = link.href.replace('/icons/', '/dark-icons/');
        }
    }

    async updateFavicons() {
        const ret = await this.isIncognitoOrDarkMode();
        if (ret) {
            this.setFaviconsForDarkMode();
        } else {
            this.setFaviconsForLightMode();
        }
    }

    setup() {
        matcher.addEventListener('change', () => {
            this.updateFavicons();
        });
    }
}

export default new FaviconService();

然后在哪里初始化我的東西(取決于框架)

FaviconService.setup();
FaviconService.updateFavicons();

效果很好。在chrome，firefox，edge上測試。