I started to seriously understand Anki’s system, and I’m at the point where I’m asking if it’s possible to change the default CSS template of all fields in editing mode.
I know how to change the styling section in note type for reviewing mode but here I want to modify text when I’m editing cards, since for the moment I mostly use Anki like a database rather than learning cards so I don’t use reviewing mode and prefer to see the fields in the browser.
Actually, when I’m editing a field, I have to open the HTML window to add some CSS styles (for example to adjust unordered list). It works but I have to copy/paste the code for every field, so it’s little annoying…
If you only want to change the appearance of certain words/sentences (e.g. highlighting), you could use the Custom Styles add-on.
If you want to change the styling of the editor itself, there’s the add-on Customize Editor Stylesheet, but it won’t allow you to edit everything because the field’s default styles are protected within a shadow-DOM. You can see this in action when you inspect fields with AnkiWebView Inspector.
About AnkiWebView Inspector
This add-on is really helpful for any kind of front-end tweaks or complex card templates.
I highly recommend you analyze the structure of the editor page with that inspector, then you’ll know which classes to style and which CSS-variables to use.
To fully control the look of elements inside Anki’s editor fields, you need to inject your CSS into the shadow-root with your own add-on:
(The Custom Styles add-on does the same thing, but you can only change the injected stylesheet through the add-on interface, which is a little bit limited.)
Simply navigate to the add-on folder as described on the add-on page and edit the file “field.css” to your heart’s content. Should I ever update the add-on, make sure to back up your CSS files before accepting the update.