Memrise card template [support thread]

It’s a known issue apparently and will get solved in the new reviewer (someday). Issue: Move reviewer gesture detection to Javascript · Issue #14303 · ankidroid/Anki-Android · GitHub

2 Likes

This is amazing, thanks for making this!

What I am trying to do is make Anki read my kid a spelling word (English!) and then let him type in in (in English) and automatically grade it for him. I think this template has all the right stuff in there, but I’m kinda lost on how to adjust it. Mind helping???

As far as I know, Memrise wasn’t supporting commas as alternative answer separators either (at least in its later versions). I use the linked spec as a reference, so while it is not yet fully implemented, you should be able use semicolons to separate several possible answers to a question in the current version of the template without any adjustments.

In general, if you want your cards to support other separators, you can look for the following piece of code on the backside of the respective card type:

correctAnswerFull.split(/[;;]/)

and then add the needed characters alongside the semicolons.
Just be aware of regex rules for escaping special characters, such as slashes, and keep in mind, that any changes made to this part of the code will have to be reimplemented again if you update your template (I’ll probably make it easier to adjust in the future versions).

Sure thing.

If this is the only purpose you want to use the template for, you can simply take the “template” Note Type (not the “preset” one) from the template deck and, when making cards, put the English words in the “Learnable” field and the audio files for the words in the “Definition” field. No other changes necessary.

If you don’t have existing audio files, you can either record them yourself when making cards with Anki’s recording functionality:
image
or choose to use text-to-speech instead for generating audio automatically and on the fly. In the latter case, you’ll have to make two modifications to the front of the card, deleting the {{Definition}} conditions at the beginning and the end, and changing the field in the question section from {{Definition}} to something like {{tts en_US:Learnable}}:
image
the tts line can also be modified to use different voices (see the linked reference to Anki manual for more info). For even more options and better pronunciation, you might want to use specialized addons (although that will require some additional setup and will only affect desktop versions of Anki).


For extra info on customizing the template itself (e.g, giving fields more appropriate names, deleting redundant ones, or adjusting the on-screen keyboard) you might want to take a look into the links gathered in this section, but I’ll also be happy to help if you’ll require more specific instructions.

Hello!

I created multiple choices containing symbols (Mathjax typeset), when I click that choice with symbol/equation, it does not highlight it as red (wrong) but for other plain text such as “2b”, “b”, it works well. See attachment for more info.

I just want to ask what should I change in the program so the equations can be included.

1 Like

This one is tricky, and I’m not sure how well if will work right away, but if you are up to some testing, this might help the development of the template quite a bit.

The last fully released version of the template (v3.32) does not support any type of options in multiple-choice questions other than plain text. The current dev branch is capable of this but it doesn’t work with Mathjax as is. I’ve set up a new branch for testing the necessary changes to the script here:

The content of the .html is supposed to be placed in the Front and Back template tabs of your card type and adjusted accordingly, the Styling tab should use the contents of the .css file.

I’ll try though I don’t have enough knowledge to the code. I tried also images doesn’t work. Does turning the symbol (mathjax) in the choices into an image will make it less tricky? Anyway, thanks for help! Still amazing and will use regardless.

You don’t have to do much with the code other than copypasting it from the source I provided. If you struggle with locating the destination, it can be accessed by finding any cards with your Note Type in the Anki browser and clicking Cards, or by going to Notes from the overhead menu then Manage Note Types, selecting the one you want to modify and clicking Cards.

As I’ve mentioned, images are only supported by the newer developer versions (v4.1 and onwards).


To an extent. There are two issues with Mathjax:

  1. With the default configuration it attaches a right-click menu to each formula, adding an ordinal menu number to the code, which is different each time the formula is displayed. This causes a mismatch between the front and the back of the card, preventing the card script from recognizing the option you clicked. Converting formuli to images should fix this one.
  2. Mathjax is itself a standalone script running independently from the card scripts, meaning that sometimes it executes before card scripts, and sometimes after. Thus, in order to reliably check the answer, card scripts will need to identify somehow the raw Mathjax code and its converted results as the same equation (the code I provided in the previous post does exactly that). Converting to images probably won’t help with this issue. One could add a small delay for card scripts to combat this, but I’m not sure how consistently it will work.

