Memrise card template [support thread]

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).