From 8cd4151e2bedf9ad4a5aa77dcef2426a687d4d40 Mon Sep 17 00:00:00 2001 From: Bortlesboat Date: Tue, 12 May 2026 02:26:21 -0400 Subject: [PATCH] fix: improve homepage dark mode contrast --- .../theme/components/HomeFeatures.vue | 62 ++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue index 221e621..810bf24 100644 --- a/docs/.vitepress/theme/components/HomeFeatures.vue +++ b/docs/.vitepress/theme/components/HomeFeatures.vue @@ -3039,6 +3039,15 @@ a { sans-serif; } +.dark .section-category, +.dark .section-headline { + color: var(--vp-c-text-1); +} + +.dark .section-sub { + color: var(--vp-c-text-2); +} + /* Bento Grid */ .bento-grid { display: grid; @@ -3131,6 +3140,11 @@ a { scroll-snap-align: start; } +.dark .comm-card { + background: var(--vp-c-bg-soft); + border-color: var(--vp-c-divider); +} + .comm-card:hover { transform: scale(1.015); } @@ -3178,6 +3192,14 @@ a { letter-spacing: -0.01em; } +.dark .comm-title { + color: var(--vp-c-text-1); +} + +.dark .comm-desc { + color: var(--vp-c-text-2); +} + /* Productivity Scroll (Now used for Stage 3) */ .scroll-container { overflow-x: auto; @@ -3218,6 +3240,11 @@ a { box-shadow: none; } +.dark .prod-card { + background: var(--vp-c-bg-soft); + border-color: var(--vp-c-divider); +} + .prod-card:hover { transform: scale(1.015); } @@ -3247,6 +3274,15 @@ a { line-height: 1.5; } +.dark .prod-tag, +.dark .prod-card p { + color: var(--vp-c-text-2); +} + +.dark .prod-card h4 { + color: var(--vp-c-text-1); +} + .prod-visual { margin-top: auto; height: 150px; @@ -3329,6 +3365,10 @@ a { white-space: normal; } +.dark .appendix-title { + color: var(--vp-c-text-1); +} + .appendix-scroll-hint { position: relative; display: flex; @@ -3412,6 +3452,10 @@ a { border-radius: 40px; } +.dark .footer-callout { + background: var(--vp-c-bg-soft); +} + .footer-callout h2 { font-size: 62px; font-weight: 700; @@ -3430,6 +3474,14 @@ a { margin-bottom: 18px; } +.dark .footer-callout h2 { + color: var(--vp-c-text-1); +} + +.dark .footer-callout p { + color: var(--vp-c-text-2); +} + .apple-site-footer { max-width: 1060px; margin: 0 auto 56px; @@ -3743,7 +3795,7 @@ a { .dark .feature-card { border: 1px solid rgba(255, 255, 255, 0.06); - background: var(--vp-c-bg-mute); + background: var(--vp-c-bg-soft); } .feature-card:hover { @@ -3788,6 +3840,14 @@ a { margin-bottom: 0; } +.dark .feature-content h4 { + color: var(--vp-c-text-1); +} + +.dark .feature-content p { + color: var(--vp-c-text-2); +} + @media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, 1fr);