zzh/2fa-tool
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/2fa-tool.git synced 2026-02-20 11:43:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: switch to monochrome color scheme

Browse Source 
Implement pure black and white theme for both dark and light modes.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-02-04 15:26:54 +00:00
parent cd576ef2c1
commit dc3c9110b9
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/tech-background.tsx
View File

@@ -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()