Night Mode - Android VS. Desktop

Anki Help
8

The solution for that particular html would be something like the following:

.win .nightMode .def {
    color: #fff;
}

Or, if you’re looking for a universal way to change the color of text from a dark one to a light one only when text is so dark that it is hard to see when night mode is enabled, you could try adding the following script to the card template:

<script>
    // https://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black
    function getLuminance(rgbString) {
        var rgb = rgbString.match(/\d+/g);
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
    }

    function brightenText() {
        // from 0 (darkest) to 255 (brightest)
        const foregroundLuminanceThreshold = 100;
        const backgroundLuminanceThreshold = 100;
        // See https://developer.mozilla.org/en-US/docs/Web/CSS/filter
        const filterValue = 'invert(1) hue-rotate(180deg)';

        const nodeIterator = document.createNodeIterator(
            document.querySelectorAll('#qa')[0],
            NodeFilter.SHOW_ELEMENT
        );
        let currentNode;
        while ((currentNode = nodeIterator.nextNode()) !== null) {
            const style = getComputedStyle(currentNode);
            if (getLuminance(style['color']) < foregroundLuminanceThreshold &&
                getLuminance(style['background-color']) < backgroundLuminanceThreshold) {
                currentNode.style.filter = filterValue;
            }
        }
    }

    // Do processing only when night mode is enabled on Anki desktop
    if (typeof pycmd !== 'undefined' && document.body.classList.contains('nightMode')) {
        setTimeout(brightenText, 0);
    }
</script>

You can change the values of foregroundLuminanceThreshold, backgroundLuminanceThreshold, and filterValue if necessary.

brighten_text
brighten_text527×534 15.6 KB

EDIT: Changed the root node of NodeIterator

5 Likes