CSS filters not working? Cannot invert SVG

[jgutierrezre]

Hi there,

I have the iOS version of the app (version 24.04), and some of the dark mode styling I am using in the Desktop app is not working.

I am using the pitch accent generated by this great add-on: 148002038

It suggests adding the following style to invert the pitch accent color.

.nightMode svg.pitch {
    -webkit-filter: invert(1);
    filter: invert(1);
}

However it doesn’t actually work on my device. The colors remain the same.

I was able to get this working by adding the following:

.nightMode svg > text { fill: #fff !important; }
.nightMode svg > path { stroke: #fff !important; }
.nightMode svg > circle[r="5"] { fill: #fff !important; }
.nightMode svg > circle[r="3.25"] { fill: #000 !important; }

But you can start to see how this may become an issue if you simply prefer inverting everything.

Thanks in advance.

[dae]

Things like this are handled by Apple’s web browser, not by AnkiMobile itself. Different browsers can vary in some ways, so you may need to use different CSS to achieve the same results across them.

[jgutierrezre]

You are right, however CSS filter effects have been implemented in WebKit for a long while now. You can look this up on caniuse.

[dae]

Even when a particular feature is supported across browsers, the way it behaves in certain circumstances can vary. I’m afraid when you start using CSS/JS in your card templates, you’re interacting with the system webview rather than AnkiMobile, so you will need to deal with any platform-specific differences.