color: #555;
}
+.imbalance-inverted-piece {
+ display: none;
+ filter: invert(1);
+}
+
@media (prefers-color-scheme: dark) {
:root {
a:link {
color: rgb(128,128,238);
}
-
+.imbalance-piece {
+ display: none;
+}
+.imbalance-inverted-piece {
+ display: initial;
}
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);