From dc3c9110b9a8d4dc919234cfee490d602b19f1a4 Mon Sep 17 00:00:00 2001 From: v0 Date: Wed, 4 Feb 2026 15:26:54 +0000 Subject: [PATCH] style: switch to monochrome color scheme Implement pure black and white theme for both dark and light modes. Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com> --- components/tech-background.tsx | 58 +++++++++++++++++----------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/components/tech-background.tsx b/components/tech-background.tsx index b21e3bf..f5c7d13 100644 --- a/components/tech-background.tsx +++ b/components/tech-background.tsx @@ -21,11 +21,11 @@ export function TechBackground() { const draw = () => { const isDark = document.documentElement.classList.contains("dark") - // Fill with base background color - ctx.fillStyle = isDark ? "hsl(222, 47%, 6%)" : "hsl(210, 40%, 98%)" + // Fill with base background color - pure black/white + ctx.fillStyle = isDark ? "#0a0a0a" : "#fafafa" ctx.fillRect(0, 0, canvas.width, canvas.height) - // Draw sophisticated gradient - top left corner glow + // Draw sophisticated gradient - top left corner glow (grayscale only) const gradient1 = ctx.createRadialGradient( 0, 0, @@ -36,19 +36,19 @@ export function TechBackground() { ) if (isDark) { - gradient1.addColorStop(0, "rgba(56, 189, 248, 0.08)") - gradient1.addColorStop(0.5, "rgba(59, 130, 246, 0.04)") + gradient1.addColorStop(0, "rgba(255, 255, 255, 0.03)") + gradient1.addColorStop(0.5, "rgba(255, 255, 255, 0.015)") gradient1.addColorStop(1, "rgba(0, 0, 0, 0)") } else { - gradient1.addColorStop(0, "rgba(59, 130, 246, 0.06)") - gradient1.addColorStop(0.5, "rgba(147, 197, 253, 0.04)") + gradient1.addColorStop(0, "rgba(0, 0, 0, 0.02)") + gradient1.addColorStop(0.5, "rgba(0, 0, 0, 0.01)") gradient1.addColorStop(1, "rgba(255, 255, 255, 0)") } ctx.fillStyle = gradient1 ctx.fillRect(0, 0, canvas.width, canvas.height) - // Draw second gradient - bottom right corner glow + // Draw second gradient - bottom right corner glow (grayscale only) const gradient2 = ctx.createRadialGradient( canvas.width, canvas.height, @@ -59,19 +59,19 @@ export function TechBackground() { ) if (isDark) { - gradient2.addColorStop(0, "rgba(139, 92, 246, 0.06)") - gradient2.addColorStop(0.5, "rgba(99, 102, 241, 0.03)") + gradient2.addColorStop(0, "rgba(255, 255, 255, 0.025)") + gradient2.addColorStop(0.5, "rgba(255, 255, 255, 0.01)") gradient2.addColorStop(1, "rgba(0, 0, 0, 0)") } else { - gradient2.addColorStop(0, "rgba(167, 139, 250, 0.05)") - gradient2.addColorStop(0.5, "rgba(196, 181, 253, 0.03)") + gradient2.addColorStop(0, "rgba(0, 0, 0, 0.015)") + gradient2.addColorStop(0.5, "rgba(0, 0, 0, 0.008)") gradient2.addColorStop(1, "rgba(255, 255, 255, 0)") } ctx.fillStyle = gradient2 ctx.fillRect(0, 0, canvas.width, canvas.height) - // Draw subtle grid + // Draw subtle grid - grayscale only const gridSize = 60 ctx.lineWidth = 1 @@ -79,15 +79,15 @@ export function TechBackground() { for (let x = 0; x <= canvas.width; x += gridSize) { const lineGradient = ctx.createLinearGradient(x, 0, x, canvas.height) if (isDark) { - lineGradient.addColorStop(0, "rgba(148, 163, 184, 0)") - lineGradient.addColorStop(0.3, "rgba(148, 163, 184, 0.04)") - lineGradient.addColorStop(0.7, "rgba(148, 163, 184, 0.04)") - lineGradient.addColorStop(1, "rgba(148, 163, 184, 0)") + lineGradient.addColorStop(0, "rgba(255, 255, 255, 0)") + lineGradient.addColorStop(0.3, "rgba(255, 255, 255, 0.04)") + lineGradient.addColorStop(0.7, "rgba(255, 255, 255, 0.04)") + lineGradient.addColorStop(1, "rgba(255, 255, 255, 0)") } else { - lineGradient.addColorStop(0, "rgba(71, 85, 105, 0)") - lineGradient.addColorStop(0.3, "rgba(71, 85, 105, 0.06)") - lineGradient.addColorStop(0.7, "rgba(71, 85, 105, 0.06)") - lineGradient.addColorStop(1, "rgba(71, 85, 105, 0)") + lineGradient.addColorStop(0, "rgba(0, 0, 0, 0)") + lineGradient.addColorStop(0.3, "rgba(0, 0, 0, 0.05)") + lineGradient.addColorStop(0.7, "rgba(0, 0, 0, 0.05)") + lineGradient.addColorStop(1, "rgba(0, 0, 0, 0)") } ctx.strokeStyle = lineGradient ctx.beginPath() @@ -100,15 +100,15 @@ export function TechBackground() { for (let y = 0; y <= canvas.height; y += gridSize) { const lineGradient = ctx.createLinearGradient(0, y, canvas.width, y) if (isDark) { - lineGradient.addColorStop(0, "rgba(148, 163, 184, 0)") - lineGradient.addColorStop(0.3, "rgba(148, 163, 184, 0.04)") - lineGradient.addColorStop(0.7, "rgba(148, 163, 184, 0.04)") - lineGradient.addColorStop(1, "rgba(148, 163, 184, 0)") + lineGradient.addColorStop(0, "rgba(255, 255, 255, 0)") + lineGradient.addColorStop(0.3, "rgba(255, 255, 255, 0.04)") + lineGradient.addColorStop(0.7, "rgba(255, 255, 255, 0.04)") + lineGradient.addColorStop(1, "rgba(255, 255, 255, 0)") } else { - lineGradient.addColorStop(0, "rgba(71, 85, 105, 0)") - lineGradient.addColorStop(0.3, "rgba(71, 85, 105, 0.06)") - lineGradient.addColorStop(0.7, "rgba(71, 85, 105, 0.06)") - lineGradient.addColorStop(1, "rgba(71, 85, 105, 0)") + lineGradient.addColorStop(0, "rgba(0, 0, 0, 0)") + lineGradient.addColorStop(0.3, "rgba(0, 0, 0, 0.05)") + lineGradient.addColorStop(0.7, "rgba(0, 0, 0, 0.05)") + lineGradient.addColorStop(1, "rgba(0, 0, 0, 0)") } ctx.strokeStyle = lineGradient ctx.beginPath()