In any case, in order to use images as multiple-choice options you will still be required to update the version of your template. If you don’t feel comfortable doing this manually, you can simply wait for the next release, so that you’ll be able to download the new template and apply it just as the old one.
I know, it’s been a few months in development already, but I just merged two last major branches yesterday, so it shouldn’t be that much longer at this point. There are only a few small patches (I’ll try to include the Mathjax one among the others) and testing left. After that, I’ll upload the complete .apkg version on GitHub and Ankiweb, and also make a post here.

Hey, I noticed the multiple choice keys now work with the keyboard, but I can’t rate my answers (1, 2, 3, 4) using the keyboard. Is there a way to fix this?

1 Like

Yes, just update to the new version of the template. I uploaded it on github yesterday, and will make a dedicated post about the update here, once I finish documenting all the changes.

UPD: also available on AnkiWeb now

It worked! Thank you very much! We appreciate you. :smiling_face_with_three_hearts:

1 Like

The template was updated to Version 4.2 on both GitHub and Ankiweb a while back, so here is the post detailing all the improvements from the previous versions of the template. This one is rather a big update (probably bigger than all the other updates posted here before combined), so, hopefully, it meets the expectations for all the requests it is intended to fulfill and is worth the long wait.


1) The single most significant change is the transition to a completely new system for typing and handling answers. This should keep all the existing things working exactly as before while removing several crucial limitations of the previous versions adding:

  • Full Anki Mobile (iOS) support
    All the features, such as multiple-choice questions, Memrise on-screen keyboard, spelling diffs, the hing button, etc. will now be functioning on iPhones and iPads (huge thanks to rean and amaccuish for all the assistance with testing and suggestions):

         

    Several minor differences with other platforms still remain, but none of them should limit the use of the template:

    Details
    1. Card flipping and answer auto-grading are unavailable on iOS, and, sadly, will likely remain that way unless the Anki Mobile app itself incorporates the necessary functionality. This doesn’t mean, however, that using the cards will require any extra decision-making with regards to the Anki grading buttons: the answer coloring is fully functioning, so one will simply have to make a habit of pressing the “Good” button whenever the typed answer shown in green, and “Again” otherwise. Similarly, the multiple-choice cards will have to be manually flipped after an answer is selected.
    2. The icons on the audio buttons look different, and the Hint button icon is omitted by default. This is due to the iOS web browser being behind all the other ones in supporting the respective dependency. It might catch up in the future, in which case all the cards made with the current template will automatically start to look as intended. In the meantime, if you want to display the icon for the hint button, you will need to replace manually the <path> on the front of the card
      image
      with the following code:
          <path d="M6.113 4.508c-.324-.892-.606-1.643-1.648-2.014.865-.54 1.18-1.296 1.448-1.937.083-.2.162-.39.252-.557.064.147.125.31.188.479.26.698.563 1.51 1.333 1.775-.863.658-1.24 1.315-1.573 2.254Zm2.37 2.702c.492.478 1.005.936 1.537 1.37.694-.851 2.16-2.522 2.16-2.522s-1.08-.948-1.676-1.34c-.216.171-2.129 2.387-2.021 2.492Zm2.1-3.379c.643.22 1.187.638 1.688 1.105.209.194.41.397.609.598.35.353.04.95-.23 1.322-.367.505-5.307 6.553-7.8 9.606l-1.144 1.4c-.198.243-.47.127-.715-.058l-1.618-1.225a1.407 1.407 0 0 0-.21-.13c-.102-.055-.168-.09-.275-.274-.165-.283-.204-.624.006-.868.22-.257 1.05-1.326 2.128-2.717 2.645-3.41 6.79-8.754 7.154-8.817a.835.835 0 0 1 .407.058ZM4.636 4.868c-.063.118-.116.26-.17.408-.128.343-.267.717-.576.893.442.312.63.734.8 1.212.112-.525.347-1.041.77-1.276-.378-.137-.53-.526-.667-.877-.051-.13-.1-.254-.157-.36Zm-2.1-.478c-.055.148-.108.29-.171.408-.057-.105-.106-.23-.157-.36-.137-.351-.29-.74-.667-.877.423-.234.658-.751.769-1.276.17.478.359.9.8 1.212-.308.176-.447.55-.574.893Z">
      
      I can also provide anyone interested with similar instructions to replace the audio icon.
    3. The layout on the backside of the cards is a bit different, centering all of the sections instead of aligning them to the left. This, probably, can be fixed, but will require someone with the Anki Mobile app to volunteer and perform the testing for potential solutions.
  • Images in multiple-choice questions
    The multiple-choice cards now work with practically any type of answers (save for audio) supporting formatted HTML (bold, italic, and colored text, lists, etc.), LaTeX (more on this below), and all image formats recognized by Anki (including animated gifs):

    Image and other kinds of choices can be filled in the exact same way as the plain text ones using the support addon. All the kinds can even be mixed with each other freely. In order to make several multiple-choice card types (e.g. one for image fields and one for text), one has to make several {{Choice}} fields and fill them accordingly, as described in this post.

    In regard to the images in general, the style for the “Your answer” section on the back of the card is also adjusted to account for image answers, and the style of images in the question sections is reworked to follow the Memrise design exactly.

  • Spelling diffs on Android now work independently of the input device
    image
    This means another limitation (mentioned in the fine print of the on-screen keyboard section in this post and also reported by @mthierst here) is no longer relevant.
    :triangular_flag_on_post: Please note :triangular_flag_on_post: , that with the new system, the “Type answer into the card” setting is now mandatory on AnkiDroid (otherwise Android keyboard won’t appear for typing):

    how to enable

    Although the new scripts are rewritten in a way that preserves backward compatibility, so if anyone finds a value in the old way of typing on Android, I can provide some instructions for reverting to it


