feat: 添加暗黑模式支持，优化样式和背景图像

Co-authored-by: Sylvanysc <Sylvanysc@users.noreply.github.com> Co-authored-by: xudeyu444 <xudeyu444@users.noreply.github.com> Co-authored-by: 奕 <a18355849597@outlook.com>
2025-12-17 21:01:38 +08:00 · 2025-06-04 00:52:05 +08:00
parent 8aefb0db7c
commit 9d05d0074a
7 changed files with 344 additions and 103 deletions
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -105,7 +105,7 @@ onMounted(() => {
          </div>
        </div>
        <div
-          class="flex flex-col items-center justify-center mb-10 text-(--p-secondary-400) text-lg gap-2 tracking-[0.5em] transition-all duration-[.03s]"
+          class="flex flex-col items-center justify-center mb-10 text-secondary-400 text-lg gap-2 tracking-[0.5em] transition-all duration-[.03s] dark:text-secondary-600"
          :style="{
            transform: `translateY(${range(0, 0.5, sProgress) * -500}%) scale(${
              1 + range(0, 0.5, sProgress) * 0.2
@@ -119,14 +119,14 @@ onMounted(() => {
      <i class="w-96 h-144 figure-container" />
      <div class="card flex flex-col px-9 py-15 rounded-tl-3xl gap-8">
        <div class="flex gap-4">
-          <h1 class="font-bold text-6xl">星火应用商店</h1>
+          <h1 class="font-bold text-6xl dark:text-surface-50">星火应用商店</h1>
          <div class="flex flex-col items-start justify-between">
            <span
-              class="font-(family-name:--s-title-font) px-4 py-0.5 text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
+              class="font-(family-name:--s-title-font) px-4 py-0.5 text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
              >V4.5.2</span
            >
            <h2
-              class="text-lg font-(family-name:--s-title-font) text-(--p-primary-500)"
+              class="text-lg font-(family-name:--s-title-font) text-primary-500"
            >
              SPARK STORE
            </h2>
@@ -135,41 +135,45 @@ onMounted(() => {
        <div class="flex -mt-3 gap-2">
          <img
            src="https://gitee.com/spark-store-project/spark-store/badge/star.svg?theme=gvp"
+            height="21"
+            class="h-[21px]"
          />
          <img
            src="https://gitee.com/spark-store-project/spark-store/badge/fork.svg?theme=gvp"
+            height="21"
+            class="h-[21px]"
          />
        </div>
-        <div class="flex flex-col text-xl text-(--p-surface-500) gap-1">
+        <div
+          class="flex flex-col text-xl text-surface-500 gap-1 dark:text-surface-200"
+        >
          <p>适用于 Debian 社区和其他 Linux 发行版的社区应用商店；</p>
          <p>从社区中来，到社区中去，聚星星之火，成燎原之势。</p>
-          <p class="text-lg font-bold text-black">
+          <p class="text-lg font-bold text-black dark:text-surface-100">
            🎉星火应用商店吉祥物「星小火」现已上线！
-            <a class="text-(--p-secondary-600)">了解更多 →</a>
+            <a class="text-secondary-600">了解更多 →</a>
          </p>
        </div>
        <div class="flex gap-4">
          <NuxtLink
            to="/download"
-            class="px-12 py-2.5 text-2xl font-bold text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
+            class="px-12 py-2.5 text-2xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
          >
            <i class="pi pi-download text-xl! font-bold! pr-4" /> 前往下载
          </NuxtLink>
          <a
-            class="px-2.5 bg-(--p-primary-200) border-(--p-primary-400) border-4 rounded-full flex items-center justify-center"
+            class="px-2.5 bg-primary-200 border-primary-400 border-4 rounded-full flex items-center justify-center dark:bg-primary-900 dark:border-secondary-600"
            href="https://gitee.com/spark-store-project"
          >
            <Icon
              name="simple-icons:gitee"
-              class="text-2xl! font-bold! text-(--p-primary-600)"
+              class="text-2xl! font-bold! text-primary-color"
            />
          </a>
          <a
-            class="px-2.5 bg-(--p-primary-200) border-(--p-primary-400) border-4 rounded-full flex items-center justify-center"
+            class="px-2.5 bg-primary-200 border-primary-400 border-4 rounded-full flex items-center justify-center dark:bg-primary-900 dark:border-secondary-600"
          >
-            <i
-              class="pi pi-github text-2xl! font-bold! text-(--p-primary-600)"
-            />
+            <i class="pi pi-github text-2xl! font-bold! text-primary-color" />
          </a>
        </div>
      </div>
@@ -190,7 +194,7 @@ onMounted(() => {
          }"
        ></div>
        <div
-          class="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-t-4xl px-6 pt-4 flex gap-6 from-(--p-primary-300) to-[transparent] bg-linear-to-b after:from-(transparent) after:from-50 after:to-(--s-to) after:bg-linear-to-b after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-2"
+          class="absolute bottom-0 left-1/2 -translate-x-1/2 rounded-t-4xl px-6 pt-4 flex gap-6 from-primary-300 to-[transparent] bg-linear-to-b after:from-(transparent) after:from-50 after:to-(--s-to) after:bg-linear-to-b after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-2 dark:from-primary-800"
          style="
            --s-to: color-mix(in srgb, var(--s-background), transparent 20%);
          "
@@ -205,7 +209,7 @@ onMounted(() => {
            class="flex flex-col items-center justify-between mt-2 mb-6 gap-5"
          >
            <h2
-              class="text-3xl text-(--p-primary-500) font-(family-name:--s-title-font) tracking-widest"
+              class="text-3xl text-primary-500 font-(family-name:--s-title-font) tracking-widest dark:opacity-80"
            >
              SPARK
            </h2>
@@ -213,7 +217,7 @@ onMounted(() => {
            <div
              v-for="i in 3"
              :key="i"
-              class="w-full rounded-full p-3 from-(--p-primary-400) to-(--p-primary-200) bg-linear-to-b"
+              class="w-full rounded-full p-3 from-primary-400 to-primary-200 bg-linear-to-b dark:from-primary-500 dark:to-primary-600 dark:opacity-60"
            ></div>
          </div>
          <div class="flex flex-col gap-4 w-full">
@@ -221,30 +225,32 @@ onMounted(() => {
              <div
                v-for="i in 2"
                :key="i"
-                class="p-3 rounded-full bg-(--p-primary-500)"
+                class="p-3 rounded-full bg-primary-500 dark:opacity-80"
              ></div>

-              <div class="w-40 p-3 rounded-full bg-(--p-primary-500)"></div>
+              <div
+                class="w-40 p-3 rounded-full bg-primary-500 dark:opacity-80"
+              ></div>

              <div class="grow-1"></div>

              <div
                v-for="i in 3"
                :key="i"
-                class="p-3 rounded-full bg-(--p-primary-500)"
+                class="p-3 rounded-full bg-primary-500 dark:opacity-80"
              ></div>
            </div>

            <div
-              class="rounded-t-2xl p-4 flex gap-4 w-full from-(--p-primary-400) to-[transparent] bg-linear-to-b grow-1"
+              class="rounded-t-2xl p-4 flex gap-4 w-full from-primary-400 to-[transparent] bg-linear-to-b grow-1 dark:from-primary-700 dark:opacity-80"
            >
              <div
                v-for="i in 3"
                :key="i"
-                class="w-45 h-27 rounded-xl flex items-center justify-center from-(--p-primary-500) to-(--p-primary-300) bg-linear-to-b"
+                class="w-45 h-27 rounded-xl flex items-center justify-center from-primary-500 to-primary-300 bg-linear-to-b dark:from-primary-600 dark:to-primary-700"
              >
                <i
-                  class="pi text-5xl! text-(--p-primary-600)"
+                  class="pi text-5xl! text-primary-color dark:text-primary-200"
                  :class="`pi-${['th-large', 'cog', 'thumbs-up'][i - 1]}`"
                ></i>
              </div>
@@ -252,10 +258,12 @@ onMounted(() => {
          </div>
        </div>
      </div>
-      <h2 class="text-center text-6xl font-bold text-(--p-primary-color)">
+      <h2
+        class="text-center text-6xl font-bold text-primary-color dark:text-primary-400"
+      >
        星星之火，可以燎原。
      </h2>
-      <p class="text-center text-xl leading-[2]">
+      <p class="text-center text-xl leading-[2] dark:text-surfacce-200">
        每个普通用户的需求反馈、每名开发者的代码贡献、每一次社区的互助分享，<br />
        都在为 Linux 桌面生态注入蓬勃活力。<br />
        我们深信「人人为我，我为人人」，以共享之火照亮开源之路。<br />
@@ -267,7 +275,7 @@ onMounted(() => {
    </section>
    <section class="flex items-center justify-center gap-16 pt-15">
      <div
-        class="flex bg-(--p-primary-200) rounded-4xl px-6 py-4 h-134 gap-6 overflow-hidden"
+        class="flex bg-primary-200 rounded-4xl px-6 py-4 h-134 gap-6 overflow-hidden dark:bg-primary-900"
      >
        <div
          v-for="i in 5"
@@ -311,20 +319,11 @@ onMounted(() => {
        <div class="flex items-center gap-6">
          <Icon
            name="s:spark"
-            class="text-6xl"
+            class="text-6xl s-color-primary-500"
            mode="svg"
-            :style="{
-              '--s-c1': 'var(--p-primary-500)',
-              '--s-c2': 'var(--p-primary-500)',
-              '--s-c3': 'var(--p-primary-500)',
-              '--s-c4': 'var(--p-primary-500)',
-              '--s-c5': 'var(--p-primary-500)',
-              '--s-c6': 'var(--p-primary-500)',
-              '--s-c7': 'var(--p-primary-500)',
-            }"
          />
          <h2
-            class="text-4xl font-(family-name:--s-title-font) text-(--p-primary-500)"
+            class="text-4xl font-(family-name:--s-title-font) text-primary-500"
          >
            WHAT'S NEW ?
          </h2>
@@ -336,7 +335,7 @@ onMounted(() => {
        <p class="text-5xl leading-[1.5] font-bold">
          或许现在，<br />
          你只需要一个<br />
-          <span class="text-(--p-primary-color)">星火应用商店。</span>
+          <span class="text-primary-color">星火应用商店。</span>
        </p>
      </div>
    </section>
@@ -345,18 +344,17 @@ onMounted(() => {
        <Icon
          name="s:community"
          mode="svg"
+          class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-700)',
-            '--s-bg': 'var(--p-secondary-100)',
-            '--s-bg-2': 'var(--p-secondary-200)',
-            '--s-bg-3': 'var(--p-secondary-400)',
          }"
        />
-        <h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
+        <h2
+          class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
          <span
-            class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
            >COMMUNITY</span
          ><br />
          社区共筑&nbsp;&nbsp;精挑细选
@@ -371,18 +369,20 @@ onMounted(() => {
              以开源精神守护应用品质
            </p>
          </div>
-          <p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31.8em]">
+          <p
+            class="text-lg text-surface-700 leading-[2] max-w-[31.8em] dark:text-surface-200"
+          >
            星火社区构建 Linux
            生态「应用银河」，持续上架丰富的跨平台、跨生态应用程序，涵盖系统工具、影音娱乐等精选资源，精准匹配用户需求。年轻开发团队以
            00 后为主力，致力让技术成果如星火般点亮数字原野。
          </p>
-          <div class="flex items-center gap-4">
-            <p class="font-bold text-3xl text-(--p-primary-500)">
+          <div class="flex items-center gap-4 dark:opacity-80">
+            <p class="font-bold text-3xl text-primary-500">
              全架构<br />
              上架应用
            </p>
            <p
-              class="text-7xl font-(family-name:--s-title-font) text-(--p-primary-500)"
+              class="text-7xl font-(family-name:--s-title-font) text-primary-500"
            >
              {{
                Math.floor(
@@ -420,12 +420,11 @@ onMounted(() => {
        <!-- 右侧图片区域 -->
        <Icon
          name="s:community-deco"
+          class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
          mode="svg"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-900)',
-            '--s-bg': 'var(--p-primary-200)',
          }"
        />
      </div>
@@ -434,19 +433,18 @@ onMounted(() => {
      <div class="flex items-center justify-center gap-6">
        <Icon
          name="s:superspeed"
+          class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
          mode="svg"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-700)',
-            '--s-bg': 'var(--p-secondary-100)',
-            '--s-bg-2': 'var(--p-secondary-200)',
-            '--s-bg-3': 'var(--p-secondary-400)',
          }"
        />
-        <h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
+        <h2
+          class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
          <span
-            class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
            >SUPERSPEED</span
          ><br />
          极速下载&nbsp;&nbsp;瞬息可达
@@ -456,12 +454,11 @@ onMounted(() => {
        <!-- 左侧图片区域 -->
        <Icon
          name="s:superspeed-deco"
+          class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
          mode="svg"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-900)',
-            '--s-bg': 'var(--p-primary-200)',
          }"
        />

@@ -471,14 +468,16 @@ onMounted(() => {
            <p class="text-5xl leading-[1.5]">下载「黑科技」</p>
            <p class="text-5xl font-bold leading-[1.5]">APTSS 重构智能网络</p>
          </div>
-          <p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31em]">
+          <p
+            class="text-lg text-surface-700 leading-[2] max-w-[31em] dark:text-surface-200"
+          >
            下载速度是应用商店的关键指标，而星火应用商店在这方面表现卓越。在软件分发阶段，商店采用基于
            APT-Fast 优化的下载工具 APTSS，准备速度较原版提升 300%
            以上，处理复杂应用依赖关系亦流畅迅捷；同时支持多线程下载加速，充分利用网络带宽资源，告别卡顿等待。
          </p>
          <a
            href="https://gitee.com/GXDE-OS/aptss"
-            class="text-xl font-bold text-(--p-secondary-600)"
+            class="text-xl font-bold text-secondary-600 dark:text-secondary-500"
            >🎯 APTSS 源码仓库地址 →</a
          >
        </div>
@@ -488,22 +487,20 @@ onMounted(() => {
      <div class="flex items-center justify-center gap-6">
        <Icon
          name="s:convenience"
+          class="s-deco-secondary-700 s-bg-secondary-100 s-bg-2-secondary-200 s-bg-3-secondary-400 dark:s-deco-primary-400 dark:s-bg-primary-800 dark:s-bg-2-secondary-600 dark:s-bg-3-primary-900"
          mode="svg"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-700)',
-            '--s-bg': 'var(--p-secondary-100)',
-            '--s-bg-2': 'var(--p-secondary-200)',
-            '--s-bg-3': 'var(--p-secondary-400)',
          }"
        />
-        <h2 class="text-5xl text-(--p-primary-600) font-bold leading-[1.3]">
+        <h2
+          class="text-5xl text-primary-color font-bold leading-[1.3] dark:text-primary-400"
+        >
          <span
-            class="font-(family-name:--s-title-font) text-(--p-primary-400) font-normal"
+            class="font-(family-name:--s-title-font) text-primary-400 font-normal dark:opacity-50"
            >CONVENIENCE</span
-          ><br />
-          一键安装&nbsp;&nbsp;即刻掌控
+          ><br />一键安装&nbsp;&nbsp;即刻掌控
        </h2>
      </div>
      <div class="flex gap-16">
@@ -515,7 +512,9 @@ onMounted(() => {
              让技术普惠真正触手可及
            </p>
          </div>
-          <p class="text-lg text-(--p-surface-700) leading-[2] max-w-[31em]">
+          <p
+            class="text-lg text-surface-700 leading-[2] max-w-[31em] dark:text-surface-200"
+          >
            星火商店所有程序经过深度适配优化；用户轻点按钮，系统自动完成依赖解析与环境配置，处理复杂软件如搭积木般严丝合缝。从图形应用到编程工具，从
            Wine 移植应用到 Android
            APP，皆可轻松实现「零门槛安装」。上架应用均通过严格测试，社区开发者持续维护更新，确保每款软件始终良好稳定运行。
@@ -524,12 +523,11 @@ onMounted(() => {
        <!-- 右侧图片区域 -->
        <Icon
          name="s:convenience-deco"
+          class="s-deco-secondary-900 s-bg-primary-200 dark:s-deco-secondary-100 dark:s-bg-primary-500"
          mode="svg"
          :style="{
            height: '100%',
            width: 'auto',
-            '--s-deco': 'var(--p-secondary-900)',
-            '--s-bg': 'var(--p-primary-200)',
          }"
        />
      </div>
@@ -538,7 +536,7 @@ onMounted(() => {
      <div
        class="fixed top-0 left-0 w-full h-full z-[-1]"
        :style="{
-          opacity: 1 - Math.abs(range(-0.5, 0.5, sProgress - 6)) * 2,
+          opacity: 0.1 - Math.abs(range(-0.5, 0.5, sProgress - 6)) * 0.2,
          transform: `scale(${1 - range(-0.5, 0.5, sProgress - 6)}) rotate(${
            range(-0.5, 0.5, sProgress - 6) * 180
          }deg)`,
@@ -546,27 +544,20 @@ onMounted(() => {
      >
        <Icon
          name="s:spark"
-          class="absolute top-1/2 -translate-y-1/2"
+          class="absolute top-1/2 -translate-y-1/2 s-color-primary-500"
          mode="svg"
          :style="{
            height: 'auto',
            width: '100%',
-            '--s-c1': 'var(--p-primary-100)',
-            '--s-c2': 'var(--p-primary-100)',
-            '--s-c3': 'var(--p-primary-100)',
-            '--s-c4': 'var(--p-primary-100)',
-            '--s-c5': 'var(--p-primary-100)',
-            '--s-c6': 'var(--p-primary-100)',
-            '--s-c7': 'var(--p-primary-100)',
          }"
        />
      </div>
      <!-- 左侧内容区域 -->
      <div class="flex flex-col gap-4 items-start">
        <div class="flex items-center gap-4">
-          <p class="font-bold text-3xl text-(--p-primary-600)">星火应用商店</p>
+          <p class="font-bold text-3xl text-primary-color">星火应用商店</p>
          <p
-            class="font-bold text-2xl text-(--p-secondary-300) font-(family-name:--s-title-font)"
+            class="font-bold text-2xl text-secondary-300 font-(family-name:--s-title-font) dark:text-secondary-600"
          >
            SPARK STORE
          </p>
@@ -575,13 +566,13 @@ onMounted(() => {
          更多精彩，<br />
          <span class="font-bold">邀您下载体验。</span>
        </p>
-        <p class="text-lg leading-[2] text-(--p-surface-700)">
+        <p class="text-lg leading-[2] text-surface-900 dark:text-surface-200">
          Linux 软件生态的构建并非依赖个体的孤立努力，而需要全社区共同参与；<br />
          只有当大家的「星火」聚集一处，方可引发「燎原之势」。
        </p>
        <NuxtLink
          to="/download"
-          class="px-14 py-3 text-2xl font-bold text-white from-(--p-primary-400) to-(--p-primary-500) bg-linear-to-r rounded-full"
+          class="px-14 py-3 text-2xl font-bold text-white from-primary-400 to-primary-500 bg-linear-to-r rounded-full dark:from-primary-500 dark:to-primary-600"
        >
          <i class="pi pi-download text-xl! font-bold! pr-4" /> 前往下载
        </NuxtLink>
@@ -619,6 +610,10 @@ section {
  );
 }

+.s-dark .s-dots {
+  background-image: linear-gradient(135deg, #d05a63, #d4a641);
+}
+
 .figure-container {
  background-image: url("~/assets/images/index/figure.png");
  background-image: url("~/assets/images/index/figure.webp");
@@ -628,6 +623,12 @@ section {
  background-position: center;
 }

+.s-dark .figure-container {
+  background-image: url("~/assets/images/index/figure-dark.png");
+  background-image: url("~/assets/images/index/figure-dark.webp");
+  background-image: url("~/assets/images/index/figure-dark.avif");
+}
+
 .card {
  position: relative;

@@ -672,6 +673,25 @@ section {
  }
 }

+.s-dark .card {
+  &::before {
+    background-image: linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--p-primary-400) 60%, var(--s-background) 40%),
+      transparent 42%
+    );
+  }
+
+  &::after {
+    background-image: linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--p-primary-500) 30%, var(--s-background) 70%),
+      var(--s-background) 42%,
+      var(--s-background) 50%,
+      transparent
+    );
+  }
+}
 .s2d {
  &::before {
    content: "";