Merge remote-tracking branch 'upstream/pull/4667'

diff --combined app/assets/stylesheets/common.scss
index 3e22052a220ac36ccfa5a16810de6dcf34f62441,1f23a75658edae10e099b06ac7ad6215e009eaeb..a1cae7a36825663c69e829b07ce49c6d887c3f07
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -81,6 -81,12 +81,12 @@@ time[title] 
    opacity: 0.6;
  }
  
+ @include color-mode(dark) {
+   #menu-icon {
+     filter: invert(1);
+   }
+ }
+ 
  header {
    height: $headerHeight;
    position: relative;
@@@ -188,7 -194,6 +194,6 @@@ body.small-nav 
      flex-direction: column;
      height: auto;
      min-height: $headerHeight;
-     background: #fff;
  
      &.closed nav {
        display: none;
@@@ -377,6 -382,7 +382,6 @@@
      float: right;
      width: 250px;
      height: 100%;
 -    background: white;
      overflow: auto;
  
      .section {
@@@ -418,14 -424,43 +423,14 @@@
  }
  
  .layers-ui {
 -  .base-layers {
 -    .leaflet-container {
 -      width: 100%;
 -      height: 50px;
 -      cursor: pointer;
 -    }
 -
 -    li  {
 -      overflow: hidden;
 -      border-radius: 3px;
 -      border: 2px solid #fff;
 -      margin-bottom: 8px;
 -      position: relative;
 -      transition: border-color 0.08s ease-in;
 +  .base-layers > * {
 +    height: 56px;
  
 -      label {
 -        position: absolute;
 -        top: 0;
 -        left: 0;
 -        padding: 2px 6px;
 -        border-bottom-right-radius: 3px;
 -        cursor: pointer;
 -        font-weight: 600;
 -        font-size: 16px;
 -        text-stroke: 2px #fff;
 -        background: rgba(255,255,255,.9);
 -        z-index: 1000;
 -        input[type="radio"] {
 -          display: none;
 -        }
 -      }
 -
 -      &.active { border-color: darken($green, 10%); }
 -      &:hover {
 -        border-color: $grey;
 -        &.active { border-color: darken($green, 20%); }
 -      }
 +    > .btn {
 +      --bs-btn-border-color: var(--bs-body-bg);
 +    }
 +    > .btn:hover {
 +      --bs-btn-border-color: var(--bs-primary-border-subtle);
      }
    }
  
@@@ -540,12 -575,6 +545,12 @@@ div.direction 
  div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
  }
  
 +@include color-mode(dark) {
 +  div.direction {
 +    filter: invert(1);
 +  }
 +}
 +
  td.distance {
      font-size: x-small;
  }
@@@ -662,6 -691,8 +667,6 @@@ tr.turn:hover 
    }
  
    .export_boxy {
 -    background: $lightgrey;
 -
      > * {
          margin: -1px;
      }
@@@ -875,12 -906,12 +880,12 @@@ div.secondary-actions 
  .richtext,
  .prose {
    code {
 -    background: $lightgrey;
 +    background: var(--bs-secondary-bg);
      padding: 2px 3px;
    }
  
    pre {
 -    background: $lightgrey;
 +    background: var(--bs-secondary-bg);
      padding: 2px 3px;
      white-space: pre-wrap;
  
@@@ -891,17 -922,17 +896,17 @@@
  
    img {
      padding: $lineheight;
 -    background-color: $offwhite;
 +    background-color: var(--bs-tertiary-bg);
      display: block;
      max-width: 100%;
      margin: auto;
    }
  
    blockquote {
 -    border-left: $lineheight solid $offwhite;
 +    border-left: $lineheight solid var(--bs-tertiary-bg);
      padding-left: $lineheight;
      margin: 0;
 -    color: $darkgrey;
 +    color: var(--bs-secondary-color);
    }
  }
  
@@@ -958,6 -989,8 +963,6 @@@
  }
  
  .site-about #content {
 -  background-color: $lightgrey;
 -
    .content-inner {
      max-width: 760px;
    }

diff --combined app/views/layouts/_header.html.erb
index 13a4aa65e99ffa3eb1d2f8e88bdab3cc392750aa,f61d0806f36bd4ab704651a6f8b60f542bffbde2..eeed7de4229feb00cbb4cedc680b427f89272765
--- 1/app/views/layouts/_header.html.erb
--- 2/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@@ -1,6 -1,6 +1,6 @@@
  <header class="d-flex text-nowrap closed">
    <h1 class="m-0 fw-semibold">
-     <a href="<%= root_path %>" class="text-black text-decoration-none geolink">
+     <a href="<%= root_path %>" class="text-body-emphasis text-decoration-none geolink">
        <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %>
        <%= t "layouts.project_name.h1" %>
      </a>
@@@ -60,7 -60,7 +60,7 @@@
          <%= link_to t("layouts.about"), about_path, :class => header_nav_link_class(about_path) %>
        </li>
        <li id="compact-secondary-nav" class="dropdown nav-item">
-         <button class="dropdown-toggle nav-link btn btn-outline-secondary border-0 bg-white text-secondary" type="button" data-bs-toggle="dropdown"><%= t "layouts.more" %></button>
+         <button class="dropdown-toggle nav-link btn btn-outline-secondary border-0 bg-body text-secondary" type="button" data-bs-toggle="dropdown"><%= t "layouts.more" %></button>
          <ul class="dropdown-menu">
            <% if Settings.status != "database_offline" && can?(:index, Issue) %>
              <li>
@@@ -81,8 -81,8 +81,8 @@@
      </ul>
      <% if current_user && current_user.id %>
        <div class='d-inline-flex dropdown user-menu logged-in'>
-         <button class='dropdown-toggle btn btn-outline-secondary border-secondary-subtle bg-white text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
+         <button class='dropdown-toggle btn btn-outline-secondary border-secondary-subtle bg-body text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
 -          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
 +          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1 bg-body") %>
            <%= render :partial => "layouts/inbox" %>
            <span class="user-button">
              <span class='username'>