Color mode fixes

ietf/static/css/datepicker.scss

@@ -1,7 +1,7 @@
 @import "bootstrap/scss/functions";
 
-// Enable automatic dark mode
+// Enable color modes
-$color-mode-type: media-query;
+$color-mode-type: data;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
@@ -10,6 +10,6 @@ $color-mode-type: media-query;
 @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;  
+$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
 
 @import "vanillajs-datepicker/sass/datepicker-bs5";

ietf/static/css/document_html.scss

@@ -11,8 +11,8 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola
 
 @import "bootstrap/scss/functions";
 
-// Enable automatic dark mode
+// Enable color modes
-$color-mode-type: media-query;
+$color-mode-type: data;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";

ietf/static/css/ietf.scss

@@ -15,9 +15,8 @@ $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;
 
-// Enable automatic dark mode
+// Enable color modes
-
+$color-mode-type: data;
-$color-mode-type: media-query;
 
 // Only import what we need:
 
@@ -451,7 +450,7 @@ td.position-recuse {
 }
 
 td.position-norecord {
-    background-color: $white; // $color-norecord;
+    background-color: transparent;
 }
 
 td.position-empty {

ietf/static/css/list.scss

@@ -1,8 +1,8 @@
 // Import bootstrap helpers
 @import "bootstrap/scss/functions";
 
-// Enable automatic dark mode
+// Enable color modes
-$color-mode-type: media-query;
+$color-mode-type: data;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";

ietf/static/css/select2.scss

@@ -1,7 +1,7 @@
 @import "bootstrap/scss/functions";
 
-// Enable automatic dark mode
+// Enable color modes
-$color-mode-type: media-query;
+$color-mode-type: data;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
@@ -10,6 +10,7 @@ $color-mode-type: media-query;
 @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;
+$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

@@ -38,15 +38,16 @@
     if (!themeSwitcher) {
       return;
     }
-
+    // Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown.
-    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    // Kept them here for easier future diffing.
-    const activeThemeIcon = document.querySelector(".theme-icon-active use");
+    // 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
+    // const svgOfActiveBtn = btnToActive
-      .querySelector("svg use")
+    //   .querySelector("svg use")
-      .getAttribute("href");
+    //   .getAttribute("href");
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
       element.classList.remove("active");
@@ -55,13 +56,13 @@
 
     btnToActive.classList.add("active");
     btnToActive.setAttribute("aria-pressed", "true");
-    activeThemeIcon.setAttribute("href", svgOfActiveBtn);
+    // activeThemeIcon.setAttribute("href", svgOfActiveBtn);
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    // const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
-    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+    // themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
 
-    if (focus) {
+    // if (focus) {
-      themeSwitcher.focus();
+    //   themeSwitcher.focus();
-    }
+    // }
   };
 
   window

ietf/templates/base.html

@@ -33,7 +33,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 {% if server_mode and server_mode != "production" %} bg-warning {% else %} bg-secondary {% endif %}  {% if navbar_mode %} {{ navbar_mode }} {% else %} fixed-top {% endif %}">
+        <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 %}">
             <div class="container-fluid">
                 <a class="navbar-brand" href="/">
                     <img alt="IETF Logo" class="me-2"
@@ -115,8 +115,7 @@
             </div>
         </div>
         {% block footer %}
-            <footer class="col-md-12 col-sm-12 bg-light-subtle text-center position-sticky">
+            <footer class="col-md-12 col-sm-12 border-top mt-5 py-5 bg-light-subtle text-center position-sticky">
-                <hr class="mx-3">
                 <a href="https://www.ietf.org/" class="p-3">IETF</a>
                 <a href="https://www.ietf.org/iesg/" class="p-3">IESG</a>
                 <a href="https://www.iab.org/" class="p-3">IAB</a>

ietf/templates/cookies/settings.html

@@ -12,7 +12,7 @@
         cookies disabled then you will not be able to change the settings
         (everything still continues to work by using default settings).
     </p>
-    <h2>How many days is considered "new"?</h2>
+    <h2 class="mt-4">How many days is considered "new"?</h2>
     <p>
         This setting affects how many days are considered "new enough" to get the special highlighting in the documents table. The default setting is {{ defaults.new_enough }} days.
     </p>
@@ -60,7 +60,7 @@
             90 days
         </a>
     </p>
-    <h2>How many days is considered "soon"?</h2>
+    <h2 class="mt-4">How many days is considered "soon"?</h2>
     <p>
         This setting tells what is considered "soon" when showing documents that are going to be expire soon. The Default setting is {{ defaults.expires_soon }} days.
     </p>
@@ -108,7 +108,7 @@
             90 days
         </a>
     </p>
-    <h2>Show full document text by default?</h2>
+    <h2 class="mt-4">Show full document text by default?</h2>
     <p>
         Show the full text immediately on the document page instead of only showing beginning of it. This defaults to {{ defaults.full_draft }}.
     </p>
@@ -128,7 +128,7 @@
             On
         </a>
     </p>
-    <h2>Show the left-hand menu?</h2>
+    <h2 class="mt-4">Show the left-hand menu?</h2>
     <p>
         Show the left-hand menu on all regular pages? This defaults to {{ defaults.left_menu }}.
     </p>
@@ -148,4 +148,24 @@
             On
         </a>
     </p>
+
+
+    <h2 class="mt-4">Which color mode should be used?</h2>
+    <p>
+        Use a light, dark or automatic (as indicated by OS) color mode.
+    </p>
+    <p class="btn-group d-flex" id="bd-theme">
+
+        <a class="btn btn-outline-primary" data-bs-theme-value="light">
+          <i class="theme-icon bi bi-brightness-high-fill"></i> Light
+        </a>
+
+        <a class="btn btn-outline-primary" data-bs-theme-value="dark">
+          <i class="theme-icon bi bi-moon-stars-fill"></i> Dark
+        </a>
+
+        <a class="btn btn-outline-primary" data-bs-theme-value="auto">
+          <i class="theme-icon bi bi-circle-half"></i> Auto
+        </a>
+    </p>
 {% endblock %}