Skip to content

Commit 342e6f5

Browse files
larseggertlarseggert
committed
Color mode fixes
1 parent 112d3b9 commit 342e6f5

8 files changed

Lines changed: 53 additions & 33 deletions

File tree

‎ietf/static/css/datepicker.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "bootstrap/scss/functions";
22

3-
// Enable automatic dark mode
4-
$color-mode-type: media-query;
3+
// Enable color modes
4+
$color-mode-type: data;
55

66
@import "bootstrap/scss/variables";
77
@import "bootstrap/scss/variables-dark";
@@ -10,6 +10,6 @@ $color-mode-type: media-query;
1010
@import "bootstrap/scss/root";
1111

1212
// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
13-
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
13+
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;
1414

1515
@import "vanillajs-datepicker/sass/datepicker-bs5";

‎ietf/static/css/document_html.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consola
1111

1212
@import "bootstrap/scss/functions";
1313

14-
// Enable automatic dark mode
15-
$color-mode-type: media-query;
14+
// Enable color modes
15+
$color-mode-type: data;
1616

1717
@import "bootstrap/scss/variables";
1818
@import "bootstrap/scss/variables-dark";

‎ietf/static/css/ietf.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ $popover-max-width: 100%;
1515
$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";
1616
$font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1717

18-
// Enable automatic dark mode
19-
20-
$color-mode-type: media-query;
18+
// Enable color modes
19+
$color-mode-type: data;
2120

2221
// Only import what we need:
2322

@@ -451,7 +450,7 @@ td.position-recuse {
451450
}
452451

453452
td.position-norecord {
454-
background-color: $white; // $color-norecord;
453+
background-color: transparent;
455454
}
456455

457456
td.position-empty {

‎ietf/static/css/list.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Import bootstrap helpers
22
@import "bootstrap/scss/functions";
33

4-
// Enable automatic dark mode
5-
$color-mode-type: media-query;
4+
// Enable color modes
5+
$color-mode-type: data;
66

77
@import "bootstrap/scss/variables";
88
@import "bootstrap/scss/variables-dark";

‎ietf/static/css/select2.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "bootstrap/scss/functions";
22

3-
// Enable automatic dark mode
4-
$color-mode-type: media-query;
3+
// Enable color modes
4+
$color-mode-type: data;
55

66
@import "bootstrap/scss/variables";
77
@import "bootstrap/scss/variables-dark";
@@ -10,6 +10,7 @@ $color-mode-type: media-query;
1010
@import "bootstrap/scss/root";
1111

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

‎ietf/static/js/theme.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,16 @@
3838
if (!themeSwitcher) {
3939
return;
4040
}
41-
42-
const themeSwitcherText = document.querySelector("#bd-theme-text");
43-
const activeThemeIcon = document.querySelector(".theme-icon-active use");
41+
// Commented-out lines are from the original bs5 js, which uses a more complicated pref dropdown.
42+
// Kept them here for easier future diffing.
43+
// const themeSwitcherText = document.querySelector("#bd-theme-text");
44+
// const activeThemeIcon = document.querySelector(".theme-icon-active use");
4445
const btnToActive = document.querySelector(
4546
`[data-bs-theme-value="${theme}"]`
4647
);
47-
const svgOfActiveBtn = btnToActive
48-
.querySelector("svg use")
49-
.getAttribute("href");
48+
// const svgOfActiveBtn = btnToActive
49+
// .querySelector("svg use")
50+
// .getAttribute("href");
5051

5152
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
5253
element.classList.remove("active");
@@ -55,13 +56,13 @@
5556

5657
btnToActive.classList.add("active");
5758
btnToActive.setAttribute("aria-pressed", "true");
58-
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
59-
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
60-
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
59+
// activeThemeIcon.setAttribute("href", svgOfActiveBtn);
60+
// const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
61+
// themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
6162

62-
if (focus) {
63-
themeSwitcher.focus();
64-
}
63+
// if (focus) {
64+
// themeSwitcher.focus();
65+
// }
6566
};
6667

6768
window

‎ietf/templates/base.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
3434
{% analytical_body_top %}
3535
<a class="visually-hidden visually-hidden-focusable" href="#content">Skip to main content</a>
36-
<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 %}">
36+
<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 %}">
3737
<div class="container-fluid">
3838
<a class="navbar-brand" href="/">
3939
<img alt="IETF Logo" class="me-2"
@@ -115,8 +115,7 @@
115115
</div>
116116
</div>
117117
{% block footer %}
118-
<footer class="col-md-12 col-sm-12 bg-light-subtle text-center position-sticky">
119-
<hr class="mx-3">
118+
<footer class="col-md-12 col-sm-12 border-top mt-5 py-5 bg-light-subtle text-center position-sticky">
120119
<a href="https://www.ietf.org/" class="p-3">IETF</a>
121120
<a href="https://www.ietf.org/iesg/" class="p-3">IESG</a>
122121
<a href="https://www.iab.org/" class="p-3">IAB</a>

‎ietf/templates/cookies/settings.html‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1>User settings</h1>
1212
cookies disabled then you will not be able to change the settings
1313
(everything still continues to work by using default settings).
1414
</p>
15-
<h2>How many days is considered "new"?</h2>
15+
<h2 class="mt-4">How many days is considered "new"?</h2>
1616
<p>
1717
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.
1818
</p>
@@ -60,7 +60,7 @@ <h2>How many days is considered "new"?</h2>
6060
90 days
6161
</a>
6262
</p>
63-
<h2>How many days is considered "soon"?</h2>
63+
<h2 class="mt-4">How many days is considered "soon"?</h2>
6464
<p>
6565
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.
6666
</p>
@@ -108,7 +108,7 @@ <h2>How many days is considered "soon"?</h2>
108108
90 days
109109
</a>
110110
</p>
111-
<h2>Show full document text by default?</h2>
111+
<h2 class="mt-4">Show full document text by default?</h2>
112112
<p>
113113
Show the full text immediately on the document page instead of only showing beginning of it. This defaults to {{ defaults.full_draft }}.
114114
</p>
@@ -128,7 +128,7 @@ <h2>Show full document text by default?</h2>
128128
On
129129
</a>
130130
</p>
131-
<h2>Show the left-hand menu?</h2>
131+
<h2 class="mt-4">Show the left-hand menu?</h2>
132132
<p>
133133
Show the left-hand menu on all regular pages? This defaults to {{ defaults.left_menu }}.
134134
</p>
@@ -148,4 +148,24 @@ <h2>Show the left-hand menu?</h2>
148148
On
149149
</a>
150150
</p>
151+
152+
153+
<h2 class="mt-4">Which color mode should be used?</h2>
154+
<p>
155+
Use a light, dark or automatic (as indicated by OS) color mode.
156+
</p>
157+
<p class="btn-group d-flex" id="bd-theme">
158+
159+
<a class="btn btn-outline-primary" data-bs-theme-value="light">
160+
<i class="theme-icon bi bi-brightness-high-fill"></i> Light
161+
</a>
162+
163+
<a class="btn btn-outline-primary" data-bs-theme-value="dark">
164+
<i class="theme-icon bi bi-moon-stars-fill"></i> Dark
165+
</a>
166+
167+
<a class="btn btn-outline-primary" data-bs-theme-value="auto">
168+
<i class="theme-icon bi bi-circle-half"></i> Auto
169+
</a>
170+
</p>
151171
{% endblock %}

0 commit comments

Comments
 (0)