Skip to content

Commit

Permalink
Dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@lkxnif
lkxnif committed Dec 26, 2024
1 parent 0923bc5 commit b234a59
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 61 deletions.
28 changes: 14 additions & 14 deletions css/bookmark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,20 +200,20 @@

/* 深色主题 */
[data-theme="dark"] {
--background-color: #1a1a1a;
--background-color-secondary: #2d2d2d;
--background-color-hover: #3d3d3d;
--text-primary-color: #e0e0e0;
--text-secondary-color: #b0b0b0;
--text-tertiary-color: #808080;
--primary-color: #64b5f6;
--primary-color-dark: #42a5f5;
--secondary-color: #757575;
--secondary-color-dark: #616161;
--danger-color: #f44336;
--danger-color-dark: #d32f2f;
--border-color: #404040;
--input-background-color: #2d2d2d;
--background-color: #121212;
--background-color-secondary: #1e1e1e;
--background-color-hover: #2d2d2d;
--text-primary-color: #e1e1e1;
--text-secondary-color: #a0a0a0;
--text-tertiary-color: #757575;
--primary-color: #60a5fa;
--primary-color-dark: #3b82f6;
--secondary-color: #6b7280;
--secondary-color-dark: #4b5563;
--danger-color: #ef4444;
--danger-color-dark: #dc2626;
--border-color: #2e2e2e;
--input-background-color: #1e1e1e;
}

/* 护眼主题 */
Expand Down
36 changes: 18 additions & 18 deletions css/note.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,24 +224,24 @@

/* 深色主题 */
[data-theme="dark"] {
--background-color: #1a1a1a;
--background-color-secondary: #2d2d2d;
--background-color-hover: #3d3d3d;
--text-primary-color: #e0e0e0;
--text-secondary-color: #b0b0b0;
--text-tertiary-color: #808080;
--primary-color: #64b5f6;
--primary-color-dark: #42a5f5;
--secondary-color: #757575;
--secondary-color-dark: #616161;
--danger-color: #f44336;
--danger-color-dark: #d32f2f;
--success-color: #4caf50;
--success-color-dark: #388e3c;
--info-color: #00bcd4;
--info-color-dark: #0097a7;
--border-color: #404040;
--input-background-color: #2d2d2d;
--background-color: #121212;
--background-color-secondary: #1e1e1e;
--background-color-hover: #2d2d2d;
--text-primary-color: #e1e1e1;
--text-secondary-color: #a0a0a0;
--text-tertiary-color: #757575;
--primary-color: #60a5fa;
--primary-color-dark: #3b82f6;
--secondary-color: #6b7280;
--secondary-color-dark: #4b5563;
--danger-color: #ef4444;
--danger-color-dark: #dc2626;
--success-color: #10b981;
--success-color-dark: #059669;
--info-color: #0ea5e9;
--info-color-dark: #0284c7;
--border-color: #2e2e2e;
--input-background-color: #1e1e1e;
}

/* 护眼主题 */
Expand Down
51 changes: 49 additions & 2 deletions css/reader.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,16 +148,63 @@
.theme-light {
--reader-bg: #fff;
--reader-text: #000;
--reader-link: #0969da;
--reader-link-hover: #0969da;
}

.theme-dark {
--reader-bg: #1a1a1a;
--reader-text: #fff;
--reader-bg: #121212;
--reader-text: #e1e1e1;
--reader-link: #7dd3fc;
--reader-link-hover: #a5e4fc;
--reader-link-visited: #c7d2fe;
--reader-link-active: #93c5fd;
}

.theme-sepia {
--reader-bg: #f4ecd8;
--reader-text: #5b4636;
--reader-link: #8b7355;
--reader-link-hover: #6b563e;
}

/* 阅读器链接样式 */
#reader-container a {
color: var(--reader-link);
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 1px solid transparent;
}

#reader-container a:hover {
color: var(--reader-link-hover);
border-bottom-color: currentColor;
text-decoration: none;
}

#reader-container a:visited {
color: var(--reader-link-visited, var(--reader-link));
}

#reader-container a:active {
color: var(--reader-link-active, var(--reader-link-hover));
}

/* 确保链接在选中时有足够的对比度 */
#reader-container a::selection {
background-color: var(--reader-link);
color: var(--reader-bg);
}

/* 链接焦点状态 */
#reader-container a:focus {
outline: 2px solid var(--reader-link);
outline-offset: 2px;
border-radius: 2px;
}

#reader-container a:focus:not(:focus-visible) {
outline: none;
}

/* 响应式设计 */
Expand Down
10 changes: 5 additions & 5 deletions css/reading-progress.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@

/* 深色主题 */
[data-theme="dark"] {
--background-color: #1a1a1a;
--text-primary-color: #e0e0e0;
--text-secondary-color: #999999;
--primary-color: #64b5f6;
--progress-background-color: #333333;
--background-color: #121212;
--text-primary-color: #e1e1e1;
--text-secondary-color: #a0a0a0;
--primary-color: #60a5fa;
--progress-background-color: #2e2e2e;
}

/* 护眼主题 */
Expand Down
28 changes: 14 additions & 14 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@
}

