Skip to content

Commit 532664d

Browse files
avindraavindra
committed
Dark mode: eliminate flicker
addendum to fedora-infra#1962 to implement fedora-infra#1937
1 parent 734a194 commit 532664d

File tree

1 file changed

+35
-31
lines changed

1 file changed

+35
-31
lines changed

‎anitya/templates/master.html‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,41 @@
2020

2121
{% block header %}{% endblock %}
2222

23+
<script type="text/javascript">
24+
const html = document.documentElement;
25+
26+
const bulbOn = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
27+
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5"/>
28+
</svg>`;
29+
30+
const bulbOff = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-off" viewBox="0 0 16 16">
31+
<path fill-rule="evenodd" d="M2.23 4.35A6 6 0 0 0 2 6c0 1.691.7 3.22 1.826 4.31.203.196.359.4.453.619l.762 1.769A.5.5 0 0 0 5.5 13a.5.5 0 0 0 0 1 .5.5 0 0 0 0 1l.224.447a1 1 0 0 0 .894.553h2.764a1 1 0 0 0 .894-.553L10.5 15a.5.5 0 0 0 0-1 .5.5 0 0 0 0-1 .5.5 0 0 0 .288-.091L9.878 12H5.83l-.632-1.467a3 3 0 0 0-.676-.941 4.98 4.98 0 0 1-1.455-4.405zm1.588-2.653.708.707a5 5 0 0 1 7.07 7.07l.707.707a6 6 0 0 0-8.484-8.484zm-2.172-.051a.5.5 0 0 1 .708 0l12 12a.5.5 0 0 1-.708.708l-12-12a.5.5 0 0 1 0-.708"/>
32+
</svg>`;
33+
34+
let currentTheme = localStorage.getItem('theme');
35+
if (!currentTheme) {
36+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
37+
if (prefersDark) {
38+
currentTheme = 'dark';
39+
} else {
40+
currentTheme = 'light';
41+
}
42+
}
43+
44+
html.setAttribute('data-bs-theme', currentTheme);
45+
46+
document.addEventListener('DOMContentLoaded', () => {
47+
const toggle = document.getElementById('theme-toggle');
48+
toggle.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
49+
toggle.onclick = function() {
50+
currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
51+
html.setAttribute('data-bs-theme', currentTheme);
52+
localStorage.setItem('theme', currentTheme);
53+
this.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
54+
};
55+
});
56+
</script>
57+
2358
</head>
2459

2560
<body
@@ -228,37 +263,6 @@
228263
delay: 600,
229264
});
230265
});
231-
232-
const html = document.documentElement;
233-
234-
const bulbOn = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
235-
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5"/>
236-
</svg>`;
237-
238-
const bulbOff = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-off" viewBox="0 0 16 16">
239-
<path fill-rule="evenodd" d="M2.23 4.35A6 6 0 0 0 2 6c0 1.691.7 3.22 1.826 4.31.203.196.359.4.453.619l.762 1.769A.5.5 0 0 0 5.5 13a.5.5 0 0 0 0 1 .5.5 0 0 0 0 1l.224.447a1 1 0 0 0 .894.553h2.764a1 1 0 0 0 .894-.553L10.5 15a.5.5 0 0 0 0-1 .5.5 0 0 0 0-1 .5.5 0 0 0 .288-.091L9.878 12H5.83l-.632-1.467a3 3 0 0 0-.676-.941 4.98 4.98 0 0 1-1.455-4.405zm1.588-2.653.708.707a5 5 0 0 1 7.07 7.07l.707.707a6 6 0 0 0-8.484-8.484zm-2.172-.051a.5.5 0 0 1 .708 0l12 12a.5.5 0 0 1-.708.708l-12-12a.5.5 0 0 1 0-.708"/>
240-
</svg>`;
241-
242-
const toggle = document.getElementById('theme-toggle');
243-
let currentTheme = localStorage.getItem('theme');
244-
if (!currentTheme) {
245-
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
246-
if (prefersDark) {
247-
currentTheme = 'dark';
248-
} else {
249-
currentTheme = 'light';
250-
}
251-
}
252-
253-
html.setAttribute('data-bs-theme', currentTheme);
254-
toggle.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
255-
toggle.onclick = function() {
256-
currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
257-
html.setAttribute('data-bs-theme', currentTheme);
258-
localStorage.setItem('theme', currentTheme);
259-
toggle.innerHTML = currentTheme === 'dark' ? bulbOff : bulbOn;
260-
};
261-
262266
</script>
263267
{% block jscript %}{% endblock %}
264268
</body>

0 commit comments

Comments
 (0)