CSS Injector - Change default editor styles

AnkiWeb addon 181103283

Overrides Anki editor and field styling through editable CSS files, supporting night-mode, note-type, field-specific, and version-dependent style customization.
AI-generated summary; may contain mistakes.

formatting appearance

Open on AnkiWeb GitHub Forum topic Find alternatives

AnkiWeb

Votes: 21 (👍 21 · 👎 0)
Updated: 2023-02-21
Anki versions: 2.1.58~
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: JavaScript, Python, JSON
Description language: en

Maintenance

abandoned

Last update or commit: 2023-02-21 (1349 days before the snapshot).
Commits in the last year: 0.
Issues: 2 open, 2 closed.
Pull requests: 0 open, 0 merged.
Median first response: 34 hours (4 answered issues and pull requests).
Outside pull requests: 0% of 1 merged.

GitHub

Repository: kleinerpirat/anki-css-injector · more by kleinerpirat
Stars: ⭐ 9 · forks 2 · open issues 2
Last commit: 2023-02-21
Languages: TypeScript, JavaScript, Shell, Python, CSS
Tests: 0

Will it work on my Anki?

Version branches

Min Anki	Max Anki	Updated
2.1.45	2.1.49	2022-05-28
2.1.50	2.1.58+	2023-02-21

History across monthly snapshots

Loading…

Similar addons

syntax highlighting FORK (css only, night-mode) fork

Provides CSS-based syntax highlighting for code in Anki cards, including night mode, with batch template configuration.

note-management formatting appearance card-templates obsolete fork-or-reupload

Custom Styles (font color, background colour, classes)

Adds editor buttons, shortcuts, and context-menu options for quickly applying font colors, background colors, font sizes, custom CSS classes/styles, and text wrappers.

formatting shortcuts appearance mobile-compatible

Advanced Card Styles

Enables customizing Anki card styles without CSS through profile selection, import/export, and a live-preview advanced editor, including text, cloze, extra field, image, and timer options.

formatting appearance

Content Injector

Injects global HTML, CSS, and JavaScript files into Anki cards at render time, with configurable files, placement, and toggles, without altering card content.

appearance card-templates

Sidebar table

Moves the browser's card/note table into the sidebar to maximize the editor area, toggled by menu or configurable shortcut, and optionally minimizes the tags editor.

note-management shortcuts appearance beta

Markdown input has 1 fork →

Enables adding and editing Anki notes in extended CommonMark Markdown within fields or a separate window, using a CodeMirror editor with HTML conversion and configurable syntax extensions.

card-creation note-management formatting shortcuts cloze

Description

Allows you to override the default styling of lists, links, etc. within Anki's fields, as well as the overall look of the editor.

How to use it:

navigate to the add-on folder (Tools → Add-ons → CSS Injector - Change default editor styles → click "View Files")
edit the CSS files located in the folder user_files.
- editor.css is for general editor styles outside of fields
- field.css affects content within fields
restart the editor

Selectable attributes:

Here's what the add-on adds to the whole document:
And here's what's selectable on anki-editable:
Night mode specific styling is also supported:
- Use class .nightMode or .night_mode.

Changelog

21.02.23
- patch for Anki versions 2.1.55-2.1.58+
26.05.22
- hotfix for older systems that don't support optional chaining operator yet

25.05.22

support legacy versions (<2.1.49)
add new selectable attributes:
- editor: "svelte" (2.1.50+) or "legacy" (below 2.1.49)
- pointversion: exact patch version of Anki install
use reliable method of obtaining <anki-editable> (thanks to Hikaru!)
- this should also fix the HTML root node not receiving attributes
fix change notetype behavior (again)
greatly reduce complexity of add-on

22.05.22
- fix broken browser behavior
- fix styles not applying when switching to notetype with more fields
- fix notetype specific styles not applying to first note in add mode
19.04.22
- add notetype name, field name, field index (ord) as selectable attributes to body and shadow roots (anki-editable)
03.04.22
- restructure and publish source code
- yet another fix for 2.1.50 API changes
19.01.22
- Hotfix for 2.1.50
05.10.21
- allow specific styling for night mode and individual note types
- move CSS folder to user_files to preserve them on updates
11.05.21
- publication

Made by Matthias Metelka | @kleinerpirat Thanks to Hikaru Y. for his amazing contribution to this add-on, and to ijgnd, Thomas Kahn and shallash, for their great suggestions and continued testing! - inspired by Henrik Giesel: https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/8

README

CSS Injector for Anki

This is the source code for https://ankiweb.net/shared/info/181103283.