[data-theme="dark"] {
--primary-color: #2f81f7;
--background-color: #222222;
--text-color: #ffffff;
--card-bg: #333333;
--border-color: #444444;
--text-muted: #888888;
--link-color: #2f81f7;
--hover-bg: #444444;
--sidebar-bg: #2d2d2d;
--input-bg: #333333;
--input-border: #555555;
--dropdown-bg: #333333;
--dropdown-hover: #444444;
--primary-color: #60a5fa;
--background-color: #121212;
--text-color: #e1e1e1;
--card-bg: #1e1e1e;
--border-color: #2e2e2e;
--text-muted: #a0a0a0;
--link-color: #60a5fa;
--hover-bg: #2d2d2d;
--sidebar-bg: #1e1e1e;
--input-bg: #1e1e1e;
--input-border: #2e2e2e;
--dropdown-bg: #1e1e1e;
--dropdown-hover: #2d2d2d;
--accent-bg: #1a3f5c;
--text-color-rgb: 255, 255, 255;
--text-color-rgb: 225, 225, 225;
}

body {
Expand Down
56 changes: 48 additions & 8 deletions reader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@
--sidebar-width: 300px;
--toolbar-height: 40px;
--border-color: #e0e0e0;
--reader-link: #0969da;
--reader-link-hover: #2563eb;
}

[data-theme="dark"] {
--reader-link: #7dd3fc;
--reader-link-hover: #a5e4fc;
}

body {
Expand Down Expand Up @@ -76,15 +83,23 @@
}

#toc-list a {
color: var(--text-color);
color: var(--reader-link);
text-decoration: none;
display: block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
opacity: 0.9;
}

#toc-list a:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--reader-link-hover);
background: rgba(125, 211, 252, 0.1);
opacity: 1;
}

[data-theme="dark"] #toc-list a:hover {
background: rgba(125, 211, 252, 0.15);
}

.content-container {
Expand Down Expand Up @@ -401,7 +416,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
<button class="btn-icon" data-size="medium" title="中号字体">
<i class="fas fa-font"></i>
</button>
<button class="btn-icon" data-size="large" title="大号字���">
<button class="btn-icon" data-size="large" title="大号字体">
<i class="fas fa-font" style="font-size: 1.15em;"></i>
</button>
</div>
Expand Down Expand Up @@ -529,12 +544,28 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
body: {
color: '#000000',
background: '#ffffff'
},
'a': {
color: 'var(--reader-link)',
'text-decoration': 'none'
},
'a:hover': {
color: 'var(--reader-link-hover)',
'text-decoration': 'underline'
}
},
dark: {
body: {
color: '#ffffff',
background: '#222222'
},
'a': {
color: 'var(--reader-link)',
'text-decoration': 'none'
},
'a:hover': {
color: 'var(--reader-link-hover)',
'text-decoration': 'underline'
}
}
};
Expand Down Expand Up @@ -794,7 +825,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
return;
}

// 确保使用相对路径，并处理 GitHub Pages 的基础路径
// 确保使用相对路径，并��理 GitHub Pages 的基础路径
const baseUrl = document.querySelector('base')?.href || window.location.origin + window.location.pathname.replace(/\/[^/]*$/, '/');
const cleanPath = bookPath.replace(/^\/+/, '').replace(/^data\/+/, 'data/');
const fullPath = new URL(cleanPath, baseUrl).href;
Expand Down Expand Up @@ -874,7 +905,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
const images = contents.document.querySelectorAll('img');
images.forEach(img => {
if (img.src.startsWith('http://127.0.0.1:5500/')) {
// 获取图片的相对路径
// 获取图片的��对路径
const relativePath = img.src.replace('http://127.0.0.1:5500/', '');
// 使用 blob URL
book.archive.getBlob(relativePath).then(blob => {
Expand Down Expand Up @@ -914,6 +945,15 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
'margin-bottom': '1em',
'text-indent': '2em'
},
'a': {
'color': 'var(--reader-link)',
'text-decoration': 'none',
'transition': 'all 0.2s ease'
},
'a:hover': {
'color': 'var(--reader-link-hover)',
'text-decoration': 'underline'
},
'img': {
'max-width': '100%',
'height': 'auto',
Expand Down Expand Up @@ -966,7 +1006,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
});

book.on('book:error', (error) => {
console.error('电子书加载错误:', error);
console.error('��子书加载错误:', error);
showError(`电子书加载错误: ${error.message || '未知错误'}`);
});

Expand Down Expand Up @@ -998,7 +1038,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
rendition.next();
});

// 面信息更���
// 面信息更新
rendition.on('relocated', location => {
const currentLocation = book.locations.locationFromCfi(location.start.cfi);
const totalLocations = book.locations.length();
Expand Down Expand Up @@ -1045,7 +1085,7 @@ <h1 class="toolbar-title" id="book-title">加载中...</h1>
})
.catch(error => {
console.error('获取电子书文件失败:', error);
showError('获取电子书文件失败：' + (error.message || '未知错误'));
showError('获取电子书文件失败：' + (error.message || '未��错误'));
});

} catch (error) {
Expand Down

0 comments on commit b234a59

Please sign in to comment.