# CSS filters not working? Cannot invert SVG

**URL:** <https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186>\
**Category:** Help\
**Created:** [April 29, 2024, 6:56am UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186 "2024-04-29T06:56:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgutierrezre](https://avatars.discourse-cdn.com/v4/letter/j/8e7dd6/32.png) [@jgutierrezre](https://forums.ankiweb.net/u/jgutierrezre)\
**Post date:** [April 29, 2024, 6:56am UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186/1 "2024-04-29T06:56:45Z")

</div>

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.

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

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

---

<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:** [April 29, 2024, 7:23am UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186/2 "2024-04-29T07:23:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jgutierrezre](https://avatars.discourse-cdn.com/v4/letter/j/8e7dd6/32.png) [@jgutierrezre](https://forums.ankiweb.net/u/jgutierrezre)\
**Post date:** [April 29, 2024, 1:12pm UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186/3 "2024-04-29T13:12:56Z")

</div>

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

---

<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:** [April 30, 2024, 12:32pm UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186/4 "2024-04-30T12:32:37Z")

</div>

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.

---

<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 30, 2024, 12:33pm UTC](https://forums.ankiweb.net/t/css-filters-not-working-cannot-invert-svg/44186/5 "2024-05-30T12:33:27Z")

</div>

Closed on May 30, 2024, 12:33pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.