diff --git a/media/panel.css b/media/panel.css
index 1d9c06d..acf7182 100644
--- a/media/panel.css
+++ b/media/panel.css
@@ -342,15 +342,23 @@ body.resizing {
     text-overflow: ellipsis;
 }
 
+/* Read and write are a pair, so they get the same treatment: the theme's info and
+   warning hues, tinted for the background and border so both stay readable on any
+   theme. Before, write was an alert box and read a greyed-out label, which made read
+   look disabled rather than merely "not a write". */
 .kind-read {
-    color: var(--vscode-descriptionForeground);
-    background: var(--vscode-badge-background);
+    --kind-hue: var(--vscode-editorInfo-foreground, var(--vscode-textLink-foreground));
 }
 
 .kind-write {
-    color: var(--vscode-inputValidation-warningForeground, var(--vscode-foreground));
-    background: var(--vscode-inputValidation-warningBackground);
-    border-color: var(--vscode-inputValidation-warningBorder, transparent);
+    --kind-hue: var(--vscode-editorWarning-foreground, var(--vscode-charts-orange));
+}
+
+.kind-read,
+.kind-write {
+    color: var(--kind-hue);
+    background: color-mix(in srgb, var(--kind-hue) 16%, transparent);
+    border-color: color-mix(in srgb, var(--kind-hue) 45%, transparent);
 }
 
 /* --- filters popover ---------------------------------------------------- */