Styling changes do not sync with Mobile Version

[Aevryn]

I am trying to change the color of the pitch accent field for my AnkiMobile version, but I have very little technical know-how to do it myself.

With the help of some great people on the internet I found some lines to input in the “Styling” section, which are:

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

As you can see in this picture:

The problem is, however, that on the mobile version this change does not sync. All other changes in background color, font-color, or size do change.
I just can’t seem to change the color of the pitch accent on my mobile devices.

Any help?

[Danika_Dakika]

By this do you mean that –

1. the CSS code on the Styling tab isn’t fixing anything?
2. the CSS code on the Styling tab isn’t updating after you sync?

If it’s #1, here are some suggestions to deal with this issue (which appears to be an iOS 17 problem). [But if it’s #2, we can talk about syncing issues.]

CSS filters not working? Cannot invert SVG

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: …

Dark Mode & Images .svg.png: Invisible on Black Background

I’d always pick SVG if I have the choice, because as XML docs they can be modified much more precisely than raster images. In OP’s example, instead of downloading the .svg.png via right-click “Save As”, you can use the download button here to get the original SVG: [image] Method 1 You can paste the SVG code directly into the HTML editor of a field: [image] Then changing the fill color is as simple as this: /* override inline styles with !important */ svg path { fill: yellow !importan…

And see also:

"filter" css property not working on SVG in iOS 17

[Aevryn]

Thank you so much.

Seems like the problem was that the “filter needs to be applied to the parent element of the svg, instead of directly to the svg.”

So I just changed the lines to:

.pitch {
    filter: invert(1);
}

I don’t know exactly know what the problem was… but it works!

[Danika_Dakika]

Thanks for posting that! This will definitely help other folks facing the same issue.