From 14586d72b03ed881c1feb7679b988b3f4812bc9f Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Thu, 11 Apr 2024 20:08:10 +0200
Subject: [PATCH] Use theme colors in debug viewer

---
 chrome/content/zotero/debugViewer.html | 16 +++++++++-------
 scss/themes/_dark.scss                 |  5 +++++
 scss/themes/_light.scss                |  5 +++++
 3 files changed, 19 insertions(+), 7 deletions(-)
diff --git a/chrome/content/zotero/debugViewer.html b/chrome/content/zotero/debugViewer.html
index 2895a07d91..b44be7a949 100644
--- a/chrome/content/zotero/debugViewer.html
+++ b/chrome/content/zotero/debugViewer.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<meta charset="UTF-8">
+		<link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css">
 		<title>Debug Output</title>
 		<script src="include.js"></script>
 		<script src="debugViewer.js"></script>
@@ -9,7 +10,7 @@
 		<style>
 			body {
 				margin: 0;
-				background: Canvas;
+				background: var(--material-background);
 			}
 			
 			a {
@@ -19,7 +20,8 @@
 			header {
 				position: fixed;
 				top: 0;
-				background: lightgrey;
+				color: var(--fill-primary);
+				background: var(--material-sidepane);
 				display: flex;
 				align-items: center;
 				width: calc(100% - 20px);
@@ -53,7 +55,7 @@
 			
 			#submit-error {
 				font-weight: 600;
-				color: red;
+				color: var(--accent-red);
 			}
 			
 			#content {
@@ -65,7 +67,7 @@
 			
 			#errors {
 				padding-bottom: 12px;
-				border-bottom: 1px lightgray solid;
+				border-bottom: var(--material-panedivider);
 				white-space: pre-wrap;
 			}
 			
@@ -84,8 +86,8 @@
 				content: attr(data-tooltip);
 				display: none;
 				position: absolute;
-				background: #000;
-				color: #fff;
+				background: var(--color-menu-opaque);
+				color: var(--fill-primary);
 				padding: 4px 8px;
 				font-size: 12px;
 				font-family: sans-serif;
@@ -115,7 +117,7 @@
 				
 				top: 100%;
 				border-width: 0 6px 6px;
-				border-bottom-color: #000;
+				border-bottom-color: var(--color-menu-opaque);
 			}
 			/* Show the tooltip when hovering */
 			[data-tooltip]:hover:before,
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
index f7d15397a4..838b19a2c4 100644
--- a/scss/themes/_dark.scss
+++ b/scss/themes/_dark.scss
@@ -74,6 +74,11 @@ $-colors: (
         --color-stripe-on-background: #{color.mix(
             map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
         )};
+        --color-menu-opaque: rgb(
+            #{color.alpha(map.get($-colors, "color-menu")) * color.red(map.get($-colors, "color-menu"))},
+            #{color.alpha(map.get($-colors, "color-menu")) * color.green(map.get($-colors, "color-menu"))},
+            #{color.alpha(map.get($-colors, "color-menu")) * color.blue(map.get($-colors, "color-menu"))}
+        );
 
         // background materials
         --material-background: var(--color-background);
diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss
index cdd1cc869f..adb801fd22 100644
--- a/scss/themes/_light.scss
+++ b/scss/themes/_light.scss
@@ -74,6 +74,11 @@ $-colors: (
         --color-stripe-on-background: #{color.mix(
             map.get($-colors, "color-background"), color.change(map.get($-colors, "color-stripe"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "color-stripe")))
         )};
+       --color-menu-opaque: rgb(
+            #{color.alpha(map.get($-colors, "color-menu")) * color.red(map.get($-colors, "color-menu"))},
+            #{color.alpha(map.get($-colors, "color-menu")) * color.green(map.get($-colors, "color-menu"))},
+            #{color.alpha(map.get($-colors, "color-menu")) * color.blue(map.get($-colors, "color-menu"))}
+        );
 
         // background materials
         --material-background: var(--color-background);
