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:
parent
e3a0f476c9
commit
62523eb02c
2
.pnp.cjs
generated
2
.pnp.cjs
generated
|
@ -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]\
|
||||||
],\
|
],\
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue