需要Add-on：
Custom Background Image and Gear Icon - AnkiWeb

官方說明：
（但最後用最多的還是說明之外的內部CSS修改）
Anki: How to Customize Background, Gears, Text & Mor...

Add-on路徑：
/Users/Username/Library/Application Support/Anki2/addons21/1210908941
Background：user_files/background
Gear：user_files/gear
Custom CSS：user_files/CSS
Web CSS：web/CSS

基礎CSS語法在這邊
@rithan99 on Plurk

Before

After

——

Add-on setting

1. 更改背景圖片跟選項圖標
2. 這邊設定過的東西無法透過custom CSS更改（會被add-on特性硬改回去）
3. Toolbar的設定很荒謬，建議去costum CSS

deckbrowser

hover effect
他負責中間這塊主板面，最不能接受的幾點：
1. 每個牌組底下都有一條border line
2. 表格間距
3. 字體、顏色

CSS
因為主板的本體其實是表格，改動時需要了解table的用法。
CSS Styling Tables
<th>: table header
<td>: table data
<tr>: table row

有用到px以外的單位，詳見
CSS 小技巧分享：em 單位的強大用途. 最近在學習 RWD（Responsive Web… | by...

browser的邏輯滿簡單的，但改到眼睛要脫窗
custom_deckbrowser.css (Plurk Paste)

比較爛的點是我為了改這行字，但是不清楚他的span class name導致我只能從"body"（整體）去改顏色跟字重，過程很失敗但至少有結果啦

toolbar
toolbar-bottom

1. 欄位拉大
2. 字的顏色等等
3. 按鈕超醜
4. 換背景

toolbar 算是比較容易了
custom_toolbar.css (Plurk Paste)
1. 換字體設定＋hover設定
2. 原本下面有一條分隔線，試了一下決定刪掉，但原本調的參數也不錯就先留著
3. 背景用漸層（上下toolbar都會被改到）

toolbar-bottom
最難搞的按鈕在這，原始的CSS裡完全沒有相關設定可以參考，後來爬了超多文參考其他add-on的語法才整出來的。

custom_toolbar-bottom.css (Plurk Paste)
加上nightMode的設定讓一切超複雜，很多東西切成一般模式都很直觀容易寫，但換回nightMode時都要獨立出來寫

1. body設定成跟之後的reviewer-bottom一樣高
2. button 不知道為什麼總之基礎設定height/margin等等是在這邊改動
3. nightMode.button＋hover設定

另外button為什麼卡了我3天？
因為這邊toolbar的設定會同時影響reviewer-bottom的設定，尤其我原本好不容易在寫reviewer的時候想通了nightMode.button要怎麼搞，結果改toolbar的時候又全亂掉
最後解法是讓toolbar當主要設定（因為不知道這邊的class name沒辦法指定內容），搞定後再去動reviewer。

例如原本我希望 border: none ，但這樣後面reviewer也不能寫border，只好改成border-color: rgba(0,0,0,0);（透明的）

CSS
Can you set a border opacity in CSS?border opacity：若使用border-opacity: 0.7 這類語法時，opacity的設定會套用到整個物件上，意即「整個物件 opacity: 0.7」
此時改用rgba / hlsa 來表現透明度。

Multiple Borders按鈕邊框除了border/outline之外還有box-shadow！！！
花超多時間找那個詭異邊框到底什麼語法來著，滿有趣的，之前嘗試用偽發光邊框有試過。

Python
The KING of Button Add-ons - AnkiWeb
在搞按鈕的時候很多語法是從這個add-on偷來的，裡面的py檔有寫他的運作邏輯，看完幫助很大。
Python 初學第三講 — 條件判斷. 讓程式依照不同條件做事吧！ | by 陳子晴 | ccClub...總之最簡單的if else看得懂就好
為什麼我還要看python

reviewer
reviewer-bottom

1. 換背景
2. 按鈕太醜
3. 按鈕的間隔、margin、與字的間隔

reviewer
custom_reviewer.css (Plurk Paste)
背景跟browser分開處理，暗一點防止字卡難以閱讀
1. 背景opacity
2. 墊一個全黑底在下面，蓋過系統預設的nightMode灰背景

reviewer-bottom
custom_reviewer-bottom.css (Plurk Paste)
1. 很多在toolbar有提到的東西改動時要加!important才能正確覆寫
2. 改了middle button的間距
3. #outer刪掉
4. 背景要另外設定（不會沿用toolbar）

overview

1. 背景有Add-on強制fixed不用特別處理
2. 把字改成跟browser一致

邏輯差不多
custom_overview.css (Plurk Paste)

很tricky的部分是按鈕，他按鈕的邏輯跟toolbar是一樣的，但是我一樣用"button"去控制時並不會影響toolbar或reviewer-bottom的設定，基本上就是複製貼上＋小小改一下padding就好。

congrats-base

我知道不該動系統的css檔但是我忍不住。
1. 加入背景
2. 改body的顏色、字重
3. 改連結的顏色

其他
1. browser統計那行的class name？

2. 統計跟ansbut太接近

3. 「恭喜完成」那行字怎麼改？

4. tried transition but failed
5. why only #ansbut and #middle button need !important ?
6. toolbar跟reviewer到底哪裡有衝突？為何背景不會影響？

其實CSS的邏輯很好懂，最困難的還是去通靈class name跟他的app架構，很多box跟我想的完全不一樣，導致我花最多時間在反覆測試指令的效果。
anyway, nightMode is a bitch.