From 342e6f58bd825fcce25d64bbbd293189245070d0 Mon Sep 17 00:00:00 2001 From: Lars Eggert Date: Fri, 26 May 2023 16:16:00 +0200 Subject: [PATCH] Color mode fixes --- ietf/static/css/datepicker.scss | 6 +++--- ietf/static/css/document_html.scss | 4 ++-- ietf/static/css/ietf.scss | 7 +++---- ietf/static/css/list.scss | 4 ++-- ietf/static/css/select2.scss | 7 ++++--- ietf/static/js/theme.js | 25 +++++++++++++------------ ietf/templates/base.html | 5 ++--- ietf/templates/cookies/settings.html | 28 ++++++++++++++++++++++++---- 8 files changed, 53 insertions(+), 33 deletions(-) diff --git a/ietf/static/css/datepicker.scss b/ietf/static/css/datepicker.scss index 9b2639a37..4e2655b3f 100644 --- a/ietf/static/css/datepicker.scss +++ b/ietf/static/css/datepicker.scss @@ -1,7 +1,7 @@ @import "bootstrap/scss/functions"; -// Enable automatic dark mode -$color-mode-type: media-query; +// Enable color modes +$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"; diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss index 21c1106e0..db538a058 100644 --- a/ietf/static/css/document_html.scss +++ b/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 -$color-mode-type: media-query; +// Enable color modes +$color-mode-type: data; @import "bootstrap/scss/variables"; @import "bootstrap/scss/variables-dark"; diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss index 9d40faf2e..cd19626e5 100644 --- a/ietf/static/css/ietf.scss +++ b/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 - -$color-mode-type: media-query; +// Enable color modes +$color-mode-type: data; // 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 { diff --git a/ietf/static/css/list.scss b/ietf/static/css/list.scss index 20eafb6df..142013c3d 100644 --- a/ietf/static/css/list.scss +++ b/ietf/static/css/list.scss @@ -1,8 +1,8 @@ // Import bootstrap helpers @import "bootstrap/scss/functions"; -// Enable automatic dark mode -$color-mode-type: media-query; +// Enable color modes +$color-mode-type: data; @import "bootstrap/scss/variables"; @import "bootstrap/scss/variables-dark"; diff --git a/ietf/static/css/select2.scss b/ietf/static/css/select2.scss index 498837f75..f0ebfbde3 100644 --- a/ietf/static/css/select2.scss +++ b/ietf/static/css/select2.scss @@ -1,7 +1,7 @@ @import "bootstrap/scss/functions"; -// Enable automatic dark mode -$color-mode-type: media-query; +// Enable color modes +$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"; diff --git a/ietf/static/js/theme.js b/ietf/static/js/theme.js index 2baac13c9..35477152e 100644 --- a/ietf/static/js/theme.js +++ b/ietf/static/js/theme.js @@ -38,15 +38,16 @@ if (!themeSwitcher) { return; } - - const themeSwitcherText = document.querySelector("#bd-theme-text"); - const activeThemeIcon = document.querySelector(".theme-icon-active use"); + // Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown. + // Kept them here for easier future diffing. + // 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"); + // const svgOfActiveBtn = btnToActive + // .querySelector("svg use") + // .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); - const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`; - themeSwitcher.setAttribute("aria-label", themeSwitcherLabel); + // activeThemeIcon.setAttribute("href", svgOfActiveBtn); + // const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`; + // themeSwitcher.setAttribute("aria-label", themeSwitcherLabel); - if (focus) { - themeSwitcher.focus(); - } + // if (focus) { + // themeSwitcher.focus(); + // } }; window diff --git a/ietf/templates/base.html b/ietf/templates/base.html index 39fdb97c4..87221e9ac 100644 --- a/ietf/templates/base.html +++ b/ietf/templates/base.html @@ -33,7 +33,7 @@ data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}"> {% analytical_body_top %} -