Skip to content

Commit 578d183

Browse files
ArhellArhell
authored
update dark theme (#247)
1 parent 67c5936 commit 578d183

File tree

2 files changed

+79
-79
lines changed

2 files changed

+79
-79
lines changed

‎_includes/js.html

+76-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,76 @@
1-
<script src="https://assets.phalcon.io/phalcon/test/core.js"></script>
1+
<script>
2+
(() => {
3+
'use strict'
4+
5+
const getStoredTheme = () => localStorage.getItem('theme')
6+
const setStoredTheme = theme => localStorage.setItem('theme', theme)
7+
8+
const getPreferredTheme = () => {
9+
const storedTheme = getStoredTheme()
10+
if (storedTheme) {
11+
return storedTheme
12+
}
13+
14+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
15+
}
16+
17+
const setTheme = theme => {
18+
if (theme === 'auto') {
19+
document.documentElement.setAttribute('data-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
20+
} else {
21+
document.documentElement.setAttribute('data-theme', theme)
22+
}
23+
}
24+
25+
setTheme(getPreferredTheme())
26+
27+
const showActiveTheme = (theme, focus = false) => {
28+
const themeSwitcher = document.querySelector('#bd-theme')
29+
30+
if (!themeSwitcher) {
31+
return
32+
}
33+
34+
const themeSwitcherText = document.querySelector('#bd-theme-text')
35+
const activeThemeIcon = document.querySelector('.theme-icon-active use')
36+
const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
37+
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
38+
39+
document.querySelectorAll('[data-theme-value]').forEach(element => {
40+
element.classList.remove('active')
41+
element.setAttribute('aria-pressed', 'false')
42+
})
43+
44+
btnToActive.classList.add('active')
45+
btnToActive.setAttribute('aria-pressed', 'true')
46+
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
47+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
48+
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
49+
50+
if (focus) {
51+
themeSwitcher.focus()
52+
}
53+
}
54+
55+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
56+
const storedTheme = getStoredTheme()
57+
if (storedTheme !== 'light' && storedTheme !== 'dark') {
58+
setTheme(getPreferredTheme())
59+
}
60+
})
61+
62+
window.addEventListener('DOMContentLoaded', () => {
63+
showActiveTheme(getPreferredTheme())
64+
65+
document.querySelectorAll('[data-theme-value]')
66+
.forEach(toggle => {
67+
toggle.addEventListener('click', () => {
68+
const theme = toggle.getAttribute('data-theme-value')
69+
setStoredTheme(theme)
70+
setTheme(theme)
71+
showActiveTheme(theme, true)
72+
})
73+
})
74+
})
75+
})()
76+
</script>

‎_includes/meta.html

+3-78
Original file line numberDiff line numberDiff line change
@@ -4,84 +4,6 @@
44

55
<meta charset="utf-8">
66
<meta name="viewport min-width=320px" content="min-width=320, initial-scale=1.0" />
7-
<script>
8-
(() => {
9-
'use strict'
10-
11-
const getStoredTheme = () => localStorage.getItem('theme')
12-
const setStoredTheme = theme => localStorage.setItem('theme', theme)
13-
14-
const getPreferredTheme = () => {
15-
const storedTheme = getStoredTheme()
16-
if (storedTheme) {
17-
return storedTheme
18-
}
19-
20-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
21-
}
22-
23-
const setTheme = theme => {
24-
if (theme === 'auto') {
25-
document.documentElement.setAttribute('data-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
26-
} else {
27-
document.documentElement.setAttribute('data-theme', theme)
28-
}
29-
}
30-
31-
setTheme(getPreferredTheme())
32-
33-
const showActiveTheme = (theme, focus = false) => {
34-
const themeSwitcher = document.querySelector('#bd-theme')
35-
36-
if (!themeSwitcher) {
37-
return
38-
}
39-
40-
const themeSwitcherText = document.querySelector('#bd-theme-text')
41-
const activeThemeIcon = document.querySelector('.theme-icon-active use')
42-
const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
43-
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
44-
45-
document.querySelectorAll('[data-theme-value]').forEach(element => {
46-
element.classList.remove('active')
47-
element.setAttribute('aria-pressed', 'false')
48-
})
49-
50-
btnToActive.classList.add('active')
51-
btnToActive.setAttribute('aria-pressed', 'true')
52-
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
53-
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
54-
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
55-
56-
if (focus) {
57-
themeSwitcher.focus()
58-
}
59-
}
60-
61-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
62-
const storedTheme = getStoredTheme()
63-
if (storedTheme !== 'light' && storedTheme !== 'dark') {
64-
setTheme(getPreferredTheme())
65-
}
66-
})
67-
68-
window.addEventListener('DOMContentLoaded', () => {
69-
showActiveTheme(getPreferredTheme())
70-
71-
document.querySelectorAll('[data-theme-value]')
72-
.forEach(toggle => {
73-
toggle.addEventListener('click', () => {
74-
const theme = toggle.getAttribute('data-theme-value')
75-
setStoredTheme(theme)
76-
setTheme(theme)
77-
showActiveTheme(theme, true)
78-
})
79-
})
80-
})
81-
})()
82-
</script>
83-
<link rel="stylesheet"
84-
href="https://assets.phalcon.io/phalcon/test/dark.css">
857
<meta name="author" content="{{ site.app.author }}">
868
<meta name="generator" content="{{ site.app.generator }}">
879
<meta name="application-name" content="{{ site.app.name }}">
@@ -128,7 +50,10 @@
12850
<meta name="msapplication-config" content="https://assets.phalcon.io/phalcon/favicons/browserconfig.xml" />
12951
<meta name="msapplication-TileColor" content="#273646">
13052
<meta name="theme-color" content="#273646">
53+
<script>document.documentElement.classList.add(localStorage.getItem('mode') === 'auto' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : localStorage.getItem('mode'))</script>
13154

55+
<link rel="stylesheet"
56+
href="https://assets.phalcon.io/phalcon/test/dark.css">
13257
<link rel="stylesheet"
13358
href="https://assets.phalcon.io/phalcon/test/core.css">
13459
<link rel="stylesheet"

0 commit comments

Comments
 (0)