From 7a708810c7c6c6581357a29f8d41d65647b617c1 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Thu, 21 Nov 2024 17:53:24 +0300
Subject: [PATCH] Read dark mode filter from custom css property

---
 app/assets/javascripts/application.js | 2 ++
 app/assets/stylesheets/common.scss    | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ead01a8ff8..ad3291789c 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -70,6 +70,8 @@ $(document).ready(function () {
   // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive
   Turbo.session.drive = false;
 
+  $("body").css("--dark-mode-map-filter", "invert(.9) hue-rotate(180deg)");
+
   var headerWidth = 0,
       compactWidth = 0;
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 668d050d8b..533405e8fb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -508,7 +508,7 @@ body.small-nav {
 @include color-mode(dark) {
   .leaflet-tile-container .leaflet-tile,
   .mapkey-table-entry td:first-child > * {
-    filter: brightness(.8);
+    filter: var(--dark-mode-map-filter);
   }
 
   .leaflet-container .leaflet-control-attribution a {