Skip to content

Commit 12eda72

Browse files
opatutopatut
committed
Light and dark toggle
1 parent ff428cf commit 12eda72

10 files changed

Lines changed: 107 additions & 44 deletions

File tree

‎assets/js/obs.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,38 @@ function initTocHide() {
7777
}
7878
}
7979
document.addEventListener('DOMContentLoaded', initTocHide)
80+
81+
//////////////////////////////////////////////
82+
83+
const darkQuery = window.matchMedia("(prefers-color-schema: dark)")
84+
darkQuery.addEventListener("change", () => {
85+
setDarkMode(null)
86+
})
87+
88+
function setDarkMode(mode) {
89+
window.localStorage.setItem('darkMode', JSON.stringify(mode))
90+
const link = document.getElementById('_dark_theme')
91+
link.setAttribute('media', mode === true ? 'screen' : mode === false ? 'disabled' : "screen and (prefers-color-scheme: dark)" )
92+
}
93+
94+
95+
function initColorToggle() {
96+
let mode
97+
try {
98+
mode = JSON.parse(window.localStorage.getItem('darkMode'))
99+
} catch(e) {
100+
// ignore
101+
}
102+
103+
if (mode === true || mode === false) {
104+
setDarkMode(mode)
105+
}
106+
107+
document.querySelectorAll('.dark-toggle').forEach((el) => {
108+
el.addEventListener('click', () => {
109+
setDarkMode(el.classList.contains('dark'))
110+
})
111+
})
112+
}
113+
114+
document.addEventListener('DOMContentLoaded', initColorToggle)

‎assets/scss/dark.scss‎

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,36 @@
11
// Dark mode, as detected by the media query
22

3-
:root {
4-
--border-color: rgba(0, 0, 0, 0.1);
5-
--background: #FFFFFF;
6-
--foreground: #101010;
7-
--background-1: #f1f1f6;
8-
--background-2: #e9e9e9;
9-
10-
--dark-text: #101010;
11-
12-
--faq-question-color: #c1ebfb;
3+
.dark-toggle.light {
4+
display: initial;
5+
}
6+
.dark-toggle.dark {
7+
display: none;
138
}
149

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--border-color: rgba(255, 255, 255, 0.2);
18-
--background: #101010;
19-
--background-1: #303030;
20-
--background-2: #505050;
21-
--foreground: #FFFFFF;
22-
--faq-question-color: #07445d;
23-
color-scheme: dark;
24-
color: var(--foreground);
25-
background: var(--background);
26-
}
10+
html {
11+
--border-color: rgba(255, 255, 255, 0.2);
12+
--background: #101010;
13+
--background-1: #303030;
14+
--background-2: #505050;
15+
--foreground: #FFFFFF;
16+
--faq-question-color: #07445d;
17+
color-scheme: dark;
18+
color: var(--foreground);
19+
background: var(--background);
20+
}
2721

28-
.alert-info {
29-
background: adjust-color(blue, $alpha: -0.8);
30-
}
22+
.alert-info {
23+
background: adjust-color(blue, $alpha: -0.8);
24+
}
3125

32-
.alert-warning {
33-
background: adjust-color(red, $alpha: -0.8);
34-
}
26+
.alert-warning {
27+
background: adjust-color(red, $alpha: -0.8);
28+
}
3529

36-
.alert-success {
37-
background: adjust-color(green, $alpha: -0.8);
38-
}
30+
.alert-success {
31+
background: adjust-color(green, $alpha: -0.8);
32+
}
3933

40-
.device-type-cell img {
41-
filter: #{"invert()"};
42-
}
34+
.device-type-cell img {
35+
filter: #{"invert()"};
4336
}

‎assets/scss/features.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,3 +592,14 @@ ul.blog-posts > li > h5 > a {
592592
}
593593
}
594594
}
595+
596+
.dark-toggle {
597+
cursor: pointer;
598+
}
599+
600+
.dark-toggle.light {
601+
display: none;
602+
}
603+
.dark-toggle.dark {
604+
display: initial;
605+
}

‎assets/scss/main.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,5 @@
22
@import "baseline.scss";
33
@import "layout.scss";
44
@import "features.scss";
5-
@import "dark.scss";
65
@import "print.scss";
76
@import "slider.scss";

‎assets/scss/variables.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,15 @@ $media-desktop: screen and (min-width: $desktop-size);
6767
url('/fonts/open-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
6868
url('/fonts/open-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
6969
}
70+
71+
html {
72+
--border-color: rgba(0, 0, 0, 0.1);
73+
--background: #FFFFFF;
74+
--foreground: #101010;
75+
--background-1: #f1f1f6;
76+
--background-2: #e9e9e9;
77+
78+
--dark-text: #101010;
79+
80+
--faq-question-color: #c1ebfb;
81+
}

‎fontawesome-download.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#!/bin/sh
22
set -ex
3-
icons="brands/discourse brands/github brands/mastodon solid/video solid/person-biking solid/arrow-right solid/arrow-left solid/lightbulb solid/bars solid/xmark"
3+
icons="brands/discourse brands/github brands/mastodon solid/video solid/person-biking solid/arrow-right solid/arrow-left solid/lightbulb solid/bars solid/xmark solid/moon solid/sun"
44

55
dest=fontawesome
66
url=https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs

‎fontawesome/moon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎fontawesome/sun.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎layouts/partials/footer.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@
33
<li>&copy; {{ now.Year }} OpenBikeSensor Contributors – veröffentlicht unter LGPL-3.0</li>
44
<li><a class="text-white" href="{{ ref . (dict "path" "contact" "lang" "de") }}">Kontakt / Impressum</a></li>
55
</ul>
6+
7+
<span class="dark-toggle dark">{{ partial "fa" "moon" }}</span><span class="dark-toggle light">{{ partial "fa" "sun" }}</span>
68
</footer>

‎layouts/partials/head-css.html‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
2-
{{ $scssMain := "scss/main.scss"}}
31
{{ if not hugo.IsProduction }}
4-
{{/* Note the missing postCSS. This makes it snappier to develop in Chrome, but makes it look sub-optimal in other browsers. */}}
5-
{{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) }}
6-
<link href="{{ $css.RelPermalink }}" rel="stylesheet">
2+
3+
{{ $css := resources.Get "scss/main.scss" | toCSS (dict "enableSourceMap" true) }}
4+
<link href="{{ $css.RelPermalink }}" rel="stylesheet">
5+
6+
{{ $css := resources.Get "scss/dark.scss" | toCSS (dict "enableSourceMap" true) }}
7+
<link href="{{ $css.RelPermalink }}" rel="stylesheet" media="screen and (prefers-color-scheme: dark)" id="_dark_theme">
8+
9+
710
{{ else }}
8-
{{ $css := resources.Get $scssMain | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
9-
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
10-
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">
11+
12+
{{ $css := resources.Get "scss/main.scss" | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
13+
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
14+
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}">
15+
16+
{{ $css := resources.Get "scss/dark.scss" | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
17+
<link rel="preload" href="{{ $css.RelPermalink }}" as="style">
18+
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.integrity }}" media="screen and (prefers-color-scheme: dark)" id="_dark_theme">
19+
1120
{{ end }}

0 commit comments

Comments
 (0)