gitea/dalcode-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode contrast and visibility issues

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Leon-in
2026-04-27 00:08:19 +08:00
parent 95eb362bfc
commit ded6c67a36
5 changed files with 203 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+192
View File
@@ -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;
app/layout.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default function RootLayout({
return (
<html
lang="en"
className={`w-mod-js ${inter.variable} ${interTight.variable}`}
className={`w-mod-js w-mod-ix3 ${inter.variable} ${interTight.variable}`}
suppressHydrationWarning
>
<body className={inter.className}>
components/contact/FormSection.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ export default function FormSection() {
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">support@quantumlab.com</div>
<div className="contact-link-text">support@quantumlab.com</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
</path>
@@ -53,7 +53,7 @@ export default function FormSection() {
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">media@quantumlab.com</div>
<div className="contact-link-text">media@quantumlab.com</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
</path>
@@ -74,7 +74,7 @@ export default function FormSection() {
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">sales@quantumlab.com</div>
<div className="contact-link-text">sales@quantumlab.com</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
</path>
components/contact/HeroSection.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export default function HeroSection() {
<div className="contact-icon-wrapper">
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
</div>
<svg style={{"color": "rgb(22,22,22)"}} xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
<path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
</path>
</svg>
@@ -77,7 +77,7 @@ export default function HeroSection() {
<div className="contact-icon-wrapper">
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
</div>
<svg style={{"color": "rgb(22,22,22)"}} xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
<g clipPath="url(#clip0_16077_4034)">
<path fillRule="evenodd" clipRule="evenodd" d="M17.4208 23.0719L19.6275 19.3745L20.2074 18.403L21.2951 18.7137L30.7718 21.4215L31.9775 21.7659L31.8283 23.011L30.907 30.7015L30.7429 32.0718L29.3648 31.9954C24.7899 31.7419 20.2596 30.4521 16.1565 28.1239C13.8427 26.8111 11.6667 25.1692 9.69696 23.1995C7.72725 21.2298 6.08529 19.0538 4.77246 16.74C2.44438 12.6369 1.15446 8.1065 0.901036 3.53162L0.824707 2.1536L2.19504 1.98942L9.8854 1.06812L11.1305 0.918945L11.4751 2.12475L14.1827 11.6014L14.4934 12.6892L13.522 13.269L9.82445 15.4758C10.8063 16.9482 11.9474 18.3468 13.2482 19.6476C14.5492 20.9486 15.9481 22.0899 17.4208 23.0719Z" fill="currentColor">
</path>
components/home/HeroSection.tsx
+5 -4
View File
@@ -100,12 +100,13 @@ export default function HeroSection() {
</div>
<div id="about-us" data-w-id="bce231a0-6e79-c8d3-8883-56d99499b3ad" style={{"opacity": "0", "filter": "blur(8px)"}} className="about-section-wrapper">
<div className="about-section-top-content">
<div className="subtitle">
us </div>
<div className="subtitle">About us</div>
<div className="mg-top-small">
<p className="about-text">
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. <br />
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. </p>
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.
<br />
Crafted by top-tier experts and fueled by global collaboration, Quantum is not just a lab—it&apos;s the core of tomorrow&apos;s innovations, shaping the future one breakthrough at a time.
</p>
</div>
</div>
<div className="about-section-bottom-content">