2) Dark mode and alternative themes

I’ve noticed from the screenshots (posted by @khong and @HQYang in this thread as well as several other people in GitHub issues) the template doesn’t look very good when Anki is switched to the dark mode. Since Memrise itself does not have a dark color scheme, I’ve decided to make one myself and incorporate it into the template:

For comparison, the look of the template in dark mode before the dedicated theme

Since this style is completely original, feedback on the change would be especially welcome. This update required a major refactor of the template’s CSS, but in the end allowed making more variations very simple. For example, here is an Anki theme for the template in the light mode:

It can be activated by typing its name in the “theme” attribute on the front of a card:

image

In addition to that, a default color scheme (for the case of this attribute being left empty) and two other ones (named “Forest” and “Sunset”) are included in the template styles. Each with proper light and dark modes:


These themes can be useful for color-coding cards with different translation directions/question types or for different courses/languages/etc. It is now possible to adjust any of the existing ones or make a completely new theme with minimal effort (refer to this post for the details).

On that note, is there anyone interested in a theme replicating the Classic Memrise look (circa 2014)?


3) Alternative answers

Alts can now be put inside any of the template fields (as requested by the Chrome extension users and also mentioned by amaxwell311 here). These alts function the same way as on Memrise – hidden when a field is used as a question, shown on the back of a card with smaller and fainter font, and properly processed when a submitted answer is being rated:


To add an alt to a field

In Anki editor open HTML code of the field by pressing the image icon in the top right corner, then after the main content type

<div part="alt">

and

</div>

putting the alts inside:

