Collection of customizable Anki flashcard templates with modern and clean themes.

Related tags

Learning resource theme light-theme dark-theme templates anki
Overview

Anki Templates

Collection of customizable Anki flashcard templates with modern and clean themes.

About

Designed all the way from scratch, the goal is to make flashcards much more interesting to look at and reduce distractions, all while maintaining the robust functionality Anki offers or even improving upon it.

If you like my work, please consider supporting.

Features

  • Automatic dark and night theme switching
  • Responsive design - full support for desktop and mobile apps
  • Customizable color palette
  • Support for Basic and Cloze note types
  • Tags for quick context
  • Click and hold to expand images
  • Preferences for tweaking optional features

Themes

Minimal

minimal-demo

Instructions

Direct download

  1. Download the demo deck file ({theme}-basic.apkg or {theme}-cloze.apkg)
  2. Open Anki and click on Import File
  3. Select the downloaded deck file
  4. The new note type (basic-{theme} or cloze-{theme}) should be created automatically
  5. Use the note type as it is or clone it

Manual method

  1. Create a new note type (See Adding a note type)

  2. Click on Cards in browser mode

  3. Copy the contents of front.html and back.html into the Front and back templates of the note type

    Important: For cloze notes, the field Back Extra should be renamed to Extra (this is the name used in the template)

  4. Copy the content of style.css into the Styling section

  5. You can now use the new note type in your collection

Add-on support

The following add-ons are currently supported

Note: Add-ons are optional and not necessary. The templates work as expected with or without the addons.

Compatibility

Tested on

  • Desktop: Anki 2.1.49 (Mac)
  • Mobile: AnkiDroid 2.15 (Can someone test on iOS?)
  • Browsers (AnkiWeb): Chrome(97.0.4692.71), Safari(15.0)

Requirements

  • Anki 2.1 or higher (should work with even Anki 2.0)

Plans for future

  • New theme
  • Support for more card types (AnKing, IO enhanced, etc.)
Comments
  • Long code lines do not wrap to the next line

    Long code lines do not wrap to the next line

    Hey, thanks for your great work on this template.

    I notice today that long code lines (when in code blocks) do not wrap to the next line.

    Attached is a screenshot.

    Thank you! IMG_3790

    opened by rezaemortaza 4
  • adding new feature

    adding new feature

    hi thanks for your amaizing work it isgreate. could you please add the clickable feature to ankidroid version? i mean like desktop anki when we click on the tags on ankidroid it opens a browser and shows us the related cards

    enhancement 
    opened by dumbdreamed 3
  • Recolor of mochi-cloze not working with mathjax blocks

    Recolor of mochi-cloze not working with mathjax blocks

    I found this problem when trying to format equations using the mochi-cloze note type

    So, when using MathJax in-line with cloze, i.e.

    <!-- I'm in-line mathjax and can have mathjax inside the cloze anyway -->
{{c1:: \( 2+2=5 \) }}

    there is no problem. This is blue, since it gets styling from .cloze. However, when using MathJax with the block attribute set to true, things get a bit funky. The following cloze will work styling-wise (be blue), but will be horribly unaligned and not spaced properly

    <!-- I'm blue (da-be-di) but oh so unaligned! -->
{{c1:: \[ 2+2=5 \] }}

    Anki seems to be able to solve this if the cloze is instead put inside the MathJax block, like so

    <!-- I'm aligned but not blue :( -->
\[ {{c1:: 2+2=5 }} \]

    which aligns everything properly, but in the meantime yeets the styling out the window!

    So basically: Cloze captions inside MathJax are not styled properly

    I have so far been unable to find much information in regards to mathjax and cloze.

    opened by ginger51011 1
  • Remove Zoom On Hover?

    Remove Zoom On Hover?

    Could you please tell me how I could have the back of the card image zoomed in without having to hover over it? I tried to change it to active but that just left it as a tiny image, not it's max size. Thank you.

    opened by nmeed 0
  • Breadcrumbs do not work as intended.

    Breadcrumbs do not work as intended.

    Love the theme, however came across a bug. Testing on Version ⁨2.1.54 (b6a7760c)⁩ and Python 3.9.7 Qt 6.3.1, the breadcrumbs are not working. See screenshot:

    image

    I have only changed the color variables and font, so it looks a bit different.

    opened by niv-dev 2
Releases(0.1.1)

  • 0.1.1(May 24, 2022)

  • 0.1.0(May 20, 2022)

    What's new

    • Added 2 new themes - Nord and Dracula
    • Added a new feature - "breadcrumbs to current deck"
    • Complete rewrite of templates and styles
    • Same templates are now used for all themes
    • Download links to custom fonts

    Improvements

    • More CSS custom properties
    • Added SCSS files
    • BEM naming for class names

    Fixes

    • Fixed images not center-aligning on AnkiDroid
    • Fixed tables not colouring properly

    Full Changelog: https://github.com/pranavdeshai/anki-prettify/commits/0.1.0

    Source code(tar.gz)
    Source code(zip)
    prettify.apkg(288.21 KB)
Owner
Pranav Deshai
Medical student, programmer by hobby. The Office fan.
Pranav Deshai
GitHub
Personal project to a student schedule classes according his course level. Using GraphQL, Clean Code e Clean Architecture.

classes-scheduler-graphql This is a personal project for student scheduling, with classes according his course level. I intend to make just the backen

Giovanny Lucas 6 Jul 9, 2022
Collection of Rowy's templates for cloud functions cod snippets - including for derivative, action columns and extensions.

Rowy Templates Collection of Rowy's backend templates and code snippets for cloud functions - including for derivative, action columns and extensions.

Rowy 4 Nov 16, 2022
⚡️ A collection of open-source solution templates to integrate within Buildable Flows.

Buildable ⚡️ Buildable is an instant backend tool that makes a software developer’s day more delightful. We’re helping engineers breeze through featur

Buildable 161 Dec 15, 2022
A modern, clean design can be customized and applied for a wide range of purposes

Gatsby starter for projects portfolio with Flotiq source Kick off your project with this hello-world boilerplate. This starter ships with the main Gat

flotiq 13 Oct 4, 2022
Powershell scripts and Update script for Powershell configs and oh-my-posh themes

windows-powershell-autoconfig What is it? It is a NodeJS Project which updates your powershell and oh-my-posh scripts. Why should I use it? It is very

Skender Gashi 6 Dec 28, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Shaun Bharat 12 Oct 10, 2022
🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

Bytedance Inc. 6.8k Jan 5, 2023
Statichunt is a free open-source Jamstack directory that lists hundreds of themes, starters, and resources for Jamstack sites.

Statichunt Statichunt is an open-source directory that enlists hundreds of themes, starters, and resources for static site generators submitted by the

Statichunt 12 Dec 29, 2022
Additional themes for Lovelace Mushroom Cards 🍄

?? Mushroom Themes Mushroom themes allow you to customize your Mushroom dashboard using Home Assistant themes. ⚠️ It's only a theme! You need to insta

Paul Bottein 127 Dec 24, 2022
MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

MDN-Dark-Mode Information Chrome and Firefox extension that adds a dark mode wit

Santiago Galán Barlo 2 Mar 18, 2022
🦚 Beautiful themes for CodeMirror

ThemeMirror Beautiful themes for CodeMirror Install npm install thememirror

Vadim Demedes 119 Dec 27, 2022
Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Crayon Syntax Highlighter Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. Written in PHP and jQuery. Cra

Aram Kocharyan 1.1k Nov 26, 2022
Toolkit for authoring Nuxt Themes.

@nuxt-themes/config Toolkit for authoring Nuxt Themes. Features ✨ Lets you create a theme from any Nuxt project ?? Handles theme.config.ts file ?? Off

Nuxt Themes 28 Dec 6, 2022
Themes for your linux desktop.

Nova-galactic-theme Inspired by the Nordic Darker theme, but adjusted for coherency and simplicity. The theme includes configs for cinnamon, gnome-she

NickV 28 Jan 2, 2023
LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

Sam Zhang 14 Aug 26, 2022
A lightweight, modern and customizable JavaScript slider library.

NSlider NSlider is a lightweight (< 10 KB), modern and customizable JavaScript slider library. CDN Development https://cdn.jsdelivr.net/gh/fatihege/ns

Fatih 6 Jan 20, 2022
Obsidian-Snippet-collection - A collection of snippet to customize obsidian

This repo is a collection of CSS snippets for Obsidian.md. To install them on PC

Mara 110 Dec 22, 2022
This repo contains the templates used in my automated obsidian weekly review video and also an accompanying vault with the folder structure expected and plugins

This repo contains the templates used in my automated obsidian weekly review video and also an accompanying vault with the folder structure expected and plugins (periodic note settings etc)

Pamela Wang 53 Dec 21, 2022