From bc10b3cc6182f4d93f9517e4ccbeaf699b2b75ba Mon Sep 17 00:00:00 2001
From: David Evans <davidje13@users.noreply.github.com>
Date: Sun, 12 Apr 2020 13:31:45 +0100
Subject: [PATCH] Invert luminosity of rendered diagram when in dark mode

---
 web/styles/editor.css | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/web/styles/editor.css b/web/styles/editor.css
index fd60ac7..9c1a6fe 100644
--- a/web/styles/editor.css
+++ b/web/styles/editor.css
@@ -609,12 +609,12 @@ svg a:active, svg a:hover {
 		border-color: #66AA55;
 	}
 
-	.pane-view {
-		background: #888888;
+	.pane-view, .pane-view-scroller {
+		background: #111111;
 	}
 
-	.pane-library {
-		background: #555555;
+	.pane-library, .pane-library-scroller {
+		background: #222222;
 	}
 
 	.pane-code .CodeMirror {
@@ -634,13 +634,26 @@ svg a:active, svg a:hover {
 		background: #807700;
 	}
 
+	.pane-view .region:hover .outline {
+		stroke: rgba(150, 140, 0, 0.5);
+	}
+
+	.pane-view .region.focus .outline {
+		stroke: rgba(190, 140, 0, 0.5);
+	}
+
+	.pane-view .region.focus:hover .outline {
+		stroke: rgba(170, 140, 0, 0.5);
+	}
+
 	.library-item > div {
-		border-color: #555555;
-		background: #888888;
+		border-color: #222222;
+		background: #111111;
 	}
 
 	.library-item:hover > div {
-		background: #999977;
+		border-color: #FFCC00;
+		background: #444433;
 	}
 
 	.msg-error {
@@ -648,6 +661,10 @@ svg a:active, svg a:hover {
 		background: #AA6666;
 	}
 
+	.pane-view svg, .library-item svg {
+		filter: invert(1) hue-rotate(180deg);
+	}
+
 	.options {
 		background: #333333;
 	}
@@ -675,16 +692,20 @@ svg a:active, svg a:hover {
 
 	.pick-document-item > div {
 		border-color: #999999;
-		background: #666666;
+		background: #111111;
 	}
 
 	.pick-document-item:hover > div {
-		background: #888866;
+		background: #444433;
 	}
 
 	.pick-document-item.new > div:before {
 		color: #999999;
 	}
+
+	.pane-view svg, .library-item svg, .pick-document-item svg {
+		filter: invert(1) hue-rotate(180deg);
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {