From 801944dbe4694fd895058b9444bacbe4e57d53e1 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 6 May 2024 18:02:50 +0300
Subject: [PATCH 1/4] Set both light and dark banner themes

---
 app/views/layouts/_banner.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/_banner.html.erb b/app/views/layouts/_banner.html.erb
index 344c5ed711..3d2c7f774e 100644
--- a/app/views/layouts/_banner.html.erb
+++ b/app/views/layouts/_banner.html.erb
@@ -1,5 +1,5 @@
 <% unless (banner = next_banner()).nil? %>
-  <%= tag.div :id => "banner", :class => "position-relative", :data => { :bs_theme => token_list(:dark => banner[:dark]) } do %>
+  <%= tag.div :id => "banner", :class => "position-relative", :data => { :bs_theme => (banner[:dark] ? "dark" : "light") } do %>
     <%= link_to (image_tag banner[:img], :srcset => banner[:srcset], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %>
     <button type="button"
             class="btn-close position-absolute top-0 end-0 m-4 opacity-100 bg-white bg-opacity-50"

From cc5d8d991b31a3bce1e06cbf8afe53967800a363 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 6 May 2024 18:03:46 +0300
Subject: [PATCH 2/4] Override Bootstrap close button inversion inside themed
 elements

---
 app/assets/stylesheets/common.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 0fd3317e0f..09c6c906bb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -72,6 +72,16 @@ time[title] {
   }
 }
 
+/* Bootstrap close button overrides for nested light/dark themes */
+
+[data-bs-theme="dark"] .btn-close {
+  filter: var(--bs-btn-close-white-filter);
+}
+
+[data-bs-theme="light"] .btn-close {
+  filter: none;
+}
+
 /* Rules for the header */
 
 #menu-icon {

From 5b83bb85ed678f850623928aba132948b311761d Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Thu, 9 May 2024 17:15:29 +0300
Subject: [PATCH 3/4] Don't use @extend inside a potential media query

---
 app/assets/stylesheets/common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 09c6c906bb..307a990e40 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -501,7 +501,7 @@ body.small-nav {
   }
 
   .leaflet-control-scale-line {
-    @extend .border-light, .border-opacity-75;
+    border-color: rgba(var(--bs-light-rgb), .75) !important;
   }
 }
 

From 5e1093ef23637b5db3e75e8f2c680b967ae4f786 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 6 May 2024 18:05:07 +0300
Subject: [PATCH 4/4] Enable dark mode using media queries

---
 app/assets/stylesheets/parameters.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 07549d69bb..28bf569016 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -20,3 +20,4 @@ $table-border-factor: .1;
 $list-group-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
 
 $enable-negative-margins: true;
+$color-mode-type: media-query;