If several alts are needed, they can be separated by | symbol (as in the image above) or put into separate <div part="alt"> tags. The proper styles for the alts in the editor as well as a button for automating this action will be added in the upcoming version of the support addon. The <div part="alt"> can also be put on a card template itself (in particular, inside <data id="correctAnswer"> for the answer checked by the template) and used to combine several different fields for each to be accepted as a valid alternative.

In the current version, only plain text (and LaTeX) works properly with the <div part="alt"> (is there a need for other types of answers?), but it can be used with multiple-choice mode to make cards with several possible answers:


4) LaTeX (MathJax) support
Per request from @Zelkii the support for LaTeX expressions (entered as MathJax) has been added, and should work on all platforms:

Because LaTeX syntax does not play well with the default Memrise answer evaluation rules (it requires case-sensitivity, interprets commas and semi-colons differently, ignores spaces in certain places, etc.), this is implemented as a separate answer evaluation mode, which should be explicitly activated if a math card is manually created from a basic template. This is done by adding “eq” to the list of the card classes on the front of a card (the same way the multiple-choice cards are made):
image
(there is no need to add this class if a LaTeX expression is used as anything other than the answer of a card)

The LaTeX mode is not only compatible with multiple-choice questions but works well with type-in cards as well. It accordingly highlights mistakes in the LaTeX syntax of a typed expression (providing a display of a rendered typed expression to visualize differences), automatically adds enclosing \( and \) when needed, and accounts for multiple ways of typing the same equation (e.g. “x^2_3” and “x_3^2” are treated as identical expressions):

  


5) Number keys in multiple-choice cards

If you are using the support addon, since the last update number keys (from 1 to 0) can be used to select an answer in multiple-choice cards (as intended). This will work even with older versions of the template, as long as the addon itself is updated.

:triangular_flag_on_post: Important :triangular_flag_on_post: : in order to make these keys available for the template the addon removes them from the list of default Anki shortcuts. So number keys will no longer work for rating cards “Again”/“Good”/… on other templates without additional adjustments described below (already included in the Memrise template and are not needed if you do not use anything else)

Required adjustments
  1. Go to ToolsManage Note Types → Select a Note Type you need to modify → Click Cards (or simply click Cards in Anki browser when any of the cards belonging to the Note Type is selected)

  2. Switch to Back Template and search for “document.onkeydown” to check if your template already uses any keyboard shortcuts (most of the templates do not, in particular, none of the Anki basic templates do). Also, if there is “{{FrontSide}}” on the Back Template tab, the front side should be checked as well.

  3. If the “document.onkeydown” is not present on the card, simply add

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if ("1234".includes(ev.key)) {
    		try {
    			pycmd('ease' + ev.key);
    		} catch(err) {}
    	}
    }
    </script>
    

    to the very end of the Back Template code.

    However, if the “document.onkeydown” is somewhere on the card, you will have to merge the two, copying the inner part of the code above into the function already included in your template and renaming “ev” to match the variable in that function (ask me for instructions if unsure).

  4. Repeat the steps 2-3 for each Card Type in your Note (switched at the very top of the window) and click Save


    You might want to also restore the functionality for “Enter” and “Space” to flip the cards and rate them “Good”. In that case, the code for the front side is

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if (ev.key === 'Enter' || (ev.code === 'Space' && document.activeElement.tagName.toLowerCase() !== 'input')) {
    		try {
    			pycmd("ans");
    		} catch(err) {}
    	}
    }
    </script>
    

    and the full code for the back is

    <script>
    document.onkeydown = function (e) {
    	var ev = window.event || e;
    	if (ev.key === 'Enter' || ev.code === 'Space') {
    		try {
    			pycmd('ease3');
    		} catch(err) {}
    	}
    	if ("1234".includes(ev.key)) {
    		try {
    			pycmd('ease' + ev.key);
    		} catch(err) {}
    	}
    }
    </script>
    

If you do not wish to modify other templates this feature can simply be turned off, by going to the add-on configs (ToolsAdd-onsMemrise Cards (Lτ)Config) and removing all relevant keys from the “reserved keys” list.


