feat: Upgrade bootstrap to 5.3.0 and enable dark mode

Fixes #3365

.pnp.cjs

@@ -50,7 +50,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
             ["@twuni/emojify", "npm:1.0.2"],\
             ["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\
-            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
+            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
             ["bootstrap-icons", "npm:1.10.5"],\
             ["browser-fs-access", "npm:0.33.1"],\
             ["browserlist", "npm:1.0.1"],\
@@ -2940,10 +2940,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "SOFT"\
         }],\
-        ["npm:5.2.3", {\
+        ["npm:5.3.0-alpha3", {\
-          "packageLocation": "./.yarn/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\
+          "packageLocation": "./.yarn/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\
           "packageDependencies": [\
-            ["bootstrap", "npm:5.2.3"]\
+            ["bootstrap", "npm:5.3.0-alpha3"]\
           ],\
           "linkType": "SOFT"\
         }],\
@@ -2960,10 +2960,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }],\
-        ["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3", {\
+        ["virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3", {\
-          "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-c4952ffff0/0/cache/bootstrap-npm-5.2.3-7458283a23-0211805dec.zip/node_modules/bootstrap/",\
+          "packageLocation": "./.yarn/__virtual__/bootstrap-virtual-cc4ceea380/0/cache/bootstrap-npm-5.3.0-alpha3-ed2dfa96e0-1739c40e40.zip/node_modules/bootstrap/",\
           "packageDependencies": [\
-            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
+            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
             ["@popperjs/core", "npm:2.11.7"],\
             ["@types/popperjs__core", null]\
           ],\
@@ -7728,7 +7728,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.0.2"],\
             ["@twuni/emojify", "npm:1.0.2"],\
             ["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.2.1"],\
-            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.2.3"],\
+            ["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.0-alpha3"],\
             ["bootstrap-icons", "npm:1.10.5"],\
             ["browser-fs-access", "npm:0.33.1"],\
             ["browserlist", "npm:1.0.1"],\

ietf/static/css/datepicker.scss

@@ -1,2 +1,11 @@
-@import "vanillajs-datepicker/sass/index-bs5";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
+$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;  
+
 @import "vanillajs-datepicker/sass/datepicker-bs5";

ietf/static/css/document_html.scss

@@ -11,6 +11,7 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";

ietf/static/css/ietf.scss

@@ -15,9 +15,14 @@ $popover-max-width: 100%;
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
+// Allow color modes
+
+$color-mode-type: media-query;
+
 // Only import what we need:
 
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 
 $h1-font-size: $font-size-base * 2.2;
 $h2-font-size: $font-size-base * 1.8;
@@ -334,7 +339,7 @@ th,
 }
 
 .ballot-icon table .my {
-    border: 2 * $table-border-width solid #000;
+    border: calc(2 * $table-border-width) solid #000;
 }
 
 // See https://getbootstrap.com/docs/5.1/customize/color/#all-colors

ietf/static/css/list.scss

@@ -1,6 +1,7 @@
 // Import bootstrap helpers
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 
 table .sort {
     cursor: pointer;

ietf/static/css/select2.scss

@@ -1,5 +1,11 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+
+// FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75s
+$s2bs5-clear-icon:               str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color(red, 50%)}) !default;
 @import "select2/src/scss/core";
 @import "select2-bootstrap-5-theme/src/include-all";

ietf/static/js/theme.js

@@ -0,0 +1,87 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  "use strict";
+
+  const storedTheme = localStorage.getItem("theme");
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+
+  const setTheme = function (theme) {
+    if (
+      theme === "auto" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      document.documentElement.setAttribute("data-bs-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+  };
+
+  setTheme(getPreferredTheme());
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    const activeThemeIcon = document.querySelector(".theme-icon-active use");
+    const btnToActive = document.querySelector(
+      `[data-bs-theme-value="${theme}"]`
+    );
+    const svgOfActiveBtn = btnToActive
+      .querySelector("svg use")
+      .getAttribute("href");
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+      element.classList.remove("active");
+      element.setAttribute("aria-pressed", "false");
+    });
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    activeThemeIcon.setAttribute("href", svgOfActiveBtn);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", () => {
+      if (storedTheme !== "light" || storedTheme !== "dark") {
+        setTheme(getPreferredTheme());
+      }
+    });
+
+  window.addEventListener("DOMContentLoaded", () => {
+    showActiveTheme(getPreferredTheme());
+
+    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const theme = toggle.getAttribute("data-bs-theme-value");
+        localStorage.setItem("theme", theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();

ietf/templates/base.html

@@ -6,7 +6,7 @@
 {% origin %}
 {% load django_bootstrap5 %}
 {% load django_vite %}
-<html lang="en" {% block html_attrs %}{% endblock %}>
+<html data-bs-theme="auto" lang="en" {% block html_attrs %}{% endblock %}>
     <head>
         {% analytical_head_top %}
         <meta charset="utf-8">
@@ -160,6 +160,7 @@
         {% endblock %}
         {% block js %}
         {% endblock %}
+        <script src="{% static 'ietf/js/theme.js' %}"></script>
         <script src="{% static 'ietf/js/select2.js' %}"></script>
         <script>
             $('#navbar-doc-search').on('select2:select', function (e) {

package.json

@@ -18,7 +18,7 @@
     "@fullcalendar/vue3": "6.1.8",
     "@popperjs/core": "2.11.7",
     "@twuni/emojify": "1.0.2",
-    "bootstrap": "5.2.3",
+    "bootstrap": "5.3.0-alpha3",
     "bootstrap-icons": "1.10.5",
     "browser-fs-access": "0.33.1",
     "caniuse-lite": "1.0.30001481",
@@ -144,6 +144,7 @@
         "ietf/static/js/sortable.js",
         "ietf/static/js/stats.js",
         "ietf/static/js/status-change-edit-relations.js",
+        "ietf/static/js/theme.js",
         "ietf/static/js/timeslot_edit.js",
         "ietf/static/js/timezone.js",
         "ietf/static/js/upcoming.js",

yarn.lock

@@ -2191,12 +2191,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bootstrap@npm:5.2.3":
+"bootstrap@npm:5.3.0-alpha3":
-  version: 5.2.3
+  version: 5.3.0-alpha3
-  resolution: "bootstrap@npm:5.2.3"
+  resolution: "bootstrap@npm:5.3.0-alpha3"
   peerDependencies:
-    "@popperjs/core": ^2.11.6
+    "@popperjs/core": ^2.11.7
-  checksum: 0211805dec6a190c0911d142966df30fdb4b4139a04cc6c23dd83c6045ea3cb0a966b360ab2e701e7b3ad96ff01e05fdc0914be97b41bd876b11e457a8bdc6a3
+  checksum: 1739c40e4033c134e9dc51235e8018f267a9fc8114feba6a5b402f2ab0c68e67c363e2f243c79f252d1cf8fcde82262b04bbaaf6ea1695c37537c02f34ae4f79
   languageName: node
   linkType: hard
 
@@ -6376,7 +6376,7 @@ browserlist@latest:
     "@rollup/pluginutils": 5.0.2
     "@twuni/emojify": 1.0.2
     "@vitejs/plugin-vue": 4.2.1
-    bootstrap: 5.2.3
+    bootstrap: 5.3.0-alpha3
     bootstrap-icons: 1.10.5
     browser-fs-access: 0.33.1
     browserlist: latest