Skip to content

Enhance dark mode background and add random color gradients #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nowscott merged 5 commits into from
Mar 17, 2026
Merged

Enhance dark mode background and add random color gradients #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2f165fb
fix: 移除重复的favicon链接并修复暗色模式背景
nowscott Mar 17, 2026
4f23b13
style: 优化暗色模式背景动画的随机化范围和逻辑
nowscott Mar 17, 2026
7f4ee51
feat: 为背景渐变添加随机彩虹色彩
nowscott Mar 17, 2026
7eabe23
feat(ui): 随机化浅色模式纸张渐变增强视觉多样性
nowscott Mar 17, 2026
1996381
docs: 更新关于页面文案以反映产品定位转变
nowscott Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 46 additions & 7 deletions pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,54 @@ function MyApp({ Component, pageProps }) {
root.style.setProperty('--paper-glow-y', `${randomInt(2, 24)}%`);
root.style.setProperty('--paper-patch-x', `${randomInt(46, 92)}%`);
root.style.setProperty('--paper-patch-y', `${randomInt(36, 92)}%`);
root.style.setProperty('--shadow-beam-angle', `${randomInt(104, 156)}deg`);

// Randomize Light Mode Paper Gradient
root.style.setProperty('--paper-gradient-angle', `${randomInt(0, 360)}deg`);
root.style.setProperty('--paper-gradient-alpha-1', random(0.92, 0.98).toFixed(3));
root.style.setProperty('--paper-gradient-alpha-2', random(0.94, 0.99).toFixed(3));
root.style.setProperty('--paper-gradient-alpha-3', random(0.90, 0.96).toFixed(3));

// Dark mode background position randomization
// Beam angle: 100-160 deg
root.style.setProperty('--shadow-beam-angle', `${randomInt(100, 160)}deg`);
root.style.setProperty('--shadow-beam-alpha', random(0.08, 0.2).toFixed(3));
root.style.setProperty('--shadow-line-gap', `${randomInt(26, 56)}px`);

// Line gap: 20-60px
root.style.setProperty('--shadow-line-gap', `${randomInt(20, 60)}px`);
root.style.setProperty('--shadow-line-alpha', random(0.14, 0.3).toFixed(3));
root.style.setProperty('--shadow-glow-alpha', random(0.12, 0.28).toFixed(3));
root.style.setProperty('--shadow-glow-x', `${randomInt(6, 36)}%`);
root.style.setProperty('--shadow-glow-y', `${randomInt(2, 30)}%`);
root.style.setProperty('--shadow-patch-x', `${randomInt(52, 94)}%`);
root.style.setProperty('--shadow-patch-y', `${randomInt(34, 92)}%`);

// Glow alpha: 0.1-0.3
root.style.setProperty('--shadow-glow-alpha', random(0.1, 0.3).toFixed(3));

// Main Glow Position (Full Screen Random): X: 0-100%, Y: 0-100%
root.style.setProperty('--shadow-glow-x', `${randomInt(0, 100)}%`);
root.style.setProperty('--shadow-glow-y', `${randomInt(0, 100)}%`);

// Patch Position (Full Screen Random): X: 0-100%, Y: 0-100%
root.style.setProperty('--shadow-patch-x', `${randomInt(0, 100)}%`);
root.style.setProperty('--shadow-patch-y', `${randomInt(0, 100)}%`);

// Conic Gradient Focal Point (Randomized along top edge): X: 10-90%, Y: -10-40%
root.style.setProperty('--shadow-conic-x', `${randomInt(10, 90)}%`);
root.style.setProperty('--shadow-conic-y', `${randomInt(-10, 40)}%`);

// Random Rainbow Colors for Conic Gradient
// Define a palette of 7 vivid colors with low opacity for subtle glow
const rainbowColors = [
'rgb(239 68 68 / 0.16)', // Red
'rgb(249 115 22 / 0.16)', // Orange
'rgb(234 179 8 / 0.16)', // Yellow
'rgb(34 197 94 / 0.16)', // Green
'rgb(59 130 246 / 0.16)', // Blue
'rgb(99 102 241 / 0.16)', // Indigo
'rgb(168 85 247 / 0.16)', // Violet
];

// Pick 3 distinct colors randomly
const shuffled = rainbowColors.sort(() => 0.5 - Math.random());
root.style.setProperty('--shadow-rainbow-1', shuffled[0]);
root.style.setProperty('--shadow-rainbow-2', shuffled[1]);
root.style.setProperty('--shadow-rainbow-3', shuffled[2]);
}, []);