6) Several improvements that facilitate scripts and styles customization

  • There are now dedicated sections for user scripts on the front and back cards, as well as in the styling tab. This should make transferring personal modifications when updating the template’s version easier (it is planned to add the functionality making such transfer fully automatic to the support addon in the future)

  • In addition to the “.large” and “.off” classes mentioned in the thread before, several other classes for common customizations were added. The full list now consists of “.large”, “.blob”, “.off”, “.desk-off”, “.mobile-off”, and “.no-alts”. Details and usage examples for each one will be provided in the upcoming customization post.

  • Similarly, the template now checks several special JS variables. They are intended to be put inside the “user script” sections mentioned above, and made to control certain aspects of the scripts without digging deep into the code:

    • alwaysShowInfo is a variable that allows displaying the info screen (back of the card) even when a correct answer is submitted (instead of automatically transitioning to the next card) simply by adding

      alwaysShowInfo = true;
      

      to a card. It is intended to accommodate needs similar to the requests made by @Luze94, @Hosoy99, @mthierst, @koracito, and @asiasiaa asking for various ways of viewing extra fields on passed cards. In contrast to the original Memrise style, the info screen with the correct answer displays it in green (as a reminder that it will be autorated “Good” on the next press of “Enter”). This is a default behavior on iOS (since, as mentioned above, automatic grading does not work there anyway).
      In addition to that, opening the info screen after correct answers can be done on a card-to-card basis simply by pressing “Space” instead of “Enter” – this way no changes to the code are needed, and the cards can still be immediately flipped to the next by pressing “Enter”.

    • flipDelay is the variable to adjust the delay before a card is auto flipped to the next one or the info screen (depending on the submitted answer and the card settings). Instead of the instructions I provided before in responses to @asiasiaa, @mthierst, and @butter_muffin, in the new version of the template this adjustments is done simply by putting

      flipDelay = 5;
      

      into the “User Scripts” section (the number 5 corresponds to the desired delay in seconds and can be adjusted accordingly).

    • other variables cover adjustments such as changing the number of keys on the card’s on-screen keyboard (randomKeysN), the maximum number of options in a multiple-choice card (mchOptionsN), and the number of columns in multiple-choice cards (details and usage examples for each variable will be provided in the upcoming customization post)


7) ALL known bugs have been fixed
This includes:

1 Like

Hello, is it possible to add a delete button? when I touch the buttons on the cell phone and I make a mistake, how do I delete it if the virtual keyboard does not appear?

Are you on Android? Don’t forget to turn on the “Type answer into the card” toggle in the settings, it will bring the keyboard back

Thanks for answering, yes, I have it activated for other decks, I also think it would be useful to add buttons, which are not characters as such (delete, tab, shift) I tried to do it with ChatGPT and although I managed to do it, I realized that all the buttons that are in the template have a slow response when pressed in the mobile version, then I will look at it in more detail but that lag is annoying

Sure, this can be done, I’ve made a note for the future versions here. But what could you possibly need tab and shift buttons for?

That’s not an issue with the template though. You can compare it with the basic buttons in the cards here.

The idea I have for the shift buttons was to easily swap between uppercase and lowercase Greek letters
Alpha - α (lowercase) / Α (uppercase)
Beta - β (lowercase) / Β (uppercase)
Gamma - γ (lowercase) / Γ (uppercase)
The “Tab” key I thought of to jump from one text box to another, just like there are cloze type cards numbered one after the other, doing it like this but in this case writing each answer in a different box, I tried adding the additional boxes and it seems to work but I still need to improve it and see it well.

That’s not an issue with the template though. You can compare it with the basic buttons in the cards here.

So the issue that in the mobile version the buttons work with a certain delay is something that should be improved in the app :saluting_face:since on PC it is fine

In the current version, the template ignores capitalization when checking the answer, so it’s not really necessary.

