docs: add UI screenshots and correct diff view background color

README.md

@@ -9,6 +9,12 @@
 
 [繁體中文使用說明](USAGE_zh.md)
 
+![sync-status](imgs/sync-status.png)
+*The Sync Status View provides a clear overview of your files, allowing you to selectively push, pull, or view diffs for modified files.*
+
+![conflict](imgs/git-diff.png)
+*The Built-in Diff Viewer lets you compare local and remote changes side-by-side before syncing.*
+
 ---
 
 ## Key Features
@@ -47,6 +53,9 @@ Full support for Obsidian Mobile. Push and pull your notes on the go with a resp
 
 ## Configuration
 
+![Plugin Settings](imgs/plugin-settings.png)
+*Configure the plugin by selecting your preferred Git service and providing the necessary credentials.*
+
 ### 1. Choose Your Service
 Go to **Settings** > **Git File Sync** and select either **GitLab** or **GitHub**.
 

USAGE_zh.md

@@ -8,6 +8,9 @@
 
 在開始同步之前，請確保您已完成以下設定：
 
+![Plugin Settings](imgs/plugin-settings.png)
+*在設定面板選擇您的 Git 服務並填入對應的憑證與路徑。*
+
 1. **選擇服務**：在 `設定` > `Git File Sync` 中選擇 GitLab 或 GitHub。
 2. **填寫憑證**：
    - **GitHub**：需要 個人存取權杖 (PAT)、帳號名稱、儲存庫名稱。
@@ -27,6 +30,9 @@
    - **Modified**：本機已修改（需要 Push）。
    - **Remote only**：雲端有新檔案（需要 Pull）。
 
+![sync-status](imgs/sync-status.png)
+*同步狀態面板讓您可以一目了然地確認哪些檔案已經修改，並進行上傳或下載。*
+
 ---
 
 ### ⬆️ 如何上傳（Push）
@@ -56,6 +62,9 @@
 3. 選擇 **Keep Local**（保留本機）或 **Keep Remote**（採用雲端版本）。
 4. 選擇後系統會自動更新檔案。
 
+![conflict](imgs/git-diff.png)
+*內建的差異比對工具 (Diff Viewer) 可讓您在同步前並排比對本機與雲端的修改差異。*
+
 ---
 
 ## 4. 行動裝置使用技巧

styles.css

@@ -413,6 +413,7 @@
     border: 1px solid var(--background-modifier-border);
     border-radius: 5px;
     overflow: hidden;
+    background: var(--background-primary);
 }
 
 .ssv-diff-grid {
@@ -460,8 +461,8 @@
     background-color: transparent;
 }
 
-.ssv-diff-cell.removed   { background: rgba(248, 81, 73, 0.12); }
-.ssv-diff-cell.added     { background: rgba(46, 160, 67, 0.12); }
+.ssv-diff-cell.removed   { background: rgba(var(--color-red-rgb), 0.12); }
+.ssv-diff-cell.added     { background: rgba(var(--color-green-rgb), 0.12); }
 .ssv-diff-cell.unchanged { background: transparent; }
 .ssv-diff-cell.empty     { background: var(--background-secondary); opacity: 0.6; }
 
@@ -503,8 +504,8 @@
     border-radius: 2px;
 }
 
-.ssv-u-line.removed   { background: rgba(248, 81, 73, 0.18); }
-.ssv-u-line.added     { background: rgba(46, 160, 67, 0.18); }
+.ssv-u-line.removed   { background: rgba(var(--color-red-rgb), 0.18); }
+.ssv-u-line.added     { background: rgba(var(--color-green-rgb), 0.18); }
 .ssv-u-line.unchanged { color: var(--text-muted); }
 
 /* Container query: switch layout based on the diff panel's own width */