Anki with style

The new addons from AnKig and ijgnord let you style the background image of the deck screen and let you modify the stylesheets some other components.The problem was that it would only style parts of the browser or the add screen. So I searched for a way to customize the entire Anki appearance.Let me give you an impression of what I'm talking about:
Styled with the \"one\" theme

Installation

The drawback is that you need a developer build of Anki because in the binary files you can't change the colors. They are set at build time. The first time is a bit tedious to set it all up.
- open a terminal
- git clone https://github.com/ankitects/anki
- cd anki
- Install these dependencies if they aren't already.From README.development:To start, make sure you have the following installed:
- Python 3.7+
- portaudio- mpv
- lame- npm
- your platform's C compiler, eg gcc, Xcode or Visual Studio 2017.
- GNU make
- protoc v3 (https://github.com/protocolbuffers/protobuf/releases)
- rustup (https://rustup.rs/)- gettext- rename (from the perl script https://github.com/subogero/rename)
- rsync
- perl
- ripgrep (cargo install rigrep)
- git- curl
- ./run compiles everything and starts anki. The first time this will take its time.
- Edit `aqt/ts/scss/_vars.scss` to your needs. See below for the options.
- ./run again to see the changes. This time it's faster :)
- maybe set that on the anki run is executed

Configuration

For every option there is also a corresponding setting for nightmode. Just substitue the `day` for a `night`. I list a block with the variables and then give an (ugly) example how they affect the appearance. I grouped them into four sections.Base colors
$day-text-fg: black;
$day-window-bg: #ececec;
$day-frame-bg: white;
$day-border: #aaa;
$day-faint-border: #e7e7e7;
https://preview.redd.it/qm2o0872pfp41.png?width=560&format=png&auto=webp&s=84e0c0cfa5231fb1567e4904f3e9dea73f445c8a
Highlighting and overview
$day-link: #00a;
$day-review-count: #0a0;
$day-new-count: #00a;
$day-learn-count: #C35617;
$day-zero-count: #ddd;
$day-slightly-grey-text: #333;
$day-highlight-bg: #61AFEF;
$day-highlight-fg: black;
$day-disabled: #777;
https://preview.redd.it/4cvzcjm6pfp41.png?width=794&format=png&auto=webp&s=d5572a6ebbf1612196cf25361b2601759686efc0
Card states
$day-flag1-bg: #ffaaaa;
$day-flag2-bg: #ffb347;
$day-flag3-bg: #82E0AA;
$day-flag4-bg: #85C1E9;
$day-suspended-bg: #FFFFB2;
$day-marked-bg: #cce;
https://preview.redd.it/a720yxv8pfp41.png?width=559&format=png&auto=webp&s=26d32088510e512d11166ff1cdbf4b554dfbba2d
Nightmode specific
/* night-mode-specific colours */
$fusion-button-gradient-start: #49515f;
$fusion-button-gradient-end: #1D2026;
$fusion-button-outline: #56B6C2;
$fusion-button-hover-bg: #ABB2BF;
$fusion-button-border: #56B6C2;
$fusion-button-base-bg: #282C34;
For the complete list of default options visit Anki's Github
https://preview.redd.it/xwxmfu0bpfp41.png?width=673&format=png&auto=webp&s=6408284e47f2bc1e7160580652bedcdd1883c991

My configuration

Based on the one colorscheme Gist

Technical Side

The color variables are extracted from qt/ts/scss/_vars.scss at compile time. See makefile:python ./tools/extract_scss_colors.pyThis script writes them to a dictionnary in aqt/colors.pycolors = {"day-text-fg": "black", "day-window-bg": "#ececec", ... }The colors are read again by theme_manager in aqt/theme.py
I was always bothered that Anki didn't fit into my colorscheme. Maybe this could help some of you too :)
Edit: Rearranged the pictures Edit2: Tested on Linux, it should work on Mac, on Windows only with cygwin