fix: More dark mode fixes (ietf-tools#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

Author: larseggert

.pnp.cjs

@@ -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);
+}
 }

ietf/static/css/document_html_txt.scss

@@ -7,7 +7,7 @@
 (() => {
   "use strict";
 
-  const storedTheme = localStorage.getItem("theme");
+  const storedTheme = localStorage.getItem("theme") || "auto";
 
   const getPreferredTheme = () => {
     if (storedTheme) {

ietf/static/js/theme.js

@@ -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"