Skip to content

Commit 8fba58d

Browse files
ArhellArhell
authored
update theme js (#306)
1 parent 6a2fa1b commit 8fba58d

File tree

3 files changed

+142
-97
lines changed

3 files changed

+142
-97
lines changed

‎Gemfile

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
source 'https://rubygems.org'
22

3-
gem 'jekyll', '>= 3.10.0'
4-
gem 'github-pages', '~> 232'
3+
gem 'jekyll', '~>4.3.4'
54

65
group :jekyll_plugins do
76
gem 'jekyll-sitemap'
7+
gem 'algolia'
88
gem 'kramdown-parser-gfm'
99
end

‎_includes/head.html

+63-18
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,80 @@
1111
<meta name="viewport min-width=320px" content="min-width=320, initial-scale=1.0"/>
1212

1313
<script>
14-
class LightDark {
14+
(() => {
15+
'use strict'
1516

16-
constructor() {
17-
const html = document.documentElement, mode = localStorage.getItem('mode') || 'auto'
18-
const getPreferredMode = () => matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
17+
const getStoredTheme = () => localStorage.getItem('theme')
18+
const setStoredTheme = theme => localStorage.setItem('theme', theme)
1919

20-
const switchMode = mode => {
21-
const newMode = mode === 'auto' ? getPreferredMode() : mode
22-
html.style.colorScheme = mode === 'auto' ? 'light dark' : newMode
20+
const getPreferredTheme = () => {
21+
const storedTheme = getStoredTheme()
22+
if (storedTheme) {
23+
return storedTheme
24+
}
25+
26+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
27+
}
28+
29+
const setTheme = theme => {
30+
if (theme === 'auto') {
31+
document.documentElement.setAttribute('data-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
32+
} else {
33+
document.documentElement.setAttribute('data-theme', theme)
34+
}
35+
}
2336

24-
html.classList.remove('light', 'dark')
25-
html.classList.add(`${newMode}`)
26-
localStorage.setItem('mode', mode)
37+
setTheme(getPreferredTheme())
2738

28-
document.querySelectorAll('[data-mode]').forEach(el => el.classList.toggle('active', el.dataset.mode === mode))
39+
const showActiveTheme = (theme, focus = false) => {
40+
const themeSwitcher = document.querySelector('#bd-theme')
41+
42+
if (!themeSwitcher) {
43+
return
2944
}
3045

31-
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
32-
if (localStorage.getItem('mode') === 'auto') switchMode('auto')
46+
const themeSwitcherText = document.querySelector('#bd-theme-text')
47+
const activeThemeIcon = document.querySelector('.theme-icon-active use')
48+
const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
49+
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
50+
51+
document.querySelectorAll('[data-theme-value]').forEach(element => {
52+
element.classList.remove('active')
53+
element.setAttribute('aria-pressed', 'false')
3354
})
3455

35-
document.addEventListener('click', e => e.target.dataset.mode && switchMode(e.target.dataset.mode))
56+
btnToActive.classList.add('active')
57+
btnToActive.setAttribute('aria-pressed', 'true')
58+
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
59+
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
60+
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
3661

37-
switchMode(mode)
62+
if (focus) {
63+
themeSwitcher.focus()
64+
}
3865
}
3966

40-
}
41-
42-
new LightDark()
67+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
68+
const storedTheme = getStoredTheme()
69+
if (storedTheme !== 'light' && storedTheme !== 'dark') {
70+
setTheme(getPreferredTheme())
71+
}
72+
})
73+
74+
window.addEventListener('DOMContentLoaded', () => {
75+
showActiveTheme(getPreferredTheme())
76+
77+
document.querySelectorAll('[data-theme-value]')
78+
.forEach(toggle => {
79+
toggle.addEventListener('click', () => {
80+
const theme = toggle.getAttribute('data-theme-value')
81+
setStoredTheme(theme)
82+
setTheme(theme)
83+
showActiveTheme(theme, true)
84+
})
85+
})
86+
})
87+
})()
4388
</script>
4489

4590
<meta name="generator" content="Jekyll">

‎assets/css/dark.css

+77-77
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
--primary-color: #eee;
44
}
55

6-
.dark {
6+
[data-theme] {
77
--background-color: #121212;
88
--primary-color: #eee;
99
}
@@ -84,147 +84,147 @@
8484
border: 3px solid transparent;
8585
}
8686

87-
.dark .phalcon-blog,
88-
.dark body,
89-
.dark .base-info {
87+
[data-theme] .phalcon-blog,
88+
[data-theme] body,
89+
[data-theme] .base-info {
9090
background-color: #1e2129;
9191
}
9292

93-
.dark h1,
94-
.dark h2,
95-
.dark h3,
96-
.dark h4,
97-
.dark h5,
98-
.dark h6,
99-
.dark p ,
100-
.dark ul li,
101-
.dark ol li,
102-
.dark .phalcon-blog__title,
103-
.dark .phalcon-blog__projects-text,
104-
.dark .phalcon-blog__main-title,
105-
.dark .header-dropdown li a,
106-
.dark .tag-button,
107-
.dark .phalcon-blog-detail table th,
108-
.dark .phalcon-blog-detail table td,
109-
.dark .base-info-descr__first,
110-
.dark .base-info-descr__second,
111-
.dark .watch-demo__title,
112-
.dark .watch-demo__descr,
113-
.dark .join__title,
114-
.dark .join__descr,
115-
.dark .contributors__top,
116-
.dark .feature__title,
117-
.dark .feature__descr,
118-
.dark .buildwith-nav__list a,
119-
.dark .features-nav__list li {
93+
[data-theme] h1,
94+
[data-theme] h2,
95+
[data-theme] h3,
96+
[data-theme] h4,
97+
[data-theme] h5,
98+
[data-theme] h6,
99+
[data-theme] p ,
100+
[data-theme] ul li,
101+
[data-theme] ol li,
102+
[data-theme] .phalcon-blog__title,
103+
[data-theme] .phalcon-blog__projects-text,
104+
[data-theme] .phalcon-blog__main-title,
105+
[data-theme] .header-dropdown li a,
106+
[data-theme] .tag-button,
107+
[data-theme] .phalcon-blog-detail table th,
108+
[data-theme] .phalcon-blog-detail table td,
109+
[data-theme] .base-info-descr__first,
110+
[data-theme] .base-info-descr__second,
111+
[data-theme] .watch-demo__title,
112+
[data-theme] .watch-demo__descr,
113+
[data-theme] .join__title,
114+
[data-theme] .join__descr,
115+
[data-theme] .contributors__top,
116+
[data-theme] .feature__title,
117+
[data-theme] .feature__descr,
118+
[data-theme] .buildwith-nav__list a,
119+
[data-theme] .features-nav__list li {
120120
color: #e2e4e9d1;
121121
}
122122

123-
.dark .phalcon-blog a,
124-
.dark main a {
123+
[data-theme] .phalcon-blog a,
124+
[data-theme] main a {
125125
color: #00bda4;
126126
}
127127

128-
.dark .phalcon-blog__sponsors-item,
129-
.dark .sponsors__item {
128+
[data-theme] .phalcon-blog__sponsors-item,
129+
[data-theme] .sponsors__item {
130130
background-color: #ffffffb3;
131131
}
132132

133-
.dark .footer {
133+
[data-theme] .footer {
134134
background-color: #17191e;
135135
}
136136

137-
.dark .footer__license,
138-
.dark .footer__supported span,
139-
.dark .footer-nav li a,
140-
.dark .previous,
141-
.dark .page_number,
142-
.dark .next,
143-
.dark .green-button,
144-
.dark .features-nav__list li.active,
145-
.dark .info .buildwith-nav__list li.active a,
146-
.dark .header-nav--mobile a,
147-
.dark .alert-warning,
148-
.dark .info blockquote cite,
149-
.dark .features-accordion__trigger {
137+
[data-theme] .footer__license,
138+
[data-theme] .footer__supported span,
139+
[data-theme] .footer-nav li a,
140+
[data-theme] .previous,
141+
[data-theme] .page_number,
142+
[data-theme] .next,
143+
[data-theme] .green-button,
144+
[data-theme] .features-nav__list li.active,
145+
[data-theme] .info .buildwith-nav__list li.active a,
146+
[data-theme] .header-nav--mobile a,
147+
[data-theme] .alert-warning,
148+
[data-theme] .info blockquote cite,
149+
[data-theme] .features-accordion__trigger {
150150
color: #ffffff;
151151
}
152152

153-
.dark .footer__supported-logo svg,
154-
.dark .footer__supported-logo svg path {
153+
[data-theme] .footer__supported-logo svg,
154+
[data-theme] .footer__supported-logo svg path {
155155
stroke: #ffffff;
156156
}
157157

158-
.dark .phalcon-blog__sponsors-item:hover,
159-
.dark .header-dropdown li a:hover {
158+
[data-theme] .phalcon-blog__sponsors-item:hover,
159+
[data-theme] .header-dropdown li a:hover {
160160
border-color: #00bda4;
161161
}
162162

163-
.dark .phalcon-blog__sponsors-item span {
163+
[data-theme] .phalcon-blog__sponsors-item span {
164164
color: #000000;
165165
}
166166

167-
.dark .header-dropdown--eco {
167+
[data-theme] .header-dropdown--eco {
168168
background-color: #1e2129;
169169
border-color: #1e2129;
170170
}
171171

172-
.dark .header-nav>li a,
173-
.dark .footer-nav li a {
172+
[data-theme] .header-nav>li a,
173+
[data-theme] .footer-nav li a {
174174
opacity: 0.7;
175175
}
176176

177-
.dark .header a:hover,
178-
.dark .header-nav>li.active>a,
179-
.dark .header-nav>li:hover>a,
180-
.dark .header-dropdown li a:hover,
181-
.dark .footer-nav li a:hover {
177+
[data-theme] .header a:hover,
178+
[data-theme] .header-nav>li.active>a,
179+
[data-theme] .header-nav>li:hover>a,
180+
[data-theme] .header-dropdown li a:hover,
181+
[data-theme] .footer-nav li a:hover {
182182
opacity: 1;
183183
color: #ffffff;
184184
}
185185

186-
.dark .light-dark-auto-button:hover {
186+
[data-theme] .light-dark-auto-button:hover {
187187
color: #00bda4 !important;
188188
}
189189

190-
.dark .phalcon-blog__item-date,
191-
.dark .phalcon-blog__item-author {
190+
[data-theme] .phalcon-blog__item-date,
191+
[data-theme] .phalcon-blog__item-author {
192192
color: #bfbfbfd1;
193193
}
194194

195-
.dark .phalcon-blog__tags-item span:first-child {
195+
[data-theme] .phalcon-blog__tags-item span:first-child {
196196
color: #e2e4e98f;
197197
}
198198

199-
.dark .phalcon-blog__right .phalcon-blog__tags-items .phalcon-blog__tags-item {
199+
[data-theme] .phalcon-blog__right .phalcon-blog__tags-items .phalcon-blog__tags-item {
200200
border-color: #385b56;
201201
}
202202

203-
.dark .phalcon-blog-detail table td {
203+
[data-theme] .phalcon-blog-detail table td {
204204
border-color: #e2e4e9d1;
205205
}
206206

207-
.dark .buildwith-nav__list li.active hr,
208-
.dark .features-nav__list li.active hr{
207+
[data-theme] .buildwith-nav__list li.active hr,
208+
[data-theme] .features-nav__list li.active hr{
209209
background-color: #ffffff;
210210
}
211211

212-
.dark .buildwith-nav__list li.active:hover hr,
213-
.dark .features-nav__list li:hover hr,
214-
.dark .buildwith-nav__list li:hover hr {
212+
[data-theme] .buildwith-nav__list li.active:hover hr,
213+
[data-theme] .features-nav__list li:hover hr,
214+
[data-theme] .buildwith-nav__list li:hover hr {
215215
background-color: #ffffff;
216216
}
217217

218-
.dark .info .buildwith-nav__list li:hover a,
219-
.dark .features-nav__list li span:hover {
218+
[data-theme] .info .buildwith-nav__list li:hover a,
219+
[data-theme] .features-nav__list li span:hover {
220220
color: #ffffff;
221221
}
222222

223-
.dark .header-dropdown--lang {
223+
[data-theme] .header-dropdown--lang {
224224
background-color: #1e2129;
225225
border-color: #1e2129;
226226
}
227227

228-
.dark .info-block__img img {
228+
[data-theme] .info-block__img img {
229229
background-color: #ffffff;
230230
}

0 commit comments

Comments
 (0)