Skip to content

feat: 首页暗色模式适配 #12

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
kakushi-w merged 1 commit into from
Sep 10, 2026
Merged

feat: 首页暗色模式适配 #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
104 changes: 65 additions & 39 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const PLACEHOLDER_SVG =

// ---------- 数据 ----------
const stats = (wikiCount) => [
{ num: `${wikiCount}`, label: '收录站点', icon: 'fa-globe', iconColor: 'text-primary-600' },
{ num: `${wikiCount}`, label: '收录站点', icon: 'fa-globe', iconColor: 'text-primary-600 dark:text-primary-400' },
{ num: '实时', label: '数据同步', icon: 'fa-bolt', iconColor: 'text-emerald-600 dark:text-emerald-400' },
{ num: '多维', label: '搜索筛选', icon: 'fa-filter', iconColor: 'text-amber-600 dark:text-amber-400' },
{ num: '免费', label: '开放使用', icon: 'fa-heart', iconColor: 'text-pink-600 dark:text-pink-400' }
Expand Down Expand Up @@ -229,22 +229,22 @@ const Home = () => {
</section>

{/* ==================== 数据亮点 · 白色账本带 ==================== */}
<section className="w-full bg-white" aria-label="数据亮点">
<section className="w-full bg-white dark:bg-canvas" aria-label="数据亮点">
{/* flex + justify-between：剩余空间被均分到所有子项之间，分割线因此落在相邻两项的正中 */}
<div className="mx-auto flex max-w-[1280px] flex-wrap items-center justify-between gap-y-10 px-6 py-20 sm:px-10 lg:px-16">
{stats(wikis.length).map((item, i) => (
<React.Fragment key={i}>
{i > 0 && (
<div
aria-hidden="true"
className="hidden h-24 w-px shrink-0 bg-zinc-200 md:block"
className="hidden h-24 w-px shrink-0 bg-zinc-200 dark:bg-line md:block"
/>
)}
<div className="group flex w-1/2 flex-col items-start gap-1 px-2 py-2 md:w-auto md:py-0">
<div className="font-[family-name:Archivo,sans-serif] text-[64px] font-black leading-none tracking-tight text-zinc-900">
<div className="font-[family-name:Archivo,sans-serif] text-[64px] font-black leading-none tracking-tight text-zinc-900 dark:text-fg">
{item.num}
</div>
<div className="flex items-center gap-2 text-sm text-zinc-500">
<div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-fg-3">
<i aria-hidden="true" className={`fa-solid ${item.icon} text-base ${item.iconColor}`} />
<span>{item.label}</span>
</div>
Expand Down Expand Up @@ -277,7 +277,8 @@ const Home = () => {
<div
className="featureBg"
style={{
backgroundImage: `linear-gradient(0deg, rgba(250,250,250,1) 35%, transparent 140%), url(${f.img})`
// 遮罩色走 CSS 变量，明暗主题各一套（见末尾 <style jsx>）
backgroundImage: `linear-gradient(0deg, var(--fs-veil, rgba(250,250,250,1)) 35%, transparent 140%), url(${f.img})`
}}
aria-hidden="true"
/>
Expand All @@ -298,7 +299,7 @@ const Home = () => {
<p className="featureDesc">{f.desc}</p>
<Link
href={f.href}
className="featureCta px-2 py-3 bg-zinc-200 text-zinc-800 hover:bg-zinc-100 transition-colors rounded-sm"
className="featureCta px-2 py-3 bg-zinc-200 hover:bg-zinc-100 dark:bg-raised dark:hover:bg-zinc-700 transition-colors rounded-sm"
onClick={(e) => e.stopPropagation()}
>
{f.cta}
Expand Down Expand Up @@ -353,18 +354,18 @@ const Home = () => {
</section>

{/* ==================== 收录站点 · 双行反向跑马灯 ==================== */}
<section className="w-full bg-zinc-50 py-20 lg:py-24" aria-labelledby="wikis-title">
<section className="w-full bg-zinc-50 py-20 lg:py-24 dark:bg-canvas" aria-labelledby="wikis-title">
<div className="mx-auto max-w-[1280px] px-6 sm:px-10 lg:px-16">
<div className="mb-8 flex items-end justify-between gap-6">
<div>
<div className="font-[family-name:Anton,sans-serif] text-[15px] tracking-[4px] text-zinc-400">
<div className="font-[family-name:Anton,sans-serif] text-[15px] tracking-[4px] text-zinc-400 dark:text-fg-3">
ARCHIVE
</div>
<h2 id="wikis-title" className="mt-2 text-3xl font-black text-zinc-900 sm:text-4xl">
<h2 id="wikis-title" className="mt-2 text-3xl font-black text-zinc-900 dark:text-fg sm:text-4xl">
收录站点
</h2>
</div>
<span className="hidden pb-1 text-sm tabular-nums text-zinc-500 sm:block">
<span className="hidden pb-1 text-sm tabular-nums text-zinc-500 dark:text-fg-3 sm:block">
{wikis.length} 个站点
</span>
</div>
Expand All @@ -373,8 +374,8 @@ const Home = () => {
{/* 行 1 · 向左滚动 */}
<div className="group/marquee relative w-full overflow-hidden">
{/* 边缘渐隐遮罩 */}
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[140px] bg-gradient-to-r from-zinc-50 to-transparent" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[140px] bg-gradient-to-l from-zinc-50 to-transparent" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[140px] bg-gradient-to-r from-zinc-50 to-transparent dark:from-canvas" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[140px] bg-gradient-to-l from-zinc-50 to-transparent dark:from-canvas" />
{/* 两份完全等宽的分组：组内 gap-4、组尾 pr-4 补齐接缝间距，
translateX(-50%) 恰好等于一个分组宽 → 无缝循环 */}
<div className="flex w-max marquee-track marquee-left hover:[animation-play-state:paused]">
Expand All @@ -386,10 +387,10 @@ const Home = () => {
<a
key={`r1-${param}-${idx}`}
href={`/site/${param}`}
className="flex shrink-0 items-center gap-4 rounded-md border border-zinc-200 bg-white px-6 py-4 transition-colors hover:border-primary-400 hover:bg-white"
className="flex shrink-0 items-center gap-4 rounded-md border border-zinc-200 bg-white px-6 py-4 transition-colors hover:border-primary-400 hover:bg-white dark:border-line dark:bg-panel dark:hover:bg-raised"
aria-label={`${wiki.NAME} 站点概览`}
>
<span className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-zinc-100">
<span className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-zinc-100 dark:bg-raised">
<img
src={wiki.ImgURL}
alt={`${wiki.NAME} logo`}
Expand All @@ -400,7 +401,7 @@ const Home = () => {
className="h-full w-full object-contain p-1.5"
/>
</span>
<span className="text-base font-semibold text-zinc-900 whitespace-nowrap">
<span className="text-base font-semibold text-zinc-900 dark:text-fg whitespace-nowrap">
{wiki.NAME}
</span>
</a>
Expand All @@ -413,8 +414,8 @@ const Home = () => {

{/* 行 2 · 向右滚动（reverse） */}
<div className="group/marquee relative mt-7 w-full overflow-hidden">
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[140px] bg-gradient-to-r from-zinc-50 to-transparent" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[140px] bg-gradient-to-l from-zinc-50 to-transparent" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 left-0 z-10 w-[140px] bg-gradient-to-r from-zinc-50 to-transparent dark:from-canvas" />
<div aria-hidden="true" className="pointer-events-none absolute inset-y-0 right-0 z-10 w-[140px] bg-gradient-to-l from-zinc-50 to-transparent dark:from-canvas" />
<div className="flex w-max marquee-track marquee-right hover:[animation-play-state:paused]">
{[0, 1].map((half) => (
<div key={half} aria-hidden={half === 1} className="flex gap-4 pr-4">
Expand All @@ -424,10 +425,10 @@ const Home = () => {
<a
key={`r2-${param}-${idx}`}
href={`/site/${param}`}
className="flex shrink-0 items-center gap-4 rounded-md border border-zinc-200 bg-white px-6 py-4 transition-colors hover:border-primary-400 hover:bg-white"
className="flex shrink-0 items-center gap-4 rounded-md border border-zinc-200 bg-white px-6 py-4 transition-colors hover:border-primary-400 hover:bg-white dark:border-line dark:bg-panel dark:hover:bg-raised"
aria-label={`${wiki.NAME} 站点概览`}
>
<span className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-zinc-100">
<span className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded bg-zinc-100 dark:bg-raised">
<img
src={wiki.ImgURL}
alt={`${wiki.NAME} logo`}
Expand All @@ -438,7 +439,7 @@ const Home = () => {
className="h-full w-full object-contain p-1.5"
/>
</span>
<span className="text-base font-semibold text-zinc-900 whitespace-nowrap">
<span className="text-base font-semibold text-zinc-900 dark:text-fg whitespace-nowrap">
{wiki.NAME}
</span>
</a>
Expand All @@ -451,33 +452,33 @@ const Home = () => {
</section>

{/* ==================== FAQ · 白色双栏区 ==================== */}
<section className="w-full bg-white" aria-labelledby="faq-title">
<section className="w-full bg-white dark:bg-canvas" aria-labelledby="faq-title">
<div className="mx-auto grid max-w-[1280px] grid-cols-1 gap-16 px-6 py-20 sm:px-10 md:grid-cols-[300px_1fr] lg:px-16 lg:py-28">
<div className="space-y-3">
<div className="font-[family-name:Anton,sans-serif] text-[15px] tracking-[4px] text-zinc-400">
<div className="font-[family-name:Anton,sans-serif] text-[15px] tracking-[4px] text-zinc-400 dark:text-fg-3">
FAQ
</div>
<h2 id="faq-title" className="text-3xl font-black tracking-tight text-zinc-900 sm:text-4xl">
<h2 id="faq-title" className="text-3xl font-black tracking-tight text-zinc-900 dark:text-fg sm:text-4xl">
常见问题
</h2>
<p className="text-sm leading-[1.8] text-zinc-500">
<p className="text-sm leading-[1.8] text-zinc-500 dark:text-fg-3">
若没找到答案，可查看关于页或联系管理员
</p>
</div>
<div className="divide-y divide-zinc-200 border-y border-zinc-200">
<div className="divide-y divide-zinc-200 border-y border-zinc-200 dark:divide-line dark:border-line">
{faqs.map((f, i) => (
<details
key={i}
className="group py-7 [&_summary::-webkit-details-marker]:hidden"
>
<summary className="flex cursor-pointer items-center justify-between gap-6 list-none">
<span className="flex items-start gap-3 pr-4 text-base font-semibold text-zinc-900">
<i aria-hidden="true" className="fa-solid fa-circle-question mt-1 text-sm text-primary-600" />
<span className="flex items-start gap-3 pr-4 text-base font-semibold text-zinc-900 dark:text-fg">
<i aria-hidden="true" className="fa-solid fa-circle-question mt-1 text-sm text-primary-600 dark:text-primary-400" />
<span>{f.q}</span>
</span>
<i aria-hidden="true" className="fa-solid fa-chevron-down text-xs text-zinc-500 transition-transform group-open:rotate-180" />
<i aria-hidden="true" className="fa-solid fa-chevron-down text-xs text-zinc-500 dark:text-fg-3 transition-transform group-open:rotate-180" />
</summary>
<div className="mt-4 pl-7 text-sm leading-[1.9] text-zinc-600">
<div className="mt-4 pl-7 text-sm leading-[1.9] text-zinc-600 dark:text-fg-2">
{f.a}
</div>
</details>
Expand Down Expand Up @@ -556,7 +557,32 @@ const Home = () => {
.featureStrip {
display: flex;
flex-direction: column;
background-color: #efeff5ff;
/* 主题变量：亮色沿用原值，暗色值见下方 html.dark 覆盖块 */
--fs-bg: #efeff5ff;
--fs-veil: rgba(250, 250, 250, 1);
--fs-border: rgba(208, 208, 208, .08);
--fs-num: rgba(27, 27, 28, .5);
--fs-title: #000000ff;
--fs-title-mark: #8100ccff;
--fs-desc: rgba(32, 32, 32, .82);
--fs-cta-fg: #000000ff;
--fs-cta-icon-bg: #000000ff;
--fs-cta-icon-fg: #e7e7e7ff;
background-color: var(--fs-bg);
}

/* 暗色模式：整条翻转为暗底亮字，accent 复用语义 token */
:global(html.dark) .featureStrip {
--fs-bg: var(--w-canvas);
--fs-veil: rgba(9, 9, 11, .95);
--fs-border: rgba(255, 255, 255, .09);
--fs-num: rgba(244, 244, 245, .45);
--fs-title: var(--w-fg);
--fs-title-mark: var(--w-accent);
--fs-desc: var(--w-fg-2);
--fs-cta-fg: var(--w-fg);
--fs-cta-icon-bg: var(--w-fg);
--fs-cta-icon-fg: var(--w-canvas);
}

.featurePanel {
Expand All @@ -566,7 +592,7 @@ const Home = () => {
outline: none;
/* 移动端：较矮的纵列 */
height: 172px;
border-top: 1px solid rgba(208, 208, 208, 0.08);
border-top: 1px solid var(--fs-border);
transition: height .5s cubic-bezier(.4, 0, .2, 1);
}
.featurePanel:focus-visible {
Expand Down Expand Up @@ -636,7 +662,7 @@ const Home = () => {
font-size: 44px;
line-height: 1;
letter-spacing: .02em;
color: rgba(27, 27, 28, 0.5);
color: var(--fs-num);
}
.featureNumSm { font-size: 34px; }
.featureTitle {
Expand All @@ -645,36 +671,36 @@ const Home = () => {
font-size: 20px;
font-weight: 900;
line-height: 1.2;
color: #000000ff;
color: var(--fs-title);
white-space: nowrap;
}
.featureTitleOpen::before {
content: '//';
font-size: 75%;
color: #8100ccff
color: var(--fs-title-mark)
}
.featureDesc {
margin: .9rem 0 .9rem 0;
font-size: 15px;
line-height: 1.85;
color: rgba(32, 32, 32, 0.82);
color: var(--fs-desc);
}
.featureCta {
display: inline-flex;
align-items: center;
gap: .6rem;
font-size: 15px;
font-weight: 700;
color: #000000ff;
color: var(--fs-cta-fg);
}
.featureCtaIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #000000ff;
color: #e7e7e7ff;
background: var(--fs-cta-icon-bg);
color: var(--fs-cta-icon-fg);
transition: transform .3s ease;
}
.featureCta:hover .featureCtaIcon { transform: translateX(4px); }
Expand Down
Loading