return (
Expand Down
1 change: 0 additions & 1 deletion pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ class MyDocument extends Document {
<Html lang="zh-CN">
<Head>
<link id="favicon" rel="icon" type="image/svg+xml" href="/images/favicon-light.svg" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<meta charSet="UTF-8" />
<meta id="theme-color" name="theme-color" content="#faf6ef" /> {/* warm-neutral */}
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
Expand Down
14 changes: 7 additions & 7 deletions pages/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const AboutPage = ({ count, lastFetched, posts }) => {
</span>
</h1>
<p className="text-base sm:text-lg text-slate-600 dark:text-zinc-400 leading-relaxed max-w-2xl mx-auto">
探索互联网的角落，发现那些有趣且独立的网页
互联网时代的个人黄页，让寻找回归准确与高效
</p>
</div>

Expand All @@ -45,27 +45,27 @@ const AboutPage = ({ count, lastFetched, posts }) => {
<div className="flex sm:block items-start p-4 sm:p-6 rounded-2xl bg-[linear-gradient(165deg,rgba(255,255,255,0.94),rgba(241,248,255,0.9))] dark:bg-[linear-gradient(165deg,rgba(42,42,46,0.92),rgba(28,28,30,0.95))] border border-slate-300 dark:border-zinc-700/90 shadow-sm hover:border-sky-400/50 transition-[background-color,border-color]">
<HiOutlineSparkles className="w-8 h-8 text-sky-500 shrink-0 mr-4 sm:mr-0 sm:mb-4" />
<div>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-sky-600 dark:text-zinc-100">独立精神</h3>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-sky-600 dark:text-zinc-100">个人黄页</h3>
<p className="text-sm text-slate-600 dark:text-zinc-400 leading-relaxed">
我们致力于发掘那些不随波逐流、充满个性和创意的独立个人网站，让互联网回归本心。
像互联网初期的黄页一样，构建属于你自己的索引。不再迷失于搜索引擎的广告与杂讯中，只保留最精准、最常用的入口。
</p>
</div>
</div>
<div className="flex sm:block items-start p-4 sm:p-6 rounded-2xl bg-[linear-gradient(165deg,rgba(255,255,255,0.94),rgba(241,248,255,0.9))] dark:bg-[linear-gradient(165deg,rgba(42,42,46,0.92),rgba(28,28,30,0.95))] border border-slate-300 dark:border-zinc-700/90 shadow-sm hover:border-blue-400/50 transition-[background-color,border-color]">
<HiOutlineCollection className="w-8 h-8 text-blue-500 shrink-0 mr-4 sm:mr-0 sm:mb-4" />
<div>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-indigo-600 dark:text-zinc-100">精心收录</h3>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-indigo-600 dark:text-zinc-100">数据掌控</h3>
<p className="text-sm text-slate-600 dark:text-zinc-400 leading-relaxed">
每一个被收录的网页都经过人工审核，确保其内容的质量和独特性，拒绝信息碎片。
利用 Notion API，将你的收藏夹变为可视化的数据库。添加标签、描述，让数据的管理与展示完全由你掌控，既是工具也是资产。
</p>
</div>
</div>
<div className="flex sm:block items-start p-4 sm:p-6 rounded-2xl bg-[linear-gradient(165deg,rgba(255,255,255,0.94),rgba(241,248,255,0.9))] dark:bg-[linear-gradient(165deg,rgba(42,42,46,0.92),rgba(28,28,30,0.95))] border border-slate-300 dark:border-zinc-700/90 shadow-sm hover:border-cyan-400/50 transition-[background-color,border-color]">
<HiOutlineHeart className="w-8 h-8 text-cyan-500 shrink-0 mr-4 sm:mr-0 sm:mb-4" />
<div>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-cyan-600 dark:text-zinc-100">开源共建</h3>
<h3 className="text-base sm:text-lg font-extrabold mb-1 sm:mb-2 text-cyan-600 dark:text-zinc-100">极致体验</h3>
<p className="text-sm text-slate-600 dark:text-zinc-400 leading-relaxed">
IndWebIndex 是一个完全开源的项目。任何人都可以通过提交 Issue 或投稿来丰富我们的索引库。
现代化的设计、毫秒级的响应、平滑的交互。我们通过双层缓存和 React 状态管理，消除了 Notion API 的延迟，让每一次点击都如丝般顺滑。
</p>
</div>
</div>
Expand Down
19 changes: 17 additions & 2 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,24 +46,39 @@ html, body {
}

.app-background {
position: relative;
isolation: isolate;
}

.app-background::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: #faf6ef;
background-image:
radial-gradient(1100px 760px at var(--paper-glow-x, 14%) var(--paper-glow-y, 8%), rgb(255 255 255 / var(--paper-glow-alpha, 0.62)) 0%, transparent 64%),
radial-gradient(840px 620px at var(--paper-patch-x, 80%) var(--paper-patch-y, 72%), rgb(217 119 6 / calc(var(--paper-warp-alpha, 0.08) * 0.72)) 0%, transparent 72%),
repeating-linear-gradient(var(--paper-fiber-angle, 24deg), rgb(255 255 255 / var(--paper-fiber-alpha, 0.24)) 0 1.2px, transparent 1.2px var(--paper-fiber-gap, 11px)),
repeating-linear-gradient(calc(var(--paper-fiber-angle, 24deg) + 83deg), rgb(120 113 108 / var(--paper-grain-alpha, 0.1)) 0 1px, transparent 1px calc(var(--paper-fiber-gap, 11px) * 1.35)),
conic-gradient(from calc(var(--paper-fiber-angle, 24deg) * 1.2) at 22% 16%, rgb(255 255 255 / 0.35), transparent 26%, rgb(245 158 11 / 0.07) 43%, transparent 61%, rgb(254 243 199 / 0.3) 82%, transparent 100%),
linear-gradient(158deg, rgba(255, 251, 245, 0.95) 0%, rgba(250, 244, 234, 0.97) 42%, rgba(241, 233, 220, 0.93) 100%);
linear-gradient(var(--paper-gradient-angle, 158deg), rgba(255, 251, 245, var(--paper-gradient-alpha-1, 0.95)) 0%, rgba(250, 244, 234, var(--paper-gradient-alpha-2, 0.97)) 42%, rgba(241, 233, 220, var(--paper-gradient-alpha-3, 0.93)) 100%);
}

.dark .app-background {
/* Remove background from the element itself in dark mode */
background: transparent;
}

.dark .app-background::before {
background-color: #000000;
background-image:
radial-gradient(1080px 760px at var(--shadow-glow-x, 18%) var(--shadow-glow-y, 8%), rgb(56 189 248 / var(--shadow-glow-alpha, 0.18)) 0%, transparent 64%),
radial-gradient(980px 640px at var(--shadow-patch-x, 82%) var(--shadow-patch-y, 70%), rgb(30 64 175 / 0.24) 0%, transparent 72%),
linear-gradient(var(--shadow-beam-angle, 128deg), rgb(255 255 255 / var(--shadow-beam-alpha, 0.14)) 0%, rgb(255 255 255 / 0) 36%, rgb(59 130 246 / 0.24) 68%, rgb(255 255 255 / 0) 100%),
repeating-linear-gradient(calc(var(--shadow-beam-angle, 128deg) + 90deg), rgb(63 63 70 / var(--shadow-line-alpha, 0.22)) 0 2px, transparent 2px var(--shadow-line-gap, 42px)),
conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at 76% 12%, rgb(34 197 94 / 0.16), transparent 28%, rgb(59 130 246 / 0.18) 52%, transparent 74%, rgb(255 255 255 / 0.12) 92%, transparent 100%),
conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at var(--shadow-conic-x, 76%) var(--shadow-conic-y, 12%), var(--shadow-rainbow-1, rgb(34 197 94 / 0.16)), transparent 28%, var(--shadow-rainbow-2, rgb(59 130 246 / 0.18)) 52%, transparent 74%, var(--shadow-rainbow-3, rgb(255 255 255 / 0.12)) 92%, transparent 100%),
linear-gradient(180deg, rgba(9, 9, 11, 0.92) 0%, rgba(0, 0, 0, 1) 100%);
}

Expand Down
Loading