Skip to content

Commit 21014bb

Browse files
simonharrersimonharrer
authored
Merge pull request #32 from remotemobprogramming/darkmode
added darkmode activated by system preferences
2 parents 3ea7955 + 55db159 commit 21014bb

File tree

7 files changed

+86
-13
lines changed

7 files changed

+86
-13
lines changed

‎src/main/resources/public/bootstrap.bundle.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main/resources/public/bootstrap.min.css‎

Lines changed: 3 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main/resources/public/darkmode.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*!
2+
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3+
* Copyright 2011-2022 The Bootstrap Authors
4+
* Licensed under the Creative Commons Attribution 3.0 Unported License.
5+
*/
6+
7+
(() => {
8+
'use strict'
9+
10+
const storedTheme = localStorage.getItem('theme')
11+
12+
const getPreferredTheme = () => {
13+
if (storedTheme) {
14+
return storedTheme
15+
}
16+
17+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
18+
}
19+
20+
const setTheme = function (theme) {
21+
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
22+
document.documentElement.setAttribute('data-bs-theme', 'dark')
23+
} else {
24+
document.documentElement.setAttribute('data-bs-theme', theme)
25+
}
26+
}
27+
28+
setTheme(getPreferredTheme())
29+
30+
const showActiveTheme = theme => {
31+
const activeThemeIcon = document.querySelector('.theme-icon-active use')
32+
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
33+
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
34+
35+
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
36+
element.classList.remove('active')
37+
})
38+
39+
btnToActive.classList.add('active')
40+
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
41+
}
42+
43+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
44+
if (storedTheme !== 'light' || storedTheme !== 'dark') {
45+
setTheme(getPreferredTheme())
46+
}
47+
})
48+
49+
window.addEventListener('DOMContentLoaded', () => {
50+
showActiveTheme(getPreferredTheme())
51+
52+
document.querySelectorAll('[data-bs-theme-value]')
53+
.forEach(toggle => {
54+
toggle.addEventListener('click', () => {
55+
const theme = toggle.getAttribute('data-bs-theme-value')
56+
localStorage.setItem('theme', theme)
57+
setTheme(theme)
58+
showActiveTheme(theme)
59+
})
60+
})
61+
})
62+
})()

‎src/main/resources/templates/help.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -95,6 +95,7 @@ <h5>Activate Audio</h5>
9595
</footer>
9696

9797
<div th:replace="fragments/github-corner"></div>
98+
<script src="/darkmode.js"></script>
9899
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
99100
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
100101
</body>

‎src/main/resources/templates/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -108,7 +108,7 @@ <h1>Mob Timer</h1>
108108
document.getElementById('active-timers').innerHTML = text;
109109
});
110110
</script>
111-
111+
<script src="/darkmode.js"></script>
112112
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
113113
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
114114
</body>

‎src/main/resources/templates/room.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -35,6 +35,16 @@
3535
background-color: red;
3636
border-color: darkred;
3737
}
38+
@media (prefers-color-scheme: dark) {
39+
.vis-time-axis .vis-text {
40+
position: absolute;
41+
color: #b2b2b2;
42+
padding: 3px;
43+
overflow: hidden;
44+
box-sizing: border-box;
45+
white-space: nowrap;
46+
}
47+
}
3848
</style>
3949
</head>
4050
<body>
@@ -575,7 +585,7 @@ <h5>Integration with the mob tool</h5>
575585
</script>
576586

577587
<!-- Optional JavaScript -->
578-
588+
<script src="/darkmode.js"></script>
579589
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
580590
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
581591
</body>

‎src/main/resources/templates/stats.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-bs-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -73,6 +73,7 @@ <h2 class="mb-4">Stats</h2>
7373
</footer>
7474

7575
<div th:replace="fragments/github-corner"></div>
76+
<script src="/darkmode.js"></script>
7677
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
7778
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
7879
</body>

0 commit comments

Comments
 (0)