From ded6c67a3649cd14730f719e1d918766c281178e Mon Sep 17 00:00:00 2001 From: Leon-in Date: Mon, 27 Apr 2026 00:08:19 +0800 Subject: [PATCH] fix: dark mode contrast and visibility issues Override --font--colors--title-dm/paragraph-dm variables that resolved to near-black after neutral color inversion. Add comprehensive dark mode overrides for header nav links (#222 hardcoded), footer text/links/ borders, cards, CTA sections, contact page elements, and more. Remove inline color styles from contact components that blocked CSS dark mode overrides. Fix truncated about section text and add w-mod-ix3 class to html element. Co-Authored-By: Claude Opus 4.6 --- app/globals.css | 192 +++++++++++++++++++++++++++++ app/layout.tsx | 2 +- components/contact/FormSection.tsx | 6 +- components/contact/HeroSection.tsx | 4 +- components/home/HeroSection.tsx | 9 +- 5 files changed, 203 insertions(+), 10 deletions(-) diff --git a/app/globals.css b/app/globals.css index cbdd158..8c03755 100644 --- a/app/globals.css +++ b/app/globals.css @@ -14,6 +14,8 @@ --core--colors--neutral--100: #0d0d0d; --font--colors--title: var(--core--colors--neutral--800); --font--colors--paragraph: var(--core--colors--neutral--600); + --font--colors--title-dm: #f5f5f5; + --font--colors--paragraph-dm: #b0b0b0; } .dark body, @@ -44,20 +46,210 @@ color: #666; } +/* Header */ .dark .header-wrapper, .dark .header-wrapper---absolute { background-color: rgba(13, 13, 13, 0.9); backdrop-filter: blur(12px); } +.dark .w-nav-link, +.dark .w-dropdown-btn, +.dark .w-dropdown-toggle, +.dark .w-dropdown-link { + color: #e0e0e0; +} + .dark .link .link-text { color: #d0d0d0; } +/* Footer */ .dark .footer-wrapper { background-color: #0a0a0a; } +.dark .footer-link { + color: #b0b0b0; + border-bottom-color: #2a2a2a; +} + +.dark .footer-link:hover { + color: #f5f5f5; +} + +.dark .footer-top, +.dark .footer-middle, +.dark .footer-links-wrapper, +.dark .footer-bottom { + border-color: #2a2a2a; +} + +.dark .footer-logo-wrapper { + border-color: #2a2a2a; +} + +.dark .footer-button { + border-color: #2a2a2a; + color: #f5f5f5; +} + +.dark .footer-link-bg { + background-color: #2a2a2a; +} + +.dark .footer-contact-link-icon-wrapper { + border-color: #2a2a2a; +} + +.dark .footer-contact-link-bg { + background-color: #1e1e1e; +} + +.dark .text-color-neutral-400 { + color: #707070; +} + +.dark .icon-40px---dark-mode { + background-color: #1e1e1e; + color: #f5f5f5; +} + +.dark .link-square-icon-left---dark-mode { + color: #f5f5f5; +} + +.dark .text-link { + color: #f5f5f5; +} + +.dark .text-link:hover { + color: #a0a0a0; +} + +/* Cards */ +.dark .card { + background-color: #141414; + border-color: #2a2a2a; +} + +.dark .card.contact-card-v1 { + border-color: #2a2a2a; +} + +.dark .contact-link-text { + color: var(--font--colors--title) !important; +} + +.dark .contact-card-link-bg { + background-color: #2a2a2a; +} + +.dark .contact-card-v1-link-wrapper { + border-color: #2a2a2a; +} + +/* CTA sections */ +.dark .cta-section { + background-color: #0d0d0d; +} + +/* Tab links */ +.dark .w-tab-link { + color: #e0e0e0; + background-color: #1e1e1e; +} + +.dark .w-tab-link.w--current { + background-color: #2a2a2a; +} + +/* Section backgrounds */ +.dark .section.bg-neutral, +.dark .section-small.bg-neutral { + background-color: #111; +} + +.dark .bg-neutral-100 { + background-color: #0d0d0d; +} + +.dark .bg-neutral-200 { + background-color: #141414; +} + +.dark .bg-neutral-300 { + background-color: #1a1a1a; +} + +/* Accordion & misc cards */ +.dark .card.accordion-card-v1, +.dark .card.accordion-card-v2, +.dark .card.accordin-card-v3 { + background-color: #141414; +} + +.dark .card.accordion-card-v2:hover, +.dark .card.accordin-card-v3:hover { + background-color: #1e1e1e; +} + +/* Blog cards */ +.dark .blog-card-v1 { + border-color: #2a2a2a; +} + +/* Blockquote */ +.dark blockquote { + background-color: #1e1e1e; + color: #f5f5f5; +} + +/* Notification bar */ +.dark .notification-bar { + background-color: #1e1e1e; + color: #f5f5f5; +} + +/* Primary button in dark sections */ +.dark .primary-button { + border-color: #2a2a2a; +} + +/* Badge */ +.dark .badge { + background-color: #1e1e1e; +} + +/* SVG icons inherit currentColor — ensure parent elements are visible */ +.dark .footer-link-icon { + color: #707070; +} + +/* Contact page hover backgrounds */ +.dark .contact-icon-bg { + background-color: #2a2a2a; +} + +.dark .contact-card-link-bg { + background-color: #2a2a2a; +} + +/* Dropdown menu */ +.dark .w-dropdown-list { + background-color: #1e1e1e; +} + +.dark [data-nav-menu-open] { + background-color: #1e1e1e; +} + +/* Gradient overlays — use dark base */ +.dark .hero-v1-bg-gradient, +.dark .about-section-gradient { + background-image: none; +} + /* Show/hide elements based on theme */ .show-dark-mode { display: none; diff --git a/app/layout.tsx b/app/layout.tsx index 8defc88..c20d128 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -43,7 +43,7 @@ export default function RootLayout({ return ( diff --git a/components/contact/FormSection.tsx b/components/contact/FormSection.tsx index 5694039..9e0a2e9 100644 --- a/components/contact/FormSection.tsx +++ b/components/contact/FormSection.tsx @@ -32,7 +32,7 @@ export default function FormSection() {
-
support@quantumlab.com
+
support@quantumlab.com
@@ -53,7 +53,7 @@ export default function FormSection() {
-
media@quantumlab.com
+
media@quantumlab.com
@@ -74,7 +74,7 @@ export default function FormSection() {
-
sales@quantumlab.com
+
sales@quantumlab.com
diff --git a/components/contact/HeroSection.tsx b/components/contact/HeroSection.tsx index 74b272b..8ec94e9 100644 --- a/components/contact/HeroSection.tsx +++ b/components/contact/HeroSection.tsx @@ -41,7 +41,7 @@ export default function HeroSection() {
- + @@ -77,7 +77,7 @@ export default function HeroSection() {
- + diff --git a/components/home/HeroSection.tsx b/components/home/HeroSection.tsx index 00fbd00..5f4185f 100644 --- a/components/home/HeroSection.tsx +++ b/components/home/HeroSection.tsx @@ -100,12 +100,13 @@ export default function HeroSection() {
-
- us
+
About us

- ucing QuantumLab: Pioneering the Future of AI Research. Engineered to push the limits of artificial intelligence, Quantum identifies emerging trends before they disrupt the industry. Choose Research Mode for in-depth, data-driven analysis or Development Mode for groundbreaking algorithm testing. Built with advanced AI systems and state-of-the-art computational power for unparalleled performance.
- d by top-tier experts and fueled by global collaboration, Quantum is not just a lab—it's the core of tomorrow's innovations, shaping the future one breakthrough at a time.

+ Introducing QuantumLab: Pioneering the Future of AI Research. Engineered to push the limits of artificial intelligence, Quantum identifies emerging trends before they disrupt the industry. Choose Research Mode for in-depth, data-driven analysis or Development Mode for groundbreaking algorithm testing. Built with advanced AI systems and state-of-the-art computational power for unparalleled performance. +
+ Crafted by top-tier experts and fueled by global collaboration, Quantum is not just a lab—it's the core of tomorrow's innovations, shaping the future one breakthrough at a time. +