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
This commit is contained in:
Lars Eggert 2023-06-21 19:46:16 +03:00 committed by GitHub
parent e3a0f476c9
commit 62523eb02c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 3 deletions

2
.pnp.cjs generated
View file

@ -3151,7 +3151,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0", {\ ["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/",\ "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-3c63ba6f80/0/cache/bootstrap-npm-5.3.0-240c38a3b2-29a83cc8ca.zip/node_modules/bootstrap/",\
"packageDependencies": [\ "packageDependencies": [\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\ ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0"],\
["@popperjs/core", "npm:2.11.8"],\ ["@popperjs/core", "npm:2.11.8"],\
["@types/popperjs__core", null]\ ["@types/popperjs__core", null]\
],\ ],\

View file

@ -450,4 +450,19 @@ section > p, section > dl.references > dd {
* doesn't break words at '/' like other browsers. */ * doesn't break words at '/' like other browsers. */
overflow-wrap: break-word; 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);
}
} }

View file

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

View file

@ -35,7 +35,7 @@
data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}"> data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
{% analytical_body_top %} {% analytical_body_top %}
<a class="visually-hidden visually-hidden-focusable" href="#content">Skip to main content</a> <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"> <div class="container-fluid">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img alt="IETF Logo" class="me-2" <img alt="IETF Logo" class="me-2"