chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

添加明暗主题切换功能

Browse Source
This commit is contained in:
Zuoling Rong
2025-05-01 20:55:21 +08:00
parent 1660eed771
commit 582cc652ac
5 changed files with 319 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/generator.js
View File

@@ -215,7 +215,7 @@ function generateHTML(config) {
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="loading">
<body class="loaded">
<div class="layout">
<!-- 移动端按钮 -->
<div class="mobile-buttons">
@@ -291,6 +291,11 @@ ${generatePageContent('friends', config.friends)}
</div>
${generateSearchResultsPage(config)}
</main>
<!-- 主题切换按钮 -->
<button class="theme-toggle" aria-label="切换主题">
<i class="fas fa-moon"></i>
</button>
</div>
<script src="script.js"></script>
</body>

51
src/script.js
View File

@@ -1,4 +1,8 @@
document.addEventListener('DOMContentLoaded', () => {
// 即时移除loading类，确保侧边栏可见
document.body.classList.remove('loading');
document.body.classList.add('loaded');
const searchInput = document.getElementById('search');
const siteCards = document.querySelectorAll('.site-card');
const categories = document.querySelectorAll('.category');
@@ -15,11 +19,16 @@ document.addEventListener('DOMContentLoaded', () => {
const searchContainer = document.querySelector('.search-container');
const overlay = document.querySelector('.overlay');
// 主题切换元素
const themeToggle = document.querySelector('.theme-toggle');
const themeIcon = themeToggle.querySelector('i');
let isSearchActive = false;
let currentPageId = 'home';
let isInitialLoad = true;
let isSidebarOpen = false;
let isSearchOpen = false;
let isLightTheme = false; // 主题状态
// 搜索索引，用于提高搜索效率
let searchIndex = {
@@ -27,6 +36,45 @@ document.addEventListener('DOMContentLoaded', () => {
items: []
};
// 主题切换功能
function toggleTheme() {
isLightTheme = !isLightTheme;
document.body.classList.toggle('light-theme', isLightTheme);
// 更新图标
if (isLightTheme) {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
// 保存主题偏好到localStorage
localStorage.setItem('theme', isLightTheme ? 'light' : 'dark');
}
// 初始化主题
function initTheme() {
// 从localStorage获取主题偏好
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
isLightTheme = true;
document.body.classList.add('light-theme');
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
isLightTheme = false;
document.body.classList.remove('light-theme');
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
}
// 主题切换按钮点击事件
themeToggle.addEventListener('click', toggleTheme);
// 初始化搜索索引
function initSearchIndex() {
if (searchIndex.initialized) return;
@@ -483,6 +531,9 @@ document.addEventListener('DOMContentLoaded', () => {
// 初始化
window.addEventListener('load', () => {
// 初始化主题
initTheme();
// 延迟一帧执行初始化，确保样式已经应用
requestAnimationFrame(() => {
// 显示首页