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 @@