Skip to content

Commit fc83639

Browse files
actions-useractions-user
committed
Fix：dark mode can`t switch
1 parent 6e84c72 commit fc83639

1 file changed

Lines changed: 93 additions & 59 deletions

File tree

‎_includes/scripts.html‎

Lines changed: 93 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -91,77 +91,111 @@
9191
setTimeout(() => document.addEventListener('click', closeTip), 10);
9292
}
9393

94-
/**
95-
* 初始化全站搜索模块
96-
*/
97-
const sinput = document.getElementById('search-input');
98-
const sresults = document.getElementById('results-container');
99-
if(sinput) {
100-
sinput.addEventListener('input', () => { sresults.style.display = sinput.value ? 'block' : 'none'; });
101-
SimpleJekyllSearch({
102-
searchInput: sinput,
103-
resultsContainer: sresults,
104-
json: '{{ site.baseurl }}/search.json',
105-
searchResultTemplate: '<li><a href="{url}"><div class="search-result-title">{title}</div><div class="search-result-meta"><i class="fas fa-calendar-alt"></i> {date}</div><div class="search-result-snippet">{content}</div></a></li>',
106-
noResultsText: '<li><p style="padding:15px; color:var(--text-main);">没有找到相关内容哦...</p></li>',
107-
limit: 8,
108-
templateMiddleware: function(prop, value, template) {
109-
if (prop === 'content') {
110-
const query = sinput.value.toLowerCase().trim();
111-
if (!query) return '';
112-
const contentLower = value.toLowerCase();
113-
const index = contentLower.indexOf(query);
114-
if (index === -1) {
115-
return value.substring(0, 80) + '...';
116-
}
117-
const start = Math.max(0, index - 30);
118-
const end = Math.min(value.length, index + query.length + 50);
119-
let snippet = value.substring(start, end);
120-
if (start > 0) snippet = '...' + snippet;
121-
if (end < value.length) snippet = snippet + '...';
122-
123-
// 高亮关键词
124-
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
125-
snippet = snippet.replace(regex, '<span class="search-highlight">$1</span>');
126-
return snippet;
127-
}
128-
return value;
129-
}
130-
});
131-
}
132-
13394
/**
13495
* 主题切换加载与控制
13596
*/
13697
const themeToggle = document.getElementById('theme-toggle');
98+
const root = document.documentElement;
13799
const body = document.body;
138-
139-
// 初始加载主题
140-
const savedTheme = localStorage.getItem('theme');
141-
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
142-
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
143-
body.classList.add('dark-mode');
100+
101+
function applyTheme(theme) {
102+
const isDark = theme === 'dark';
103+
root.classList.toggle('dark-mode', isDark);
104+
body.classList.toggle('dark-mode', isDark);
105+
144106
const icon = themeToggle?.querySelector('i');
145-
if(icon) icon.classList.replace('fa-sun', 'fa-moon');
107+
if (icon) {
108+
icon.classList.toggle('fa-moon', isDark);
109+
icon.classList.toggle('fa-sun', !isDark);
110+
}
111+
112+
if (themeToggle) {
113+
themeToggle.setAttribute('aria-label', isDark ? '切换到浅色模式' : '切换到深色模式');
114+
themeToggle.setAttribute('title', isDark ? '切换到浅色模式' : '切换到深色模式');
115+
}
146116
}
147117

148-
if(themeToggle) {
149-
themeToggle.addEventListener('click', () => {
150-
body.classList.toggle('dark-mode');
151-
const isDark = body.classList.contains('dark-mode');
152-
const icon = themeToggle.querySelector('i');
153-
if(icon) {
154-
if (isDark) {
155-
icon.classList.replace('fa-sun', 'fa-moon');
156-
localStorage.setItem('theme', 'dark');
157-
} else {
158-
icon.classList.replace('fa-moon', 'fa-sun');
159-
localStorage.setItem('theme', 'light');
160-
}
118+
function getPreferredTheme() {
119+
try {
120+
const savedTheme = localStorage.getItem('theme');
121+
if (savedTheme === 'dark' || savedTheme === 'light') {
122+
return savedTheme;
123+
}
124+
} catch (e) {}
125+
126+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
127+
}
128+
129+
applyTheme(getPreferredTheme());
130+
131+
if (window.matchMedia) {
132+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
133+
mediaQuery.addEventListener?.('change', (event) => {
134+
let savedTheme = null;
135+
try {
136+
savedTheme = localStorage.getItem('theme');
137+
} catch (e) {}
138+
139+
if (!savedTheme) {
140+
applyTheme(event.matches ? 'dark' : 'light');
161141
}
162142
});
163143
}
164144

145+
if (themeToggle) {
146+
themeToggle.addEventListener('click', () => {
147+
const nextTheme = body.classList.contains('dark-mode') ? 'light' : 'dark';
148+
applyTheme(nextTheme);
149+
try {
150+
localStorage.setItem('theme', nextTheme);
151+
} catch (e) {}
152+
});
153+
}
154+
155+
/**
156+
* 初始化全站搜索模块
157+
*/
158+
const sinput = document.getElementById('search-input');
159+
const sresults = document.getElementById('results-container');
160+
if (sinput && sresults) {
161+
sinput.addEventListener('input', () => { sresults.style.display = sinput.value ? 'block' : 'none'; });
162+
163+
if (typeof window.SimpleJekyllSearch === 'function') {
164+
window.SimpleJekyllSearch({
165+
searchInput: sinput,
166+
resultsContainer: sresults,
167+
json: '{{ site.baseurl }}/search.json',
168+
searchResultTemplate: '<li><a href="{url}"><div class="search-result-title">{title}</div><div class="search-result-meta"><i class="fas fa-calendar-alt"></i> {date}</div><div class="search-result-snippet">{content}</div></a></li>',
169+
noResultsText: '<li><p style="padding:15px; color:var(--text-main);">没有找到相关内容哦...</p></li>',
170+
limit: 8,
171+
templateMiddleware: function(prop, value, template) {
172+
if (prop === 'content') {
173+
const query = sinput.value.toLowerCase().trim();
174+
if (!query) return '';
175+
const contentLower = value.toLowerCase();
176+
const index = contentLower.indexOf(query);
177+
if (index === -1) {
178+
return value.substring(0, 80) + '...';
179+
}
180+
const start = Math.max(0, index - 30);
181+
const end = Math.min(value.length, index + query.length + 50);
182+
let snippet = value.substring(start, end);
183+
if (start > 0) snippet = '...' + snippet;
184+
if (end < value.length) snippet = snippet + '...';
185+
186+
// 高亮关键词
187+
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
188+
snippet = snippet.replace(regex, '<span class="search-highlight">$1</span>');
189+
return snippet;
190+
}
191+
return value;
192+
}
193+
});
194+
} else {
195+
console.warn('SimpleJekyllSearch failed to load; search is disabled, theme toggle remains available.');
196+
}
197+
}
198+
165199
/**
166200
* 初始化页面组件
167201
*/

0 commit comments

Comments
 (0)