Override system-wide CSS files with user custom CSS styles

Development
1

The context

Lately I’ve wanted to set a custom background. I’ve found

  • this add-on (Custom background image and gear icon)
  • this post which explains how to do it without an add-on. According to this post, it is possible to accomplish this by creating a file with name deckbrowser.css.

I tried researching about the deckbrowser.css file and found that when installing anki through the default package manager in Arch Linux (i.e. pacman), that file (and some other CSS files) are installed in the following paths

$ pkgfile -l community/anki | grep '\.css$' | sort
community/anki  /usr/share/aqt_data/web/deckbrowser.css
community/anki  /usr/share/aqt_data/web/editor.css
community/anki  /usr/share/aqt_data/web/overview.css
community/anki  /usr/share/aqt_data/web/reviewer-bottom.css
community/anki  /usr/share/aqt_data/web/reviewer.css
community/anki  /usr/share/aqt_data/web/toolbar-bottom.css
community/anki  /usr/share/aqt_data/web/toolbar.css
community/anki  /usr/share/aqt_data/web/webview.css

I modified some CSS properties located in some of those files (webview.css and deckbrowser.css) and the GUI changed. Therefore, those files definitely set the style for the GUI. However, those files are located in a folder whose content might change between updates.

Some programs in Linux allow the user to create a user configuration file so that it replaces the system-wide configuration file.

The question

Is there any path I can create custom deckbrowser.css and webview.css files so that they overwrite the CSS styles located in /usr/share/aqt_data/web?

Additional context (no. 1)

Found this dotfiles repository. What this user did to make anki consider his custom deckbrowser.css file was to copy his CSS styles into into a subpath from the /usr/ directory (i.e. modify the system-wide CSS styles).

$ grep -A 1 -B 3 -R 'aqt_data' dotfiles
dotfiles/scripts/load-bay.sh-declare -A loc39=(
dotfiles/scripts/load-bay.sh-    [name]="anki aqt web"
dotfiles/scripts/load-bay.sh-    [local]="/home/b3nj4m1n/dotfiles/files/anki/*"
dotfiles/scripts/load-bay.sh:    [remote]="/usr/share/aqt_data/web/"
dotfiles/scripts/load-bay.sh-)

The problem with this approach is that he is modifying the files that are located in /usr/ and those files might be overwritten when updating anki through his package manager. Note that this implies that his configuration will be replaced and might be lost.

I think this is more like a feature request: If only anki checked for those CSS files (located somewhere) after having read the system-wide CSS files, the user would be able to overwrite the system-wide CSS files with his custom CSS files.

Additional context (no. 2)

As an experiment I tried creating files with the exact same names as the system-wide CSS files. Those files only contained a single CSS statement (see below) that would make me notice whether those files were being considered by anki or not.

$ echo '* { background-color: yellow }' > {deckbrowser,editor,overview,{reviewer,toolbar}{,-bottom},webview}.css

I tried moving those CSS files in the following locations but they didn’t change the GUI style

  • ~/.local/share/Anki2/
  • ~/.local/share/Anki2/User 1/
  • ~/.local/share/Anki2/User 1/aqt_data/web/
  • ~/.local/share/Anki2/User 1/aqt_data/web/css/
  • ~/.local/share/Anki2/User 1/css/
  • ~/.local/share/Anki2/User 1/web/
  • ~/.local/share/Anki2/User 1/web/css/
  • ~/.local/share/Anki2/aqt_data/web/css/
  • ~/.local/share/Anki2/css/
  • ~/.local/share/Anki2/web/
  • ~/.local/share/Anki2/web/css
2