🎨 style(footer): improve theme compatibility and color consistency

Update Footer component to use semantic color variables for better theme integration: - Replace hardcoded background color with semi-color-bg-2 for theme consistency - Update text colors to use semantic variables (semi-color-text-0, semi-color-text-1) - Replace hardcoded link colors with semi-color-primary for brand consistency - Add hover effects with smooth transitions for better user experience - Keep logo container background as gray-800 for visual stability This ensures the footer adapts properly to different theme modes while maintaining good readability and visual consistency across the application.

🎨 style(footer): improve theme compatibility and color consistency
Update Footer component to use semantic color variables for better theme integration: - Replace hardcoded background color with semi-color-bg-2 for theme consistency - Update text colors to use semantic variables (semi-color-text-0, semi-color-text-1) - Replace hardcoded link colors with semi-color-primary for brand consistency - Add hover effects with smooth transitions for better user experience - Keep logo container background as gray-800 for visual stability This ensures the footer adapts properly to different theme modes while maintaining good readability and visual consistency across the application.
4c92025d · Apple\Apple · 5a227255 · 4c92025d
Commit 4c92025d authored Jun 07, 2025 by $Apple\Apple's avatar$ Apple\Apple
Hide whitespace changes
Inline Side-by-side

Showing with 22 additions and 22 deletions

web/src/components/layout/Footer.js
+22 -22

No files found.
--- a/web/src/components/layout/Footer.js
+++ b/web/src/components/layout/Footer.js
@@ -22,7 +22,7 @@ const FooterBar = () => {
  const currentYear = new Date().getFullYear();
  const customFooter = useMemo(() => (
-    <footer className="relative bg-gray-900 dark:!bg-[#1C1F23] h-auto py-16 px-6 md:px-24 w-full flex flex-col items-center justify-between overflow-hidden">
+    <footer className="relative bg-semi-color-bg-2 h-auto py-16 px-6 md:px-24 w-full flex flex-col items-center justify-between overflow-hidden">
      <div className="absolute hidden md:block top-[204px] left-[-100px] w-[151px] h-[151px] rounded-full bg-[#FFD166]"></div>
      <div className="absolute md:hidden bottom-[20px] left-[-50px] w-[80px] h-[80px] rounded-full bg-[#FFD166] opacity-60"></div>
@@ -38,38 +38,38 @@ const FooterBar = () => {
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 w-full">
            <div className="text-left">
-              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('关于我们')}</p>
+              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('关于我们')}</p>
              <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('关于项目')}</a>
+                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('关于项目')}</a>
-                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('联系我们')}</a>
+                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('联系我们')}</a>
-                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('功能特性')}</a>
+                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('功能特性')}</a>
              </div>
            </div>
            <div className="text-left">
-              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('文档')}</p>
+              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('文档')}</p>
              <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('快速开始')}</a>
+                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('快速开始')}</a>
-                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('安装指南')}</a>
+                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('安装指南')}</a>
-                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('API 文档')}</a>
+                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('API 文档')}</a>
              </div>
            </div>
            <div className="text-left">
-              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('相关项目')}</p>
+              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('相关项目')}</p>
              <div className="flex flex-col gap-4">
-                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">One API</a>
+                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">One API</a>
-                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">Midjourney-Proxy</a>
+                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">Midjourney-Proxy</a>
-                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">chatnio</a>
+                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">chatnio</a>
-                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">neko-api-key-tool</a>
+                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">neko-api-key-tool</a>
              </div>
            </div>
            <div className="text-left">
-              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('基于New API的项目')}</p>
+              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('基于New API的项目')}</p>
              <div className="flex flex-col gap-4">
-                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">new-api-horizon</a>
+                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">new-api-horizon</a>
-                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">VoAPI</a> */}
+                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">VoAPI</a> */}
              </div>
            </div>
          </div>
@@ -78,15 +78,15 @@ const FooterBar = () => {
      <div className="flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-6">
        <div className="flex flex-wrap items-center gap-2">
-          <Typography.Text className="text-sm !text-[#d9dbe1]">© {currentYear} {systemName}. {t('版权所有')}</Typography.Text>
+          <Typography.Text className="text-sm !text-semi-color-text-1">© {currentYear} {systemName}. {t('版权所有')}</Typography.Text>
        </div>
        {isDemoSiteMode && (
          <div className="text-sm">
-            <span className="!text-[#d9dbe1]">{t('设计与开发由')} </span>
+            <span className="!text-semi-color-text-1">{t('设计与开发由')} </span>
-            <span className="!text-[#01ffc3]">Douyin FE</span>
+            <span className="!text-semi-color-primary">Douyin FE</span>
-            <span className="!text-[#d9dbe1]"> & </span>
+            <span className="!text-semi-color-text-1"> & </span>
-            <a href="https://github.com/QuantumNous" target="_blank" rel="noreferrer" className="!text-[#01ffc3] hover:!text-[#01ffc3]">QuantumNous</a>
+            <a href="https://github.com/QuantumNous" target="_blank" rel="noreferrer" className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors">QuantumNous</a>
          </div>
        )}
      </div>