From b234a596bd0e9d9ece4b1a01ea1db5f792289dc5 Mon Sep 17 00:00:00 2001 From: lkxnif <1103190704@qq.com> Date: Thu, 26 Dec 2024 22:09:21 +0800 Subject: [PATCH] Dark mode --- css/bookmark.css | 28 ++++++++++---------- css/note.css | 36 +++++++++++++------------- css/reader.css | 51 ++++++++++++++++++++++++++++++++++-- css/reading-progress.css | 10 +++---- css/style.css | 28 ++++++++++---------- reader.html | 56 ++++++++++++++++++++++++++++++++++------ 6 files changed, 148 insertions(+), 61 deletions(-) diff --git a/css/bookmark.css b/css/bookmark.css index 546505b..808b740 100644 --- a/css/bookmark.css +++ b/css/bookmark.css @@ -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; } /* 护眼主题 */ diff --git a/css/note.css b/css/note.css index da061fd..f8953a4 100644 --- a/css/note.css +++ b/css/note.css @@ -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; } /* 护眼主题 */ diff --git a/css/reader.css b/css/reader.css index ad97228..fda030a 100644 --- a/css/reader.css +++ b/css/reader.css @@ -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; } /* 响应式设计 */ diff --git a/css/reading-progress.css b/css/reading-progress.css index ebdb3d4..1d44145 100644 --- a/css/reading-progress.css +++ b/css/reading-progress.css @@ -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; } /* 护眼主题 */ diff --git a/css/style.css b/css/style.css index 0435f2a..38de554 100644 --- a/css/style.css +++ b/css/style.css @@ -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 { diff --git a/reader.html b/reader.html index 98ee801..359cea8 100644 --- a/reader.html +++ b/reader.html @@ -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 { @@ -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 { @@ -401,7 +416,7 @@

加载中...

- @@ -529,12 +544,28 @@

加载中...

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' } } }; @@ -794,7 +825,7 @@

加载中...

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; @@ -874,7 +905,7 @@

加载中...

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 => { @@ -914,6 +945,15 @@

加载中...

'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', @@ -966,7 +1006,7 @@

加载中...

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

加载中...

rendition.next(); }); - // 面信息更��� + // 面信息更新 rendition.on('relocated', location => { const currentLocation = book.locations.locationFromCfi(location.start.cfi); const totalLocations = book.locations.length(); @@ -1045,7 +1085,7 @@

加载中...

}) .catch(error => { console.error('获取电子书文件失败:', error); - showError('获取电子书文件失败:' + (error.message || '未知错误')); + showError('获取电子书文件失败:' + (error.message || '未��错误')); }); } catch (error) {