feat: Upgrade bootstrap to 5.3.0 and enable dark mode

Fixes ietf-tools#3365

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

@@ -8,6 +8,7 @@ $tooltip-margin: inherit !default;
 
 @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

@@ -10,9 +10,12 @@ $enable-negative-margins: true;
 
 $popover-max-width: 100%;
 
+$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;
@@ -329,7 +332,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">
@@ -164,6 +164,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.5",
     "@popperjs/core": "2.11.7",
     "@twuni/emojify": "1.0.2",
-    "bootstrap": "5.2.3",
+    "bootstrap": "5.3.0-alpha3",
     "bootstrap-icons": "1.10.4",
     "browser-fs-access": "0.33.0",
     "caniuse-lite": "1.0.30001469",
@@ -143,6 +143,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

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