Template Color Highlighter & CSS Color Picker

AnkiWeb addon 1578859788

Adds live color badges, click-to-pick color editing, instant preview updates, and syntax highlighting to Anki's card template editor.
AI-generated summary; may contain mistakes.

formattingappearancecard-templates

Open on AnkiWeb Find alternatives

AnkiWeb

Votes
0 (๐Ÿ‘ 0 ยท ๐Ÿ‘Ž 0)
Updated
2026-09-18
Anki versions
2.1.66~
License
Not found (this does not mean that the addon has no license)
Virus scan
No ClamAV match A match does not prove malware. No match does not prove that the code is safe.
Languages
Python, JSON
Description language
en

Maintenance

active

  • Last update or commit: 2026-09-18 (44 days before the snapshot).

GitHub

No GitHub repository linked.

Will it work on my Anki?

Version branches
Min AnkiMax AnkiUpdated
2.1.502.1.66+2026-09-18
History across monthly snapshots

Loadingโ€ฆ

Similar addons

Style Buttons for Editor๏ผˆby Scarlett) โ€”โ€” ๆ นๆฎ็ฌ”่ฎฐ็ฑปๅž‹็š„ CSS ่‡ชๅŠจ็”Ÿๆˆๆ ทๅผๅฟซๆทๆŒ‰้’ฎ

Parses a note type's CSS custom classes into one-click editor toolbar buttons that wrap or unwrap selected text, with drag reordering, previews, shortcuts, and customizable settings.

formattingshortcutsappearancecard-templates

3 votes 44% approval ๐Ÿ‘ 3 ยท ๐Ÿ‘Ž 0 โญ 0 Anki 25.09.4~ Updated 2026-08-04
Anki-Coder

Adds a CodeMirror code editor to Anki flashcards with syntax highlighting, themes, live preview, double-click editing, configurable languages and note types, and mobile and cloze-card support.

formattingappearancemobile-compatible

9 votes 45% approval ๐Ÿ‘ 7 ยท ๐Ÿ‘Ž 2 โญ 4 Anki 25.07.6~ Updated 2026-04-22
Deck Colors

Colors deck names in the browser via a graphical interface with color pickers, live preview, and apply/remove controls.

deck-managementappearance

8 votes 31% approval ๐Ÿ‘ 5 ยท ๐Ÿ‘Ž 3 Anki 25.02~ Updated 2025-08-23

Description

๐ŸŽจ Template Color Highlighter & CSS Color Picker

Bring the power and beauty of a modern code editor into Anki's Card Template Editor (Cards... / Card Types). Never struggle to visualize colors or manually type hex codes again!

โœจ Features

  • ๐ŸŽจ Real-time Inline Color Badges: Every color code in your CSS (#3498db, #fff, #ff0080aa, rgb(...), rgba(...), hsl(...)) is rendered with a live colored badge right in your code! Features dynamic luminance calculation so the text is always crisp and readable (white on dark colors, dark on light colors).
  • โšก Interactive Color Picker (Click-to-Pick): Double-click (or Ctrl + Click) directly on any color code to open the system color picker. Choose your new color, click OK, and the hex code is instantly replaced!
  • ๐Ÿ”„ Live Card Preview: The moment you pick a color, Anki's live preview pane on the right updates instantaneously. No saving or reopening required!
  • ๐Ÿ–Œ๏ธ Clean & Beautiful Syntax Highlighting:
    • Styling Tab (CSS): Classes (.card-box), IDs, properties (font-size:, color:), numbers & units (px, rem, %), strings, variables (var(--...)), and multi-line comments (/* ... */).
    • Front & Back Tabs (HTML & Mustache): HTML tags (<div>, <span>), attributes, and Anki template tags ({{Front}}, {{Back}}, {{cloze:Text}}, {{#Tag}}).
  • ๐Ÿ–ฑ๏ธ Context Menu Integration: Right-click anywhere or on a color to access "๐ŸŽจ Pick Color...".
  • ๐Ÿงผ 100% Native & Clean: No invasive buttons or bloated UI elements. Everything works seamlessly within Anki's native editor.

โŒจ๏ธ How to Use

  1. In Anki Desktop, open any deck or the Card Browser and click Cards... (Card Types).
  2. Go to the Styling tab: notice all your CSS colors now have visual color previews!
  3. Double-click or Ctrl + Click on any hex code (e.g. #3498db).
  4. Select your new color in the palette and click OK. Watch the card preview on the right update instantly!

โš™๏ธ Configuration

In Anki Desktop, go to Tools > Add-ons > Template Color Highlighter > Config to customize:

  • enable_color_badges: Enable or disable colored backgrounds on color codes (default: true).
  • enable_double_click_color_picker: Open color picker on double click (default: true).
  • enable_ctrl_click_color_picker: Open color picker on Ctrl + Click (default: true).
  • enable_context_menu_color_picker: Enable right-click context menu option (default: true).
  • hex_format: Format output as "lowercase" (e.g. #3498db) or "uppercase" (e.g. #3498DB).
  • enable_syntax_highlight: Enable syntax highlighting in the editor (default: true).
  • enable_html_highlight: Enable syntax highlighting for Front/Back HTML and Mustache (default: true).

๐Ÿ’ก Compatibility

Compatible with Anki 2.1.50+, Anki 23.x, Anki 24.x and Anki 25.x+ on Windows, macOS, and Linux. Works seamlessly with Anki's built-in Dark and Light themes.

Developed by @alyxhard - https://github.com/alyxhard

GitHub Profile