Skip to content

Commit 5da6918

Browse files
mfosterwmfosterw
authored
Add dark mode (#260)
1 parent d280ca3 commit 5da6918

3 files changed

Lines changed: 139 additions & 3 deletions

File tree

‎democrasite/static/js/theme-toggler.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*!
2+
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3+
* Copyright 2011-2025 The Bootstrap Authors
4+
* Licensed under the Creative Commons Attribution 3.0 Unported License.
5+
*/
6+
7+
(() => {
8+
"use strict";
9+
10+
const getStoredTheme = () => localStorage.getItem("theme");
11+
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);
12+
13+
const getPreferredTheme = () => {
14+
const storedTheme = getStoredTheme();
15+
if (storedTheme) {
16+
return storedTheme;
17+
}
18+
19+
return window.matchMedia("(prefers-color-scheme: dark)").matches
20+
? "dark"
21+
: "light";
22+
};
23+
24+
const setTheme = (theme) => {
25+
let iconElem = document
26+
.getElementById("themeDropdown")
27+
.getElementsByTagName("i")[0];
28+
29+
let icons = ["bi-sun-fill", "bi-moon-stars-fill"];
30+
if (theme === "auto") {
31+
let newIcon = window.matchMedia("(prefers-color-scheme: dark)").matches
32+
? "bi-moon-stars-fill"
33+
: "bi-sun-fill";
34+
iconElem.classList.remove(...icons);
35+
iconElem.classList.add(newIcon);
36+
37+
document.documentElement.setAttribute(
38+
"data-bs-theme",
39+
window.matchMedia("(prefers-color-scheme: dark)").matches
40+
? "dark"
41+
: "light"
42+
);
43+
} else {
44+
let newIcon = theme == "dark" ? "bi-moon-stars-fill" : "bi-sun-fill";
45+
iconElem.classList.remove(...icons);
46+
iconElem.classList.add(newIcon);
47+
48+
document.documentElement.setAttribute("data-bs-theme", theme);
49+
}
50+
};
51+
52+
setTheme(getPreferredTheme());
53+
54+
const showActiveTheme = (theme, focus = false) => {
55+
const themeSwitcher = document.querySelector("#bd-theme");
56+
57+
if (!themeSwitcher) {
58+
return;
59+
}
60+
61+
const themeSwitcherText = document.querySelector("#bd-theme-text");
62+
const activeThemeIcon = document.querySelector(".theme-icon-active use");
63+
const btnToActive = document.querySelector(
64+
`[data-bs-theme-value="${theme}"]`
65+
);
66+
const svgOfActiveBtn = btnToActive
67+
.querySelector("svg use")
68+
.getAttribute("href");
69+
70+
document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
71+
element.classList.remove("active");
72+
element.setAttribute("aria-pressed", "false");
73+
});
74+
75+
btnToActive.classList.add("active");
76+
btnToActive.setAttribute("aria-pressed", "true");
77+
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
78+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
79+
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
80+
81+
if (focus) {
82+
themeSwitcher.focus();
83+
}
84+
};
85+
86+
window
87+
.matchMedia("(prefers-color-scheme: dark)")
88+
.addEventListener("change", () => {
89+
const storedTheme = getStoredTheme();
90+
if (storedTheme !== "light" && storedTheme !== "dark") {
91+
setTheme(getPreferredTheme());
92+
}
93+
});
94+
95+
window.addEventListener("DOMContentLoaded", () => {
96+
showActiveTheme(getPreferredTheme());
97+
98+
document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
99+
toggle.addEventListener("click", () => {
100+
const theme = toggle.getAttribute("data-bs-theme-value");
101+
setStoredTheme(theme);
102+
setTheme(theme);
103+
showActiveTheme(theme, true);
104+
});
105+
});
106+
});
107+
})();

‎democrasite/templates/base.html‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% load static i18n socialaccount %}
22

33
<!DOCTYPE html>
4-
<html lang="en">
4+
<html lang="en" data-bs-theme="light">
55
<head>
66
<meta charset="utf-8" />
77
<meta http-equiv="x-ua-compatible" content="ie=edge" />
@@ -46,13 +46,14 @@
4646
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
4747
<!-- place project specific Javascript in this file -->
4848
<script defer src="{% static 'js/project.js' %}"></script>
49+
<script defer src="{% static 'js/theme-toggler.js' %}"></script>
4950
{% endblock javascript %}
5051
{% block extra_head %}
5152
{% endblock extra_head %}
5253
</head>
5354
<body>
5455
<div class="mb-1">
55-
<nav class="navbar navbar-expand-md navbar-light bg-light">
56+
<nav class="navbar navbar-expand-md bg-body-tertiary shadow-sm">
5657
<div class="container-fluid">
5758
{% block navbar %}
5859
<button class="navbar-toggler navbar-toggler-right"
@@ -123,6 +124,34 @@
123124
<a href="{% url 'api-root' %}" class="nav-link">{% trans 'API' %}</a>
124125
</li>
125126
{% endif %}
127+
<li class="nav-item dropdown">
128+
<a class="nav-link dropdown-toggle"
129+
href="#"
130+
id="themeDropdown"
131+
role="button"
132+
data-bs-toggle="dropdown"
133+
aria-expanded="false">
134+
<i class="bi bi-sun-fill"></i>
135+
</a>
136+
<ul class="dropdown-menu dropdown-menu-end"
137+
aria-labelledby="themeDropdown">
138+
<li>
139+
<button class="dropdown-item" type="button" data-bs-theme-value="light">
140+
<i class="bi bi-sun-fill me-2"></i>Light
141+
</button>
142+
</li>
143+
<li>
144+
<button class="dropdown-item" type="button" data-bs-theme-value="dark">
145+
<i class="bi bi-moon-stars-fill me-2"></i>Dark
146+
</button>
147+
</li>
148+
<li>
149+
<button class="dropdown-item" type="button" data-bs-theme-value="auto">
150+
<i class="bi bi-circle-half me-2"></i>Auto
151+
</button>
152+
</li>
153+
</ul>
154+
</li>
126155
</ul>
127156
</div>
128157
{% endblock navbar %}

‎democrasite/templates/webiscite/bill_list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{% if forloop.counter0|divisibleby:4 %}<div class="row">{% endif %}
1111
<div class="col-sm-12 col-md-6 col-lg-3">
1212
<div class="card text-center mb-4
13-
{% if bill.constitutional %}bg-light{% endif %}">
13+
{% if bill.constitutional %}bg-body-tertiary{% endif %}">
1414
<div class="card-body
1515
{% if bill.status != bill.Status.OPEN %}inactive{% endif %}">
1616
<a class="card-link link-underline link-underline-opacity-0"

0 commit comments

Comments
 (0)
⚡