diff --git a/src/components/home/Welcome.astro b/src/components/home/Welcome.astro index 32a18f6..230c6c8 100644 --- a/src/components/home/Welcome.astro +++ b/src/components/home/Welcome.astro @@ -12,4 +12,18 @@ .welcome-title { color: var(--text-site-title); } + + /* 暗色主题 - 增强标题对比度,防止亮背景区域发灰 */ + :global(.dark) .welcome-title { + text-shadow: + 0 2px 8px rgba(0, 0, 0, 0.45), + 0 4px 16px rgba(0, 0, 0, 0.25); + } + + /* 亮色主题 - 轻微阴影增强可读性 */ + :global(.light) .welcome-title { + text-shadow: + 0 1px 4px rgba(255, 255, 255, 0.6), + 0 2px 8px rgba(0, 0, 0, 0.08); + } diff --git a/src/layouts/base/BaseLayout.astro b/src/layouts/base/BaseLayout.astro index a0f4214..f20fe9a 100644 --- a/src/layouts/base/BaseLayout.astro +++ b/src/layouts/base/BaseLayout.astro @@ -95,12 +95,25 @@ const coverImageUrlStr = coverImageUrl background-image: var(--coverImageUrlStr); } - /* 遮罩层使用伪元素,颜色从 theme.css 动态加载 */ + /* 遮罩层使用伪元素:上浅下深渐变 + 暗角效果 */ .solitude-body::before { content: ''; position: absolute; inset: 0; - background-color: var(--site-bg-overlay); + background: + /* 径向暗角 - 四周略深,聚焦视觉中心 */ + radial-gradient( + ellipse 120% 100% at 50% 50%, + transparent 0%, + transparent 50%, + var(--site-bg-vignette) 100% + ), + /* 上浅下深线性渐变 - 让下半屏卡片对比更稳定 */ + linear-gradient( + to bottom, + var(--site-bg-overlay-top) 0%, + var(--site-bg-overlay-bottom) 100% + ); pointer-events: none; } diff --git a/src/styles/theme/dark/card.css b/src/styles/theme/dark/card.css index 9aede49..f868332 100644 --- a/src/styles/theme/dark/card.css +++ b/src/styles/theme/dark/card.css @@ -3,8 +3,10 @@ */ .dark { - /* 网站背景遮罩 */ - --site-bg-overlay: rgba(0, 0, 0, 0.55); + /* 网站背景遮罩 - 上浅下深渐变 + 暗角 */ + --site-bg-overlay-top: rgba(0, 0, 0, 0.35); + --site-bg-overlay-bottom: rgba(0, 0, 0, 0.68); + --site-bg-vignette: rgba(0, 0, 0, 0.18); /* 首页文章卡片覆盖层渐变 */ --home-card-overlay-start: oklch(0.12 0.025 264.665 / 0.45); diff --git a/src/styles/theme/light/card.css b/src/styles/theme/light/card.css index ee442c3..fb9a314 100644 --- a/src/styles/theme/light/card.css +++ b/src/styles/theme/light/card.css @@ -3,8 +3,10 @@ */ :root { - /* 网站背景遮罩 */ - --site-bg-overlay: rgba(180, 180, 185, 0.65); + /* 网站背景遮罩 - 上浅下深渐变 + 暗角 */ + --site-bg-overlay-top: rgba(240, 240, 242, 0.45); + --site-bg-overlay-bottom: rgba(180, 180, 185, 0.72); + --site-bg-vignette: rgba(100, 100, 105, 0.12); /* 首页文章卡片覆盖层渐变 */ --home-card-overlay-start: oklch(0.98 0 0 / 0.55);