If you have such a case, it would be wise to split the reviewed information across multiple cards. You can make use of several card types per note to keep all interconnected info in a single entry.
I’d say this one is too niche to be implemented in the general template, but if you are looking for directions on how to make it possible, I might be able to provide some help.

Probably not even with the app itself, but with the mobile web engine it is built upon. Or this might be something specific to touchscreen input

Theme customization

Since v4.2 of the template it is possible to select different themes included in the template and easily make new personalized color schemes. This post details all the relevant information about the feature.

1. Template themes

Themes included in the templates can be selected simply by entering the respective name into the “theme” attribute on the front of a card (ToolsManage Note Types → Select a note type made from the Memrise template → Cards):

Capitalization matters! After changing a theme click Save at the bottom right corner.

Note, that theme is a per card-type setting, so for template variants with multiple card types (e.g., text/audio/multiple-choice) one has to set it for each type individually (or not. it can help differentiate between various types of required answers just as well). Card types are selected at the top of the template editor window:

image

The names available for selection out of the box:

  • MemRise
    The authentic MemRise theme (as it was in 2021-2023, there were some minor changes to the site after the template was created). In the dark mode it uses an original color scheme developed for the template specifically. This is the preselected theme in the template’s distributed decks.
  • AnkiRise
    An original theme is composed purely from the native Anki colors to achieve a clean high-contrast look for the cards, which would go well with the app’s own interface.
  • Forest
    An original green-shaded theme.
  • Sunset
    An original theme with a pinkish-blue palette.
  • default / no theme
    The fallback color scheme to be used if the “theme” attribute does not equal to any of the names above (including being empty or missing). It uses all the native Anki colors in their original role, so if the app were to upgrade its color scheme this theme should adapt well to the changes. It also uses the original Anki way of coloring spelling diffs (missing as gray and correct as green, instead of Memrise way of coloring missing green and leaving correct as is).

Complete comparison table for all themes (click twice to view at full resolution):

2. Creating new themes

To make a new theme switch to the Styling tab of the template editor window

image

and scroll down to the following header:

/*=====================================================*/
/*                    🎨 THEMES 🎨                    */
/*=====================================================*/
/* create your own themes here */

This is the section where new themes are intended to go. To make a theme, first, you need to copypaste here the following code, changing “YourTheme” to a desired name for the new theme (in all three places):

body:has(div.card-content[theme="YourTheme"]) { 
    /* common */

}
body:has(div.card-content[theme="YourTheme"]):not(.nightMode):not(.night_mode) {
    /* light mode */

}
body:has(div.card-content[theme="YourTheme"]):is(.nightMode, .night_mode) {
    /* dark mode */

}

Don’t forget to also set the name of the created theme on the front of the card to see any further changes (instructions in the first point above). To switch between light and dark modes during the editing the Night Mode checkbox can be used. It is located in the second Options dropdown menu at the top right corner of the template editor:

To assign a color, you need to put a declaration into one of the three sections in the pasted code. Use the /* common */ section for things that are supposed to look the same in both light and dark modes, and sections /* light mode */ - /* dark mode */ to specify things for each of them individually. A declaration consists of two things: a variable (specifies what group of elements to assign a color two) and a value (what the assigned color will be). Use this cheat sheet to search for the names of the color variables defined in the template:

text version for copy-pasting
    --col-text: ;
    --col-focus: ;
    --col-bg: ;

    --col-input-text:  ;
    --col-input-border:  ;
    --col-input-bg:  ;

    --col-audio-fg:  ;
    --col-audio-bg:  ;
    --col-audio-passive:  ;
    --col-audio-container: ;

    --col-button-text:  ; 
    --col-button-border:  ;
    --col-button-bg:  ;

    --col-text-faint:  ;
    --col-sep:  ;
    --col-inset-bg:  ;

For the values any of the common CSS colors names can be used, or a specific color can be selected with a color picker:

For example, putting these two declarations

    --col-text: #E84624;
    --col-bg: royalblue;

into the /* light mode */ section changes the card’s main text color to the orange-red tone selected above and the background color to blue while the app is in the light mode, while keeping the default values for both in the dark mode.

In addition to the variables presented on the cheat sheet above, there are variables for coloring correct/incorrect answers and the spelling diffs used to highlight differences between the typed and expected answers on the back of a card:

Expand to view the full list
    --col-correct-text: ;
    --col-correct-border: ;
    --col-correct-bg: ;
    --col-close-text: ;
    --col-close-border: ;
    --col-close-bg: ;
    --col-wrong-text: ;
    --col-wrong-border: ;
    --col-wrong-bg: ;

    --col-spell-good: ;
    --col-spell-missed: ;
    --col-spell-bad: ;

Expand this section for some advanced customization instructions
  1. One thing that can not be changed via variables is the style of selected text. It still can be modified by directly accessing the respective properties, so one can use the following ruleset

    body:has(div.card-content[theme="YourTheme"]) ::selection {
        color: yellow;
        background-color: forestgreen;
    }
    

    to change selection styling in both light and dark modes of a specific theme

    or these two to set different styles for light and dark modes respectively:

    body:has(div.card-content[theme="YourTheme"]):not(.nightMode, .night_mode) ::selection {
        color: yellow;
        background-color: forestgreen;
    }
    body:has(div.card-content[theme="YourTheme"]):is(.nightMode, .night_mode) ::selection {
        color: forestgreen;
        background-color: yellow;
    }
    
  2. A similar approach can be used to single out individual elements and modify their properties, without affecting anything else bound to the same variables. For example, the following code

    body:has(div.card-content[theme="YourTheme"]) .mem-field:has(h3) label {
        color: #33aaff;
        font-size: 40px;
    }
    

    can be used to target a specific label on the back of the card, keeping other labels with the shared default styles intact:

    Finding the right selector (the .mem-field:has(h3) label part in the example above) will require a bit of CSS knowledge. If you’d like some help with it you can always ask a question in this thread. In general, searching through all instances of a connected variable (found in the cheat sheet above) should serve as a good starting point.

    The following two options might present a particular interest, as they allow changing the template’s fonts and scaling the whole layout uniformly (all other sizes in the template are calculated relative to this base font-size):

        font-size: 16px;
        --fonts: "Open Sans", "Meiryo", sans-serif;
    
  3. There are also some template variables for properties not related to colors. The following block contains the ones for width and radii of various borders:

        --border-width: ;
        --border-r1: ;
        --border-r2: ;
        --border-r3: ;
        --border-r4: ;
    

    while these variables can be used to change icons for audio and hint buttons:

        --path-play: ;
        --path-blob: ;
        --path-hint: ;
    

    (-play / -hint are expected in the form of a path() function, and -blob is a polygon())

    This block contains hights of on-screen keyboard buttons in different states:

        --elevation-idle: ;
        --elevation-hover: ;
        --elevation-pressed: ;
    

    (the values for these variables can be input in any of the CSS length units).


If one wants to adjust a specific color, as in

all the above instructions for finding the respective variable and setting its value apply. However, it is highly recommended to copy an existing theme as a whole and choose a new name for it before modifying any of its declarations. Otherwise, the future versions of the template might overwrite the made changes. The themes with names not included in the template itself will be kept intact.


:art: If you make a completely new theme and would like to share it with the community, you are welcome to post it here. Selected themes will be distributed with future versions of the template (alongside the due credit to the original author).

hi, i’m from vietnam. i really love your anki card template. i want you to help me a little bit. i want the hidden text on the back of the card can it be a different color, for example here: The text “a woman” is the text that needs to be filled in and in the ‘TEXT’ line i want it to be a different color like dark blue so i can easily see and distinguish it from the whole sentence. Again, thank for your template.