From 62523eb02ca5067ec8398532ddd952d12132f904 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Wed, 21 Jun 2023 19:46:16 +0300
Subject: [PATCH] fix: More dark mode fixes (#5852)

* fix: Correctly indicate "auto" theme is default

* fix: .pnp.js changes were missing

* fix: Use a "-subtle" background color for the menu bar

Because those change correctly with theme changes. That the
non-"-subtle" ones may be a bs5 bug, but enough people complained
about the yellow background in dev mode in dark mode that this change
may be worth it.

* fix: Try and recolor black colors in SVGs for dark mode

* Apply suggestions from @martinthomson
---
 .pnp.cjs                               |  2 +-
 ietf/static/css/document_html_txt.scss | 15 +++++++++++++++
 ietf/static/js/theme.js                |  2 +-
 ietf/templates/base.html               |  2 +-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/.pnp.cjs b/.pnp.cjs
index 1815f080b..3a858c027 100644
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -3151,7 +3151,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         ["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0", {\
           "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-3c63ba6f80/0/cache/bootstrap-npm-5.3.0-240c38a3b2-29a83cc8ca.zip/node_modules/bootstrap/",\
           "packageDependencies": [\
-            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
+            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0"],\
             ["@popperjs/core", "npm:2.11.8"],\
             ["@types/popperjs__core", null]\
           ],\
diff --git a/ietf/static/css/document_html_txt.scss b/ietf/static/css/document_html_txt.scss
index de6fd36b4..e90a3ecab 100644
--- a/ietf/static/css/document_html_txt.scss
+++ b/ietf/static/css/document_html_txt.scss
@@ -450,4 +450,19 @@ section > p, section > dl.references > dd {
    * doesn't break words at '/' like other browsers. */
   overflow-wrap: break-word;
 }
+
+/* From https://github.com/martinthomson/rfc-css/blob/main/rfc.css */
+/* SVG Trick: a prefix match works because only black and white are allowed */
+svg :is([stroke="black"], [stroke^="#000"]) {
+    stroke: var(--bs-body-color);
+}
+svg :is([stroke="white"], [stroke^="#fff"]) {
+    stroke: var(--bs-body-bg);
+}
+svg :is([fill="black"], [fill^="#000"], :not([fill])) {
+    fill: var(--bs-body-color);
+}
+svg :is([fill="white"], [fill^="#fff"]) {
+    fill: var(--bs-body-bg);
+}
 }
diff --git a/ietf/static/js/theme.js b/ietf/static/js/theme.js
index 35477152e..4b8681be6 100644
--- a/ietf/static/js/theme.js
+++ b/ietf/static/js/theme.js
@@ -7,7 +7,7 @@
 (() => {
   "use strict";
 
-  const storedTheme = localStorage.getItem("theme");
+  const storedTheme = localStorage.getItem("theme") || "auto";
 
   const getPreferredTheme = () => {
     if (storedTheme) {
diff --git a/ietf/templates/base.html b/ietf/templates/base.html
index 898397cf9..aa1d69006 100644
--- a/ietf/templates/base.html
+++ b/ietf/templates/base.html
@@ -35,7 +35,7 @@
           data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
         {% analytical_body_top %}
         <a class="visually-hidden visually-hidden-focusable" href="#content">Skip to main content</a>
-        <nav class="navbar navbar-expand-lg fixed-top {% if server_mode and server_mode != "production" %}bg-warning navbar-light{% else %}navbar-dark bg-secondary{% endif %}">
+        <nav class="navbar navbar-expand-lg fixed-top {% if server_mode and server_mode != "production" %}bg-danger-subtle navbar-light{% else %}navbar-dark bg-secondary{% endif %}">
             <div class="container-fluid">
                 <a class="navbar-brand" href="/">
                     <img alt="IETF Logo" class="me-2"