[Resources] Cross-platform Card design

Anki Card Design
5

  1. AnkiWeb dark mode (reference issue, another one)

    The code below can be used to add an AnkiWeb dark mode toggle to a card. It will activate the same classes that are available on other Anki platforms by default, making any template automatically apply its dark-mode styling as long as it has any. The toggle state persists across different cards, browser sessions and is shared by all templates that have the toggle embedded:

    image
    image554×433 8.43 KB
    image
    image554×433 8.56 KB

    Minimal dark mode toggle

    The checkbox code (can be put in any convenient place in a card template):

    <input id="dark-mode-toggle" type=checkbox>

    Script for adding to both back and front side templates (the latter is not necessary if it takes advantage of the {{FrontSide}} replacement):

    <script>
// dark mode toggle
(() => {
const toggleMode = (darkMode) => {
  const cardL = document.querySelector(".card");
  if (darkMode) {
    document.documentElement.classList.add("night-mode");
    cardL?.classList.add("nightMode");
    cardL?.classList.add("night_mode");
  } else {
    document.documentElement.classList.remove("night-mode");
    cardL?.classList.remove("nightMode");
    cardL?.classList.remove("night_mode");
  }
}

const toggleL = document.getElementById("dark-mode-toggle");
toggleL.checked = (localStorage.getItem("darkMode") ?? "off") === "on";
toggleMode(toggleL.checked);

toggleL.onchange = () => {
  localStorage.setItem("darkMode", toggleL.checked ? "on" : "off");
  toggleMode(toggleL.checked);
};
})();
</script>

    Styling for hiding the toggle on any platform other than AnkiWeb:

    #dark-mode-toggle {
    display: none;
}
#qa_box #dark-mode-toggle {
    display: inline-block;
}

    Also, for a basic note type, the default reviewer dark mode styles can be useful (appended to the style resets from the first post):

    html:has(#qa_box.card.nightMode) #ansarea,
html:has(#qa_box.card.nightMode) {
    background-color: #2c2c2c !important;
}

body:has(#qa_box.card.nightMode),
#qa_box.card.nightMode {
    color: #fcfcfc;
}

#qa_box.card.nightMode input[type="text"] {
    color: white;
    background-color: rgb(59, 59, 59);
}

    (AnkiWeb interface – the header, buttons, counters, etc. – can be adjusted in dark mode too, but the respective styles are not included in the sample to keep it simple)