From df46572ddfcbd6a247b8f37b0e7a3842b7b402d2 Mon Sep 17 00:00:00 2001
From: "Steinar H. Gunderson" <sgunderson@bigfoot.com>
Date: Thu, 20 Oct 2022 19:55:26 +0200
Subject: [PATCH] Better imbalance pieces in dark mode.

Simply use the pieces of the opposite color and invert them;
they are made for a light background.
---
 www/css/remoteglot.css | 11 ++++++++++-
 www/js/remoteglot.js   |  6 ++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index 42bf1b9..672e583 100644
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -203,6 +203,11 @@ a.move:hover {
 	color: #555;
 }
 
+.imbalance-inverted-piece {
+	display: none;
+	filter: invert(1);
+}
+
 @media (prefers-color-scheme: dark) {
 
 :root {
@@ -221,5 +226,9 @@ a.move, a.move:link {
 a:link {
 	color: rgb(128,128,238);
 }
-
+.imbalance-piece {
+	display: none;
+}
+.imbalance-inverted-piece {
+	display: initial;
 }
diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index dc0e630..3a95204 100644
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -1751,10 +1751,12 @@ var update_imbalance = function(fen) {
 	var black_imbalance = '';
 	for (var piece in imbalance) {
 		for (var i = 0; i < imbalance[piece]; ++i) {
-			white_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;">';
+			white_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
+			white_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
 		}
 		for (var i = 0; i < -imbalance[piece]; ++i) {
-			black_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;">';
+			black_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
+			black_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
 		}
 	}
 	$('#whiteimbalance').html(white_imbalance);
-- 
2.39.2