From b8c6e344e885f581f00e352e2a6f994619493cc6 Mon Sep 17 00:00:00 2001
From: bmFtZQ <aaaa2048@outlook.com>
Date: Sat, 11 Jun 2022 16:45:43 +0800
Subject: [PATCH] make force-tab-colour tweak less confusing #32

---
 README.md                        |  3 ++-
 screenshots/force-tab-colour.svg | 35 ++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 screenshots/force-tab-colour.svg

diff --git a/README.md b/README.md
index 6187dd6..9f846c3 100644
--- a/README.md
+++ b/README.md
@@ -51,10 +51,11 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
 |**NOTE: Only works on default theme: 'System theme - auto'**|
 |`uc.tweak.win11-mica`|
 
-|force tab background colour to `--toolbar-bg` (useful for Proton themes)|
+|force tab background colour to the same colour as the navbar background (useful for Proton themes)|
 |-|
 |**NOTE: can cause readability issues with some themes! (eg. white text on white bg)**|
 |`uc.tweak.force-tab-colour`|
+|![force tab colour example](screenshots/force-tab-colour.svg) (Left: OFF, Right: ON)|
 
 |only show Firefox account button when in private mode (useful as a private browsing indicator)|
 |-|
diff --git a/screenshots/force-tab-colour.svg b/screenshots/force-tab-colour.svg
new file mode 100644
index 0000000..440b26d
--- /dev/null
+++ b/screenshots/force-tab-colour.svg
@@ -0,0 +1,35 @@
+<svg width="104" height="48" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="a">
+      <rect x="1" y="1" width="46" height="46" rx="4" ry="4"/>
+    </clipPath>
+  </defs>
+  <style>
+    :root {--border: #777;--bg: #ccc;--toolbar: #eee;--tab-1: #fff;--text: #555;}
+    @media(prefers-color-scheme:dark){
+      :root{--border: #888;--bg: #222;--toolbar: #444;--tab-1: #666; --text: #eee;}
+    }
+  </style>
+  <rect x="1" y="1" width="46" height="46" rx="4" ry="4" fill="var(--bg)" stroke="var(--border)" stroke-width="2" paint-order="stroke fill"/>
+  <g clip-path="url(#a)">
+    <path d="M11 8a3 3 0 0 0-3 3v12a3 3 0 0 1-3 3v4h43V8z" fill="var(--tab-1)"/>
+    <rect y="26" width="48" height="22" rx="0" ry="0" fill="var(--toolbar)"/>
+    <g fill="var(--text)">
+      <rect x="17" y="15" width="38" height="4" rx="2" ry="2"/>
+      <circle cx="16" cy="37" r="4"/>
+      <circle cx="40" cy="37" r="4"/>
+    </g>
+  </g>
+  <g transform="translate(56)">
+    <rect x="1" y="1" width="46" height="46" rx="4" ry="4" fill="var(--bg)" stroke="var(--border)" stroke-width="2" paint-order="stroke fill"/>
+    <g clip-path="url(#a)">
+      <path d="M11 8a3 3 0 0 0-3 3v12a3 3 0 0 1-3 3v4h43V8z" fill="var(--toolbar)"/>
+      <rect y="26" width="48" height="22" rx="0" ry="0" fill="var(--toolbar)"/>
+      <g fill="var(--text)">
+        <rect x="17" y="15" width="38" height="4" rx="2" ry="2"/>
+        <circle cx="16" cy="37" r="4"/>
+        <circle cx="40" cy="37" r="4"/>
+      </g>
+    </g>
+  </g>
+</svg>