How to create or customize themes - AnKing-VIP/anki-audiovisual-feedback GitHub Wiki

Themes are stored under the user_files/themes subfolder of the add-on. You can access the folder from the add-on's config:

1. Go to the AnKing menu.

2. Click on Audiovisual Feedback

3. Click on the Open Theme Folder button.

This will take you to the chosen theme's files.

If you have images and sounds and want to make a new theme from them, you can simply copy an existing theme folder and replace the images and sounds. This should work, given that you preserve the folder structure described below. For more advanced customizations, you'll need some familiarity with JavaScript and CSS.

The theme folder structure

The images subfolder

The images subfolder contains further subfolders. Each subfolder stores images used for the review state described by the folder name.

Some themes don't have certain subfolders, and some don't have images at all (so no images folder).

The sounds subfolder

The sounds subfolder is structured exactly like the images subfolder, except of course that it stores sound files instead of images.

The web subfolder

The web subfolder contains the JavaScript logic and CSS styling of the theme. The default themes mostly use the same code.

The add-on knows about the following files in this folder: reviewer.js, reviewer.css, congrats.js, congrats.css. Any can be omitted if not needed for the theme.

The add-on expects reviewer.js to define the following global functions:

• window.avfReviewStart(): Called when review starts.
• window.avfAnswer(ease): Called when you rate a card, where ease is the string "again"|"hard"|"good"|"easy".
• window.avfIntermission(): Called when you repeatedly fail cards and need a break.

You're free to implement these functions as you like. The default themes handle image display there, while sound playback is actually done by the add-on's code.