altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

fix: Fix logo display under some dark/light mode settings (#6129)

Browse source 
Fixes #6126
This commit is contained in:
Lars Eggert 2023-08-11 18:28:41 +03:00 committed by GitHub
parent 3e51287052
commit 540c4895bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 131 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ietf/static/css/document_html.scss
View file

@ -73,6 +73,27 @@ $color-mode-type: data;
display: inherit;
}
// Toggle classes for dark/light modes
[data-bs-theme="dark"] {
.d-dm-none {
display: none;
}
.d-lm-none {
display: initial;
}
}
[data-bs-theme="light"] {
.d-dm-none {
display: initial;
}
.d-lm-none {
display: none;
}
}
@media screen {
@include media-breakpoint-down(md) {
body {

21
ietf/static/css/ietf.scss
View file

@ -88,6 +88,27 @@ html {
scroll-padding-top: 60px;
}
// Toggle classes for dark/light modes
[data-bs-theme="dark"] {
.d-dm-none {
display: none;
}
.d-lm-none {
display: initial;
}
}
[data-bs-theme="light"] {
.d-dm-none {
display: initial;
}
.d-lm-none {
display: none;
}
}
// Make submenus open on hover.
@include media-breakpoint-up(lg) {
.dropdown-menu>li>ul {

116
ietf/static/js/theme.js
View file

@ -2,87 +2,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.
*
* https://github.com/twbs/bootstrap/blob/main/site/static/docs/5.3/assets/js/color-modes.js
*/
(() => {
"use strict";
'use strict'
const storedTheme = localStorage.getItem("theme") || "auto";
const getStoredTheme = () => localStorage.getItem('theme') || 'auto'
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme;
return storedTheme
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
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");
const setTheme = theme => {
if (theme === 'auto') {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'light')
}
} else {
document.documentElement.setAttribute("data-bs-theme", theme);
document.documentElement.setAttribute('data-bs-theme', theme)
}
};
}
setTheme(getPreferredTheme());
setTheme(getPreferredTheme())
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");
const themeSwitcher = document.querySelector('#bd-theme')
if (!themeSwitcher) {
return;
return
}
// 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 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");
});
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);
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();
// }
};
if (focus) {
themeSwitcher.focus()
}
}
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", () => {
if (storedTheme !== "light" || storedTheme !== "dark") {
setTheme(getPreferredTheme());
}
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener("DOMContentLoaded", () => {
showActiveTheme(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);
});
});
});
})();
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme, true)
})
})
})
})()

61
ietf/templates/logo.html
View file

@ -2,33 +2,34 @@
{% load static %}
{% origin %}
<picture>
<source
{% if org == "iab" %}
srcset="{% static 'ietf/images/iab-logo-white.svg' %}"
{% elif org == "ietf" %}
{% if nor %}
srcset="{% static 'ietf/images/ietf-logo-nor-white.svg' %}"
{% else %}
srcset="{% static 'ietf/images/ietf-logo-white.svg' %}"
{% endif %}
{% elif org == "irtf" %}
srcset="{% static 'ietf/images/irtf-logo-white.svg' %}"
{% endif %}
media="(prefers-color-scheme: dark)">
<img alt="{{ org|upper }} Logo"
{% if classes %}class="{{ classes }}"{% endif %}
{% if title %}title="{{ title }}"{% endif %}
{% if org == "iab" %}
src="{% static 'ietf/images/iab-logo.svg' %}"
{% elif org == "ietf" %}
{% if nor %}
src="{% static 'ietf/images/ietf-logo-nor.svg' %}"
{% else %}
src="{% static 'ietf/images/ietf-logo.svg' %}"
{% endif %}
{% elif org == "irtf" %}
src="{% static 'ietf/images/irtf-logo.svg' %}"
{% endif %}
>
</picture>
<img alt="{{ org|upper }} Logo"
class="d-lm-none{% if classes %} {{ classes }}{% endif %}"
{% if title %}title="{{ title }}"{% endif %}
{% if org == "iab" %}
src="{% static 'ietf/images/iab-logo-white.svg' %}"
{% elif org == "ietf" %}
{% if nor %}
src="{% static 'ietf/images/ietf-logo-nor-white.svg' %}"
{% else %}
src="{% static 'ietf/images/ietf-logo-white.svg' %}"
{% endif %}
{% elif org == "irtf" %}
src="{% static 'ietf/images/irtf-logo-white.svg' %}"
{% endif %}
>
<img alt="{{ org|upper }} Logo"
class="d-dm-none{% if classes %} {{ classes }}{% endif %}"
{% if title %}title="{{ title }}"{% endif %}
{% if org == "iab" %}
src="{% static 'ietf/images/iab-logo.svg' %}"
{% elif org == "ietf" %}
{% if nor %}
src="{% static 'ietf/images/ietf-logo-nor.svg' %}"
{% else %}
src="{% static 'ietf/images/ietf-logo.svg' %}"
{% endif %}
{% elif org == "irtf" %}
src="{% static 'ietf/images/irtf-logo.svg' %}"
{% endif %}
>