# Night Mode - Android VS. Desktop

**URL:** <https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077>\
**Category:** Help\
**Created:** [February 2, 2021, 10:26am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077 "2021-02-02T10:26:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahram](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shahram](https://forums.ankiweb.net/u/shahram)\
**Post date:** [February 2, 2021, 10:26am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/1 "2021-02-02T10:26:34Z")

</div>

Hello everyone,  
I use some decks that contain HTML codes and also different font colors.  
The night mode in Android does its job great and changes the note colors so that the cards are still readable.  
But the night mode in desktop doesn’t do that and as a result some lines have the same color as the background and are not readable.  
Am I doing something wrong? Is there an option for this?  
With best regards

 ![2021-02-02 11_30_52-Settings](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/2/2592d6435f9f5e19fc688b30f7304e69598adf65.jpeg)

P.S.: i have tried mix\_blend\_mode in card styling. It didn’t help!

```
.win .card{
  font-family: arial;
  font-size: 12px;
  text-align: center;
  mix-blend-mode: difference !important;
}
```

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [February 2, 2021, 11:37am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/2 "2021-02-02T11:37:53Z")

</div>

I’m not sure inverting text colours by default is the best option, as it could conflict with explicit night-mode styling people have. You might be able to imitate it with some CSS - perhaps some CSS guru has a suggestion.

---

<div class="post-metadata">

**Author:** ![shahram](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shahram](https://forums.ankiweb.net/u/shahram)\
**Post date:** [February 2, 2021, 1:14pm UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/3 "2021-02-02T13:14:37Z")

</div>

yea you’re right its not the best option but it works for me and i don’t have any problem with it in Ankidroid.

> [@dae](#):
>
> You might be able to imitate it with some CSS - perhaps some CSS guru has a suggestion.

could you please help me more?

---

<div class="post-metadata">

**Author:** ![hengiesel](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/hengiesel/32/920_2.png) [@hengiesel](https://forums.ankiweb.net/u/hengiesel)\
**Post date:** [February 2, 2021, 4:31pm UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/4 "2021-02-02T16:31:48Z")

</div>

How about instead of using `mix-blend-mode`, you simply use:

```css
.nightMode {
    color: white;
}

```

?

---

<div class="post-metadata">

**Author:** ![shahram](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shahram](https://forums.ankiweb.net/u/shahram)\
**Post date:** [February 2, 2021, 4:59pm UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/5 "2021-02-02T16:59:03Z")

</div>

That didn’t work for me!  
😢

---

<div class="post-metadata">

**Author:** ![kelciour](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kelciour/32/14770_2.png) [@kelciour](https://forums.ankiweb.net/u/kelciour)\
**Post date:** [February 3, 2021, 12:21am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/6 "2021-02-03T00:21:00Z")

</div>

For example, with the following trick and a slight adjustment to keep default dark mode colors uninverted.

> **[Poor Man's Dark Mode Using CSS Filter](https://dev.to/pqina/poor-man-s-dark-mode-using-css-filter-211n)**
>
> Building a quick dark/night mode for your website with CSS filter

**HTML**

```auto
<span style="background:#4577be;color:white">&nbsp;seedling&nbsp;</span> 
<span style="color:#5e1624">NAmE</span> 
noun

```

**Light Mode**

![](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/0/0396799a5ccb66c5ccef7ee138784ae031eca945.png)

**Dark Mode**

![](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/8/899a07f2438c479d1416f6230f938f3acbf84176.png)

**Styling**

```css
.night-mode [style*="color:"], .night-mode [style*="background:"] {
  filter: invert(100%);
}

```

---

<div class="post-metadata">

**Author:** ![shahram](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shahram](https://forums.ankiweb.net/u/shahram)\
**Post date:** [February 3, 2021, 11:00am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/7 "2021-02-03T11:00:12Z")

</div>

> [@kelciour](#):
>
> ```auto
> html:not(.android) .nightMode [style*="color:"], html:not(.android) .nightMode [style*="background:"] {
> filter: invert(100%);
> }
> 
> ```

Hi Kelciour,  
Thank you for your Replay. This styling code doesn’t work for me. ☹ I get still unreadable texts in desktop.  
Should i change something in my HTML codes?  
my HTML Codes look like this:

```
<style type="text/css">.entry{font-family:Arial,sans-serif;color:#333;line-height:160%;margin:0;padding:0}.h-g{margin:0;padding:0}ol{list-style-type:none}img{max-width:100%;border:none}a{font-weight:bold;color:#004AAC}.oxf{color:#C76E06}.gram-g,.label-g,.dis-g{color:#004AAC}.hm,pnc.hm,.xhm{font-size:smaller;margin-left:1px;position:relative;top:-5.25px}block{margin:0 0 5px 0;display:block;border-bottom:1px dashed #333}block a{color:#8f0610}.topc,.top-g,.wtg{margin:0;padding:0}.wtg .aca{display:inline-block;margin-top:0px;padding:1px 4px 0;line-height:15px;font-size:75%;font-weight:bold;color:white;background-color:#C76E06}.wtg .oxf{font-size:20px;color:white}.wtg h2{display:inline-block;margin:0;padding:0 5px;font-size:20px;font-weight:bold;font-family:Arial,sans-serif}.wtg .pos{color:#8f0610;font-weight:bold;font-style:italic;padding-left:5px}.top-g .v-gs:not([type~="sym"]){display:block}.pgs{display:inline-block;margin:0;padding-left:5px}.pgs .phon{color:#004aac}.pgs a{display:inline-block}.pgs img{width:33px;height:30px;margin-bottom:-4px}.vp-g .pgs{display:inline}.pron-g{white-space:nowrap}.cf{font-weight:bold}.sn-gs li{display:block}.sn-gs .shcut{display:block;margin-top:8px;font-size:110%;font-weight:bold;color:#C76E06;border-bottom:1px solid #e8c49a}.sn-gs .sn-g{display:block}.sn-gs .sn-g .num{font-weight:bold;padding-right:5px}.sn-gs .sn-g .xr-gs{display:block}.sn-gs .sn-g .xr-gs:before{content:"➔";color:#C76E06;margin-right:4px;position:relative;top:2px}.sn-gs .sn-g .xr-gs .prefix{text-transform:uppercase;font-size:80%;margin-right:3px}.sn-gs .x-gs{display:block;padding-left:10px}.sn-gs .x-gs .x-g{display:block;font-family:Georgia,serif;color:#666}.sn-gs .x-gs .x-g:before{content:"•";color:#C76E06}.sn-gs .un{display:block;background-color:#F3E2CD;margin:10px;padding:5px}.sn-gs .un .x-gs,.sn-gs .un .x-gs .x-g{display:inline;margin:0;padding:0}.sn-gs .un .x-gs .x-g:before{content:"▶"}.idm-gs,.pv-gs{display:block;margin-top:10px;padding:5px 10px;border:1px solid #e8c49a;border-radius:5px}.idm-gs .idm-g{display:block;margin-top:5px}.idm-gs .heading,.pv-gs .heading{display:block;margin:5px;font-size:110%;font-weight:bold;color:#C76E06}.idm-gs .idm{display:inline-block;font-weight:bold}.idm-gs ol{padding:0}.idm-gs ol .sn-gs{display:block;padding-left:10px}.pv-gs .pv-g{display:block;margin:0;padding:0}.pv-gs .xr-gs a{display:block}.pv-gs .pv-g h4{display:inline;margin:0}.pv-gs .pv-g a{display:inline}.pvarr:before{ content:"↔"}.eb{color:#333;font-weight:bold}.sn-gs .sn-g .clps{margin-left:10px}.clps{margin:5px 0;padding:0;display:block;border-left:3px solid #C76E06;background-color:#F9F0E5}.clps .heading{display:block;margin:0;padding:2px 5px;font-size:100%;font-weight:bold;color:#333}.clps .heading:hover{color:#C76E06;cursor:pointer;background-color:#EED5B7}.topc .clps .heading:hover{color:#4577bf;cursor:pointer;background-color:#bed3ed}.topc .clps .opbox .heading{color:#4577bf;background-color:#bed3ed}.clps .opbox .heading{color:#C76E06;background-color:#EED5B7}.clps .unbox .heading:before{content:"＋";font-weight:900}.clps .unbox .body,.clps .unbox .def,.clps .unbox .h1,.clps .unbox .p{display:none}.clps .opbox .body,.clps .unbox .h1,.clps .unbox .p{display:block}.clps .opbox .def{display:inline}.clps .opbox .heading:before{content:"－";font-weight:900}.clps .body{padding-left:10px}.clps .body .vp-g{display:block}.clps .body .vp{font-weight:bold}.clps .body .vp .prefix{font-weight:normal}.clps .body .x-gs .x-g{display:block;font-family:Georgia,serif}.clps .body .x-gs .x-g:before{content:"•";color:#C76E06}.clps .body .h1{margin-top:5px;display:block;color:#C76E06;font-size:120%;font-weight:bold}.clps .body .inline{display:block;font-weight:bold;width:100%;overflow:}.clps .body .inline .sep{display:none}.clps .body .inline .li{display:inline-block}.clps .inline .li:not(:last-of-type):after,.clps ul.inline .li:not(:last-of-type):after{ content:"•";color:#C76E06;margin-left:4px;width:6px}.clps .body .deflist{display:block}.clps .body .deflist .li{display:block}.clps .body .deflist .li .eb{color:#C76E06}.clps .body .li .un{display:block;background-color:#F3E2CD;margin:10px;padding:5px}.clps .body .li .x-gs{display:inline;margin:0;padding:0}.clps .body .li .x-gs .x-g{display:inline}.clps .body .li .x-gs .x-g:before{content:"▶";margin-left:2px}.clps .body .h2{display:block;margin-top:5px;color:#333;font-size:105%;font-weight:bold;border-bottom:1px solid #e8c49a}.clps .body .p{display:block;margin:0}.clps .body .p .xr-gs{display:inline;margin:0}.clps .body .p .xr-gs:before{content:"";margin:0}.clps .body .h3{margin:8px 0;display:block;font-size:110%;font-weight:bold;border-bottom:1px solid #e8c49a}.clps .body .bullet .li{display:block;padding-left:10px}.clps .body .bullet .li:before{content:"■";color:#C76E06;margin-left:-10px}.topc{background-color:#ecf5ff;clear:both}.wtg{background-color:#4577bf;margin:0;padding:0}.wtg h2{font-size:20px;font-weight:bold;font-family:Arial,sans-serif;margin:8px 0;padding-left:10px;color:white;line-height:120%;display:inline-block}.wtg .pos{margin-left:6px;color:#ffffff}.idm-gs .un,.pv-gs .un{margin-left:18px;margin-right:18px;padding:12px 18px 12px 18px}.un,.clps{background-color:#faf1e6;display:block;margin:12px 0 18px 0}.sn-gs,.res-g{display:block}.topc .un,.topc .clps{background-color:#dce9f9;border-left:3px solid #4577bf}.un{padding:12px 18px 12px 18px;text-indent:0}</style>
<div class="entry"><div class="h-g"><div class="topc"><div class="top-g"><div class="wtg"><h2 class="h">seedling</h2><span class="pos">noun</span></div><div class="pgs"><span class="pron-g"><span class="prefix" style="color:#07255e">BrE</span> <span class="phon">/ˈsiːdlɪŋ/</span><span class="sound-uk"><a href="sound://sound/seedling __gb_1.spx"></a></span></span><span class="sep">;</span> <span class="pron-g"><span class="prefix" style="color:#8f0610">NAmE</span> <span class="phon">/ˈsiːdlɪŋ/</span><span class="sound-us"><a href="sound://sound/seedling__ us_1.spx"></a></span></span></div></div></div><span class="sn-gs"><span class="sn-g"><div class="pics"></div> <span class="def">a young plant that has grown from a seed</span><span class="x-gs"><span class="x-g"> <span class="x">tomato seedlings</span></span></span></span></span></div> </div>

```

and my card styling looks now like this:

```
.mobile .card {
  font-family: arial;
  font-size: 22px;
  text-align: center
}

.win .card{
  font-family: arial;
  font-size: 12px;
  text-align: center;
}

html:not(.android) .nightMode [style*="color:"], html:not(.android) .nightMode [style*="background:"] {
  filter: invert(100%);
}

```

---

<div class="post-metadata">

**Author:** ![hkr](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@hkr](https://forums.ankiweb.net/u/hkr)\
**Post date:** [February 3, 2021, 2:27pm UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/8 "2021-02-03T14:27:30Z")

</div>

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

```css
.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:

```auto
<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](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/7/7067fe7117a35a0a0863de9cb42754b27ce3cf54.png)

EDIT: Changed the root node of NodeIterator

---

<div class="post-metadata">

**Author:** ![shahram](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@shahram](https://forums.ankiweb.net/u/shahram)\
**Post date:** [February 3, 2021, 10:59pm UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/9 "2021-02-03T22:59:22Z")

</div>

Thank you hkr, your first solution has helped me. ❤  
I’m going to give that script a try too.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 5:15am UTC](https://forums.ankiweb.net/t/night-mode-android-vs-desktop/7077/10 "2023-05-01T05:15:09Z")

</div>