From 5a474aa9a2afa302e313b8086be0c405023121a7 Mon Sep 17 00:00:00 2001
From: dntzhang <dntzhang@qq.com>
Date: Sun, 11 Feb 2024 09:43:58 +0800
Subject: [PATCH] feat(omi-templates): unified color, organized catalog

---
 .../omi-templates/src/components/appear.tsx   |   1 -
 .../src/components/customize-button.tsx       |   4 +-
 .../src/components/customize.tsx              |   2 +-
 .../src/components/dark-switch.tsx            |   6 +-
 .../omi-templates/src/components/fallback.tsx |   8 +-
 .../omi-templates/src/components/navbar.tsx   |  14 +-
 .../src/components/{ => omiu}/button.tsx      |   0
 .../{ => omiu}/calendar/calendar.ts           |   0
 .../components/{ => omiu}/calendar/index.tsx  |   0
 .../src/components/{ => omiu}/msg.tsx         |   0
 .../src/components/{ => omiu}/select.tsx      |   2 +-
 .../src/components/omiu/table.tsx             |  95 +++++++
 .../omi-templates/src/components/omiu/tag.tsx |   0
 .../src/components/{ => omiu}/utils.ts        |   0
 .../src/components/site-layout.tsx            |  12 +-
 .../omi-templates/src/components/table.tsx    | 259 ------------------
 packages/omi-templates/src/index.css          |   8 +-
 packages/omi-templates/src/pages/chat.tsx     | 102 +++----
 packages/omi-templates/src/pages/home.tsx     |  66 +++--
 packages/omi-templates/src/pages/icons.tsx    |   2 +-
 packages/omi-templates/src/pages/login.tsx    |   6 +-
 packages/omi-templates/src/pages/personal.tsx |   8 +-
 packages/omi-templates/src/pages/product.tsx  |  78 +++---
 .../omi-templates/src/pages/questionnaire.tsx |  18 +-
 .../src/pages/results/browser-not-support.tsx |   4 +-
 .../omi-templates/src/pages/results/fail.tsx  |   6 +-
 .../src/pages/results/forbidden.tsx           |   4 +-
 .../src/pages/results/network-error.tsx       |   4 +-
 .../src/pages/results/not-found.tsx           |   4 +-
 .../src/pages/results/server-error.tsx        |   4 +-
 .../src/pages/results/success.tsx             |   6 +-
 .../src/pages/results/system-maintenance.tsx  |   4 +-
 32 files changed, 280 insertions(+), 447 deletions(-)
 rename packages/omi-templates/src/components/{ => omiu}/button.tsx (100%)
 rename packages/omi-templates/src/components/{ => omiu}/calendar/calendar.ts (100%)
 rename packages/omi-templates/src/components/{ => omiu}/calendar/index.tsx (100%)
 rename packages/omi-templates/src/components/{ => omiu}/msg.tsx (100%)
 rename packages/omi-templates/src/components/{ => omiu}/select.tsx (98%)
 create mode 100644 packages/omi-templates/src/components/omiu/table.tsx
 create mode 100644 packages/omi-templates/src/components/omiu/tag.tsx
 rename packages/omi-templates/src/components/{ => omiu}/utils.ts (100%)
 delete mode 100644 packages/omi-templates/src/components/table.tsx

diff --git a/packages/omi-templates/src/components/appear.tsx b/packages/omi-templates/src/components/appear.tsx
index c2b3bd467c..070ffd0e6d 100644
--- a/packages/omi-templates/src/components/appear.tsx
+++ b/packages/omi-templates/src/components/appear.tsx
@@ -18,7 +18,6 @@ export class Appear extends Component {
         this.classList.add(item)
         this.classList.remove(item)
       })
-      // o-table 和 日历组件的切换时，需要刷新一下
       window.refreshDark()
     }, 10)
   }
diff --git a/packages/omi-templates/src/components/customize-button.tsx b/packages/omi-templates/src/components/customize-button.tsx
index 79cf898b0c..c07e185f1f 100644
--- a/packages/omi-templates/src/components/customize-button.tsx
+++ b/packages/omi-templates/src/components/customize-button.tsx
@@ -2,9 +2,9 @@ import { showCustomize } from './customize.tsx'
 
 export function CustomizeButton() {
   return (
-    <div class="fixed right-0 bottom-0 m-6 bg-gray-300 dark:bg-background dark:text-foreground bg-opacity-40 backdrop-filter h-16 backdrop-blur-md py-2 px-3 rounded-full flex items-center">
+    <div class="fixed right-0 bottom-0 m-6 bg-zinc-300 dark:bg-background dark:text-foreground bg-opacity-40 backdrop-filter h-16 backdrop-blur-md py-2 px-3 rounded-full flex items-center">
       <button
-        class="flex border bg-gray-100 dark:bg-background dark:text-foreground p-2 rounded-full text-gray-600 hover:text-primary"
+        class="flex border bg-zinc-100 dark:bg-background dark:text-foreground p-2 rounded-full text-zinc-600 hover:text-primary"
         onClick={(evt) => {
           evt.stopPropagation()
           showCustomize()
diff --git a/packages/omi-templates/src/components/customize.tsx b/packages/omi-templates/src/components/customize.tsx
index f3618a245e..add536894f 100644
--- a/packages/omi-templates/src/components/customize.tsx
+++ b/packages/omi-templates/src/components/customize.tsx
@@ -83,7 +83,7 @@ class Customize extends Component {
           <div class="flex items-start pt-4 md:pt-0">
             <div class="space-y-1 pr-2">
               <div class="font-semibold leading-none tracking-tight text-lg dark:text-foreground">自定义</div>
-              <div class="text-muted-foreground text-gray-600 dark:text-foreground">为你的模板选择一个颜色和样式。</div>
+              <div class="text-muted-foreground text-zinc-600 dark:text-foreground">为你的模板选择一个颜色和样式。</div>
             </div>
           </div>
           <div class="flex flex-1 flex-col space-y-4 md:space-y-6">
diff --git a/packages/omi-templates/src/components/dark-switch.tsx b/packages/omi-templates/src/components/dark-switch.tsx
index 423bcefa50..475c8b37b8 100644
--- a/packages/omi-templates/src/components/dark-switch.tsx
+++ b/packages/omi-templates/src/components/dark-switch.tsx
@@ -15,11 +15,11 @@ export class DarkSwitch extends Component {
 
   render() {
     return (
-      <div class="w-[60px] h-8 bg-gray-300 dark:bg-zinc-400 rounded-[2px] relative">
+      <div class="w-[60px] h-8 bg-zinc-300 dark:bg-zinc-400 rounded-[2px] relative">
         <div
           class={classNames('absolute z-0  w-[28px] h-[28px] top-[2px] rounded-[2px] transition-all duration-300', {
             'left-[2px] bg-white': !isDark.value,
-            'left-[30px] bg-gray-500': isDark.value,
+            'left-[30px] bg-zinc-500': isDark.value,
           })}
         ></div>
 
@@ -72,7 +72,7 @@ export class DarkSwitch extends Component {
         <div
           class={classNames('absolute transition-all duration-300 w-[30px] h-[30px] right-0 px-1.5 py-[7px]', {
             'text-white': isDark.value,
-            'text-gray-500 cursor-pointer': !isDark.value,
+            'text-zinc-500 cursor-pointer': !isDark.value,
           })}
           onClick={this.onDarkClick}
         >
diff --git a/packages/omi-templates/src/components/fallback.tsx b/packages/omi-templates/src/components/fallback.tsx
index 3a68511ddc..1a3700cb40 100644
--- a/packages/omi-templates/src/components/fallback.tsx
+++ b/packages/omi-templates/src/components/fallback.tsx
@@ -1,5 +1,5 @@
 export const fallback = (
-  <div class="flex items-center justify-center bg-gray-100" style="height:calc(100vh - 349px)">
+  <div class="flex items-center justify-center bg-zinc-100" style="height:calc(100vh - 349px)">
     <div class="p-8  text-center">
       <div class="mb-4 text-primary">
         <svg data-v-452ecc15="" xmlns="http://www.w3.org/2000/svg" width="200" height="140" fill="none">
@@ -30,15 +30,15 @@ export const fallback = (
         </svg>
       </div>
 
-      <h2 class="text-2xl font-bold mb-2 text-gray-700">网络异常</h2>
+      <h2 class="text-2xl font-bold mb-2 text-zinc-700">网络异常</h2>
 
-      <p class="text-gray-600 mb-6">网络异常，请稍后再试</p>
+      <p class="text-zinc-600 mb-6">网络异常，请稍后再试</p>
 
       <div class="flex justify-center space-x-4">
         <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
           重新加载
         </a>
-        <a href="#/" class="py-2 px-4 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
+        <a href="#/" class="py-2 px-4 bg-zinc-200 text-zinc-700 rounded hover:bg-zinc-300">
           返回首页
         </a>
       </div>
diff --git a/packages/omi-templates/src/components/navbar.tsx b/packages/omi-templates/src/components/navbar.tsx
index 30e80889ab..5683544909 100644
--- a/packages/omi-templates/src/components/navbar.tsx
+++ b/packages/omi-templates/src/components/navbar.tsx
@@ -93,7 +93,7 @@ export class Navbar extends Component<Props> {
                 class={classNames(
                   'no-underline block px-4 py-2 hover:text-primary hover:bg-slate-100 dark:hover:bg-zinc-600  rounded-md p-2 dark:text-foreground',
                   {
-                    'text-gray-600 md:text-gray-800': this.state.active !== navbarItemChild.value,
+                    'text-zinc-600 md:text-zinc-800': this.state.active !== navbarItemChild.value,
                     'text-primary md:text-primary': this.state.active === navbarItemChild.value,
                     'dark:bg-zinc-200/20': this.state.active === navbarItemChild.value,
                   },
@@ -102,7 +102,7 @@ export class Navbar extends Component<Props> {
                 href={`${navbarItemChild.href}`}
               >
                 {navbarItemChild.text}
-                <div class="w-3 h-3 inline-block text-gray-600 ml-1">
+                <div class="w-3 h-3 inline-block text-zinc-600 ml-1">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                     <path d="M0 0h24v24H0V0z" fill="none" />
                     <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" />
@@ -119,7 +119,7 @@ export class Navbar extends Component<Props> {
               class={classNames(
                 'no-underline block px-4 py-2 hover:text-primary hover:bg-slate-100 dark:hover:bg-zinc-600 rounded-md  p-2 dark:text-foreground',
                 {
-                  'text-gray-600 md:text-gray-800': this.state.active !== navbarItemChild.value,
+                  'text-zinc-600 md:text-zinc-800': this.state.active !== navbarItemChild.value,
                   'text-primary md:text-primary': this.state.active === navbarItemChild.value,
                   'dark:bg-zinc-200/20': this.state.active === navbarItemChild.value,
                 },
@@ -140,7 +140,7 @@ export class Navbar extends Component<Props> {
             onClick={this.onClick}
             data-collapse-toggle="navbar-multi-level"
             type="button"
-            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-zinc-600"
             aria-controls="navbar-multi-level"
             aria-expanded="false"
           >
@@ -199,7 +199,7 @@ export class Navbar extends Component<Props> {
                   })}
                 >
                   <a
-                    class="block text-gray-800 cursor-pointer hover:text-primary p-2 md:py-1"
+                    class="block text-zinc-800 cursor-pointer hover:text-primary p-2 md:py-1"
                     target={navbarItem.href ? navbarItem.target || '_blank' : '_self'}
                     unsafeHTML={navbarItem.inner ? { html: navbarItem.inner } : null}
                     href={
@@ -221,7 +221,7 @@ export class Navbar extends Component<Props> {
                       {navbarItem.text}
                     </span>
                     {navbarItem.href && (
-                      <div class="w-3 h-3 inline-block text-gray-600 ml-1 dark:text-foreground">
+                      <div class="w-3 h-3 inline-block text-zinc-600 ml-1 dark:text-foreground">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="currentColor"
@@ -251,7 +251,7 @@ export class Navbar extends Component<Props> {
                       </svg>
                     )}
                     {navbarItem.children && (
-                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-gray-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary">
+                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-zinc-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary">
                         {navbarItem.children.map((navbarItemChild: NavbarItem) => {
                           return this.renderNavbarItemChild(navbarItemChild)
                         })}
diff --git a/packages/omi-templates/src/components/button.tsx b/packages/omi-templates/src/components/omiu/button.tsx
similarity index 100%
rename from packages/omi-templates/src/components/button.tsx
rename to packages/omi-templates/src/components/omiu/button.tsx
diff --git a/packages/omi-templates/src/components/calendar/calendar.ts b/packages/omi-templates/src/components/omiu/calendar/calendar.ts
similarity index 100%
rename from packages/omi-templates/src/components/calendar/calendar.ts
rename to packages/omi-templates/src/components/omiu/calendar/calendar.ts
diff --git a/packages/omi-templates/src/components/calendar/index.tsx b/packages/omi-templates/src/components/omiu/calendar/index.tsx
similarity index 100%
rename from packages/omi-templates/src/components/calendar/index.tsx
rename to packages/omi-templates/src/components/omiu/calendar/index.tsx
diff --git a/packages/omi-templates/src/components/msg.tsx b/packages/omi-templates/src/components/omiu/msg.tsx
similarity index 100%
rename from packages/omi-templates/src/components/msg.tsx
rename to packages/omi-templates/src/components/omiu/msg.tsx
diff --git a/packages/omi-templates/src/components/select.tsx b/packages/omi-templates/src/components/omiu/select.tsx
similarity index 98%
rename from packages/omi-templates/src/components/select.tsx
rename to packages/omi-templates/src/components/omiu/select.tsx
index 8c5abb1135..f1affbb15b 100644
--- a/packages/omi-templates/src/components/select.tsx
+++ b/packages/omi-templates/src/components/omiu/select.tsx
@@ -105,7 +105,7 @@ export class Select extends Component<Props> {
             {this.props.options.map((option) => (
               <a
                 href="javascript:"
-                class="block px-4 py-2 text-sm  hover:bg-zinc-100 rounded dark:hover:bg-zinc-400 hover:text-gray-900"
+                class="block px-4 py-2 text-sm  hover:bg-zinc-100 rounded dark:hover:bg-zinc-400 hover:text-zinc-900"
                 role="menuitem"
                 onClick={() => this.onSelectOption(option)}
               >
diff --git a/packages/omi-templates/src/components/omiu/table.tsx b/packages/omi-templates/src/components/omiu/table.tsx
new file mode 100644
index 0000000000..8b9f498577
--- /dev/null
+++ b/packages/omi-templates/src/components/omiu/table.tsx
@@ -0,0 +1,95 @@
+import { Component, tag } from 'omi'
+
+@tag('o-table')
+export class Table extends Component {
+  render() {
+    return (
+      <div class="relative overflow-auto shadow-md sm:rounded-t-lg">
+        <table class="table-fixed w-full text-sm text-left rtl:text-right background text-card-foreground">
+          <thead class="text-xs uppercase">
+            <tr>
+              <th scope="col" class="p-4 w-4">
+                <div class="flex items-center">
+                  <input
+                    id="checkbox-all-search"
+                    type="checkbox"
+                    class="w-4 h-4  border-zinc-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 er-zinc-600"
+                  />
+                  <label for="checkbox-all-search" class="sr-only">
+                    checkbox
+                  </label>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3 w-32">
+                产品名称
+              </th>
+              <th scope="col" class="px-6 py-3  w-24">
+                颜色
+              </th>
+              <th scope="col" class="px-6 py-3  w-24">
+                类型
+              </th>
+              <th scope="col" class="px-6 py-3  w-20">
+                附件
+              </th>
+              <th scope="col" class="px-6 py-3  w-20">
+                有货
+              </th>
+              <th scope="col" class="px-6 py-3 w-24">
+                价格
+              </th>
+              <th scope="col" class="px-6 py-3 w-24">
+                重量
+              </th>
+              <th scope="col" class="px-6 py-3 sticky w-32 background right-0 text-right">
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {Array(5)
+              .fill(0)
+              .map(() => {
+                return (
+                  <tr class="group  border-b  dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-600">
+                    <td class="w-4 p-4">
+                      <div class="flex items-center">
+                        <input
+                          id="checkbox-table-search-1"
+                          type="checkbox"
+                          class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
+                        />
+                        <label for="checkbox-table-search-1" class="sr-only">
+                          checkbox
+                        </label>
+                      </div>
+                    </td>
+                    <th
+                      scope="row"
+                      class="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
+                    >
+                      苹果笔记本
+                    </th>
+                    <td class="px-6 py-4 w-24">银色</td>
+                    <td class="px-6 py-4 w-24">Laptop</td>
+                    <td class="px-6 py-4 w-20">是</td>
+                    <td class="px-6 py-4 w-20">是</td>
+                    <td class="px-6 py-4 w-24">¥12999</td>
+                    <td class="px-6 py-4 w-24">3.0kg</td>
+                    <td class=" items-center px-6 py-4 sticky w-32 right-0 background group-hover:bg-zinc-50 dark:group-hover:bg-zinc-600 text-right">
+                      <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
+                        编辑
+                      </a>
+                      <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
+                        删除
+                      </a>
+                    </td>
+                  </tr>
+                )
+              })}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}
diff --git a/packages/omi-templates/src/components/omiu/tag.tsx b/packages/omi-templates/src/components/omiu/tag.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/omi-templates/src/components/utils.ts b/packages/omi-templates/src/components/omiu/utils.ts
similarity index 100%
rename from packages/omi-templates/src/components/utils.ts
rename to packages/omi-templates/src/components/omiu/utils.ts
diff --git a/packages/omi-templates/src/components/site-layout.tsx b/packages/omi-templates/src/components/site-layout.tsx
index 9c0c5a50d5..26afe588d1 100644
--- a/packages/omi-templates/src/components/site-layout.tsx
+++ b/packages/omi-templates/src/components/site-layout.tsx
@@ -20,7 +20,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
       <header class="bg-white dark:bg-background/10 dark:text-foreground bg-opacity-40 backdrop-filter backdrop-blur-md py-2 top-0 shadow fixed w-full px-4 md:px-0 z-[100000]">
         <div class="container mx-auto flex justify-between items-center">
           <div class="text-xl font-bold">
-            <a class="text-gray-800 dark:text-white" title="TDesign" unsafeHTML={{ html: tdesignLogo }} href="#/"></a>
+            <a class="text-zinc-800 dark:text-white" title="TDesign" unsafeHTML={{ html: tdesignLogo }} href="#/"></a>
           </div>
 
           <div class="flex items-center">
@@ -36,7 +36,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
           <div class="container  mx-auto py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接1</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -50,7 +50,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接2</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -64,7 +64,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接3</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -78,7 +78,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接4</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -99,7 +99,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
       {!props.hideFooter && (
         <footer class="bg-[#e7e7e7] border-t dark:bg-background dark:text-foreground py-6">
           <div class="container mx-auto text-center">
-            <p class="text-gray-600 dark:text-foreground">© 2024 Tencent OMI. All rights reserved.</p>
+            <p class="text-zinc-600 dark:text-foreground">© 2024 Tencent OMI. All rights reserved.</p>
           </div>
         </footer>
       )}
diff --git a/packages/omi-templates/src/components/table.tsx b/packages/omi-templates/src/components/table.tsx
deleted file mode 100644
index 6c2d19f9f8..0000000000
--- a/packages/omi-templates/src/components/table.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { Component, tag } from 'omi'
-
-@tag('o-table')
-export class Table extends Component {
-  render() {
-    return (
-      <div class="relative overflow-auto shadow-md sm:rounded-t-lg">
-        <table class="table-fixed w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-          <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-            <tr>
-              <th scope="col" class="p-4 w-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-all-search"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-all-search" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </th>
-              <th scope="col" class="px-6 py-3 w-32">
-                产品名称
-              </th>
-              <th scope="col" class="px-6 py-3  w-24">
-                颜色
-              </th>
-              <th scope="col" class="px-6 py-3  w-24">
-                类型
-              </th>
-              <th scope="col" class="px-6 py-3  w-20">
-                附件
-              </th>
-              <th scope="col" class="px-6 py-3  w-20">
-                有货
-              </th>
-              <th scope="col" class="px-6 py-3 w-24">
-                价格
-              </th>
-              <th scope="col" class="px-6 py-3 w-24">
-                重量
-              </th>
-              <th scope="col" class="px-6 py-3 sticky w-32 bg-gray-50 dark:bg-gray-700 right-0 text-right">
-                操作
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-            <tr class="group bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-              <td class="w-4 p-4">
-                <div class="flex items-center">
-                  <input
-                    id="checkbox-table-search-1"
-                    type="checkbox"
-                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <label for="checkbox-table-search-1" class="sr-only">
-                    checkbox
-                  </label>
-                </div>
-              </td>
-              <th
-                scope="row"
-                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
-              >
-                苹果笔记本
-              </th>
-              <td class="px-6 py-4 w-24">银色</td>
-              <td class="px-6 py-4 w-24">Laptop</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-20">是</td>
-              <td class="px-6 py-4 w-24">¥12999</td>
-              <td class="px-6 py-4 w-24">3.0kg</td>
-              <td class=" items-center px-6 py-4 sticky w-32 right-0 bg-white  dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-600 text-right">
-                <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                  编辑
-                </a>
-                <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
-                  删除
-                </a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    )
-  }
-}
diff --git a/packages/omi-templates/src/index.css b/packages/omi-templates/src/index.css
index 90da909a25..6e15f6c3d3 100644
--- a/packages/omi-templates/src/index.css
+++ b/packages/omi-templates/src/index.css
@@ -35,14 +35,14 @@ body {
 }
 
 .dark {
-  --background: 0 0% 20%;
+  --background: 0 0% 10%;
   --foreground: 0 0% 80%;
 
-  --card: 0 0% 30%;
+  --card: 0 0% 14%;
   --card-foreground: 0 0% 90%;
 
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
+  --popover: 0 0% 14%;
+  --popover-foreground: 0 0% 90%;
 
   /* --primary: 219 100% 43%; */
   --primary-foreground: 0 0% 85%;
diff --git a/packages/omi-templates/src/pages/chat.tsx b/packages/omi-templates/src/pages/chat.tsx
index 1914895015..0ae585790e 100644
--- a/packages/omi-templates/src/pages/chat.tsx
+++ b/packages/omi-templates/src/pages/chat.tsx
@@ -7,12 +7,12 @@ export function Chat() {
   return (
     <div class="w-full h-[calc(100vh-60px)] dark:brightness-90">
       <div class="flex h-full">
-        <div class="hidden xl:block sm:flex-2 w-64 bg-gray-200">
+        <div class="hidden xl:block sm:flex-2 w-64 bg-zinc-200">
           <div class="user-profile text-center">
             <div class="w-32 h-32 rounded-full m-auto mt-16 border-2 border-white bg-white shadow-lg">
               <img src="https://omi.cdn-go.cn/admin/latest/home/omi.svg" alt="user" class="block" />
             </div>
-            <div class="text-gray-800 mt-8">
+            <div class="text-zinc-800 mt-8">
               Omer Mohamed Ali
               <span class="inline-block align-text-bottom">
                 <svg
@@ -32,7 +32,7 @@ export function Chat() {
 
           <div class="menu mt-8">
             <a
-              class="block py-4 px-12 border-l-4 text-gray-600 hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 text-zinc-600 hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -51,7 +51,7 @@ export function Chat() {
               Home
             </a>
             <a
-              class="block py-4 px-12 border-l-4 border-gray-800 bg-gray-300 text-black hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 border-zinc-800 bg-zinc-300 text-black hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -70,7 +70,7 @@ export function Chat() {
               Chat
             </a>
             <a
-              class="block py-4 px-12 border-l-4 text-gray-600 hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 text-zinc-600 hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -89,7 +89,7 @@ export function Chat() {
               Calendar
             </a>
             <a
-              class="block py-4 px-12 border-l-4 text-gray-600 hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 text-zinc-600 hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -108,7 +108,7 @@ export function Chat() {
               Files
             </a>
             <a
-              class="block py-4 px-12 border-l-4 text-gray-600 hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 text-zinc-600 hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -127,7 +127,7 @@ export function Chat() {
               Jobs
             </a>
             <a
-              class="block py-4 px-12 border-l-4 text-gray-600 hover:bg-gray-300 hover:text-black"
+              class="block py-4 px-12 border-l-4 text-zinc-600 hover:bg-zinc-300 hover:text-black"
               href="javascript:return false;"
             >
               <span class="inline-block align-text-bottom mr-2">
@@ -148,12 +148,12 @@ export function Chat() {
             </a>
           </div>
         </div>
-        <div class="flex-1 bg-gray-100 w-full h-full">
+        <div class="flex-1 bg-zinc-100 w-full h-full">
           <div class="main-body container m-auto w-11/12 h-full flex flex-col">
             <div class="py-4 flex-2 flex flex-row">
               <div class="flex-1">
-                <span class="xl:hidden inline-block text-gray-700 hover:text-gray-900 align-bottom">
-                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-gray-400">
+                <span class="xl:hidden inline-block text-zinc-700 hover:text-zinc-900 align-bottom">
+                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-zinc-400">
                     <svg
                       class="w-4 h-4"
                       fill="none"
@@ -167,8 +167,8 @@ export function Chat() {
                     </svg>
                   </span>
                 </span>
-                <span class="lg:hidden inline-block ml-8 text-gray-700 hover:text-gray-900 align-bottom">
-                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-gray-400">
+                <span class="lg:hidden inline-block ml-8 text-zinc-700 hover:text-zinc-900 align-bottom">
+                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-zinc-400">
                     <svg
                       class="h-4 w-4"
                       fill="none"
@@ -184,7 +184,7 @@ export function Chat() {
                 </span>
               </div>
               <div class="flex-1 text-right">
-                <span class="inline-block text-gray-700">
+                <span class="inline-block text-zinc-700">
                   Status:{' '}
                   <span class="inline-block align-text-bottom w-4 h-4 bg-green-400 rounded-full border-2 border-white"></span>{' '}
                   <b>Online</b>
@@ -203,8 +203,8 @@ export function Chat() {
                   </span>
                 </span>
 
-                <span class="inline-block ml-8 text-gray-700 hover:text-gray-900 align-bottom">
-                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-gray-400">
+                <span class="inline-block ml-8 text-zinc-700 hover:text-zinc-900 align-bottom">
+                  <span class="block h-6 w-6 p-1 rounded-full hover:bg-zinc-400">
                     <svg
                       fill="none"
                       stroke="currentColor"
@@ -223,7 +223,7 @@ export function Chat() {
 
             <div class="main flex-1 flex flex-col">
               <div class="hidden lg:block heading flex-2">
-                <h1 class="text-3xl text-gray-700 mb-4">Chat</h1>
+                <h1 class="text-3xl text-zinc-700 mb-4">Chat</h1>
               </div>
 
               <div class="flex-1 flex h-full">
@@ -231,7 +231,7 @@ export function Chat() {
                   <div class="search flex-2 pb-6 px-2">
                     <input
                       type="text"
-                      class="outline-none py-2 block w-full bg-transparent border-b-2 border-gray-200"
+                      class="outline-none py-2 block w-full bg-transparent border-b-2 border-zinc-200"
                       placeholder="Search"
                     />
                   </div>
@@ -249,15 +249,15 @@ export function Chat() {
                       </div>
                       <div class="flex-1 px-2">
                         <div class="truncate w-32">
-                          <span class="text-gray-800">Ryann Remo</span>
+                          <span class="text-zinc-800">Ryann Remo</span>
                         </div>
                         <div>
-                          <small class="text-gray-600">Yea, Sure!</small>
+                          <small class="text-zinc-600">Yea, Sure!</small>
                         </div>
                       </div>
                       <div class="flex-2 text-right">
                         <div>
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                         <div>
                           <small class="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
@@ -274,20 +274,20 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
                         <div class="truncate w-32">
-                          <span class="text-gray-800">Karp Bonolo</span>
+                          <span class="text-zinc-800">Karp Bonolo</span>
                         </div>
                         <div>
-                          <small class="text-gray-600">Yea, Sure!</small>
+                          <small class="text-zinc-600">Yea, Sure!</small>
                         </div>
                       </div>
                       <div class="flex-2 text-right">
                         <div>
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                         <div>
                           <small class="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
@@ -304,20 +304,20 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
                         <div class="truncate w-32">
-                          <span class="text-gray-800">Mercedes Yemelyan</span>
+                          <span class="text-zinc-800">Mercedes Yemelyan</span>
                         </div>
                         <div>
-                          <small class="text-gray-600">Yea, Sure!</small>
+                          <small class="text-zinc-600">Yea, Sure!</small>
                         </div>
                       </div>
                       <div class="flex-2 text-right">
                         <div>
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -329,20 +329,20 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
                         <div class="truncate w-32">
-                          <span class="text-gray-800">Cadi Kajetán</span>
+                          <span class="text-zinc-800">Cadi Kajetán</span>
                         </div>
                         <div>
-                          <small class="text-gray-600">Yea, Sure!</small>
+                          <small class="text-zinc-600">Yea, Sure!</small>
                         </div>
                       </div>
                       <div class="flex-2 text-right">
                         <div>
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -354,20 +354,20 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
                         <div class="truncate w-32">
-                          <span class="text-gray-800">Rina Samuel</span>
+                          <span class="text-zinc-800">Rina Samuel</span>
                         </div>
                         <div>
-                          <small class="text-gray-600">Yea, Sure!</small>
+                          <small class="text-zinc-600">Yea, Sure!</small>
                         </div>
                       </div>
                       <div class="flex-2 text-right">
                         <div>
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -375,7 +375,7 @@ export function Chat() {
                 </div>
                 <div class="chat-area flex-1 flex flex-col">
                   <div class="flex-3">
-                    <h2 class="text-xl py-1 mb-8 border-b-2 border-gray-200">
+                    <h2 class="text-xl py-1 mb-8 border-b-2 border-zinc-200">
                       Chatting with <b>Mercedes Yemelyan</b>
                     </h2>
                   </div>
@@ -388,17 +388,17 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
-                        <div class="inline-block bg-gray-300 rounded-full p-2 px-6 text-gray-700">
+                        <div class="inline-block bg-zinc-300 rounded-full p-2 px-6 text-zinc-700">
                           <span>
                             Hey there. We would like to invite you over to our office for a visit. How about it?
                           </span>
                         </div>
                         <div class="pl-4">
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -410,15 +410,15 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
-                        <div class="inline-block bg-gray-300 rounded-full p-2 px-6 text-gray-700">
+                        <div class="inline-block bg-zinc-300 rounded-full p-2 px-6 text-zinc-700">
                           <span>All travel expenses are covered by us of course :D</span>
                         </div>
                         <div class="pl-4">
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -428,7 +428,7 @@ export function Chat() {
                           <span>It's like a dream come true</span>
                         </div>
                         <div class="pr-4">
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -438,7 +438,7 @@ export function Chat() {
                           <span>I accept. Thank you very much.</span>
                         </div>
                         <div class="pr-4">
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -450,15 +450,15 @@ export function Chat() {
                             src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"
                             alt="chat-user"
                           />
-                          <span class="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
+                          <span class="absolute w-4 h-4 bg-zinc-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
                         </div>
                       </div>
                       <div class="flex-1 px-2">
-                        <div class="inline-block bg-gray-300 rounded-full p-2 px-6 text-gray-700">
+                        <div class="inline-block bg-zinc-300 rounded-full p-2 px-6 text-zinc-700">
                           <span>You are welome. We will stay in touch.</span>
                         </div>
                         <div class="pl-4">
-                          <small class="text-gray-500">15 April</small>
+                          <small class="text-zinc-500">15 April</small>
                         </div>
                       </div>
                     </div>
@@ -466,7 +466,7 @@ export function Chat() {
                   <div class="flex-2 pt-4 pb-10">
                     <div class="write bg-white shadow flex rounded-lg">
                       <div class="flex-3 flex content-center items-center text-center p-4 pr-0">
-                        <span class="block text-center text-gray-400 hover:text-gray-800">
+                        <span class="block text-center text-zinc-400 hover:text-zinc-800">
                           <svg
                             fill="none"
                             stroke-linecap="round"
@@ -491,7 +491,7 @@ export function Chat() {
                       </div>
                       <div class="flex-2 w-32 p-2 flex content-center items-center">
                         <div class="flex-1 text-center">
-                          <span class="text-gray-400 hover:text-gray-800">
+                          <span class="text-zinc-400 hover:text-zinc-800">
                             <span class="inline-block align-text-bottom">
                               <svg
                                 fill="none"
diff --git a/packages/omi-templates/src/pages/home.tsx b/packages/omi-templates/src/pages/home.tsx
index 3019a98e54..e550b5dcbf 100644
--- a/packages/omi-templates/src/pages/home.tsx
+++ b/packages/omi-templates/src/pages/home.tsx
@@ -1,5 +1,5 @@
 import { isDark } from '../store.ts'
-import '../components/button'
+import '../components/omiu/button.tsx'
 
 export function Home() {
   return (
@@ -20,7 +20,7 @@ export function Home() {
           >
             OMI Tailwind Templates
           </h1>
-          <p class="text-gray-600 mb-8 text-2xl dark:text-foreground">
+          <p class="text-zinc-600 mb-8 text-2xl dark:text-foreground">
             100+ 免费模板，对外站点、对内管理系统，开箱即用，自由定制，开源免费
           </p>
           <div class="flex space-x-4">
@@ -44,41 +44,41 @@ export function Home() {
 
       <div class="container mx-auto -mt-24">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
-          <div class="bg-card text-card-foreground rounded-lg p-4 shadow">
-            <div class="rounded-full bg-gray-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
+          <div class="dark:border bg-card text-card-foreground rounded-lg p-4 shadow">
+            <div class="rounded-full bg-zinc-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
               🔪
             </div>
             <h2 class="text-2xl font-bold mb-2">刀锋锐利</h2>
-            <p class="text-gray-600 dark:text-card-foreground">
+            <p class="text-zinc-600 dark:text-card-foreground">
               Tailwind CSS为基础的响应式布局站点和管理系统，直接复制粘贴，到处都能用
             </p>
           </div>
-          <div class="bg-card text-card-foreground rounded-lg p-4 shadow">
-            <div class="rounded-full bg-gray-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
+          <div class="dark:border bg-card text-card-foreground rounded-lg p-4 shadow">
+            <div class="rounded-full bg-zinc-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
               🎁
             </div>
             <h2 class="text-2xl font-bold mb-2">开箱即用</h2>
-            <p class="text-gray-600 dark:text-card-foreground">
+            <p class="text-zinc-600 dark:text-card-foreground">
               100+的模板，直接修修改改，打造成您自己的站点，也可以只配置 JSON，不需要任何前端知识
             </p>
           </div>
 
-          <div class="bg-card text-card-foreground rounded-lg p-4 shadow">
-            <div class="rounded-full bg-gray-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
+          <div class="dark:border bg-card text-card-foreground rounded-lg p-4 shadow">
+            <div class="rounded-full bg-zinc-200 h-20 w-20 mx-auto mb-4 flex items-center justify-center text-5xl">
               ⚙️
             </div>
             <h2 class="text-2xl font-bold mb-2">自由定制</h2>
-            <p class="text-gray-600 dark:text-card-foreground">
+            <p class="text-zinc-600 dark:text-card-foreground">
               颜色、圆角、白天黑夜模式、多语言切换，自由设定，所有模板都是可扩展的 JSON
             </p>
           </div>
         </div>
       </div>
 
-      <section class="container mx-auto flex items-center mt-12  px-4 md:px-10 rounded-xl shadow-lg bg-background text-foreground border">
+      <section class="container mx-auto flex items-center mt-12  px-4 md:px-10 rounded-xl shadow-lg bg-card text-card-foreground dark:border">
         <div class="w-1/2 p-4">
           <h1 class="text-4xl font-bold mb-4">标题</h1>
-          <p class="text-gray-600 mb-8 dark:text-foreground">
+          <p class="text-zinc-600 mb-8 dark:text-foreground">
             这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。
           </p>
           <div class="flex space-x-4">
@@ -88,18 +88,16 @@ export function Home() {
         </div>
         <div class="w-1/2">
           <img
-            src={
-              isDark.value
-                ? 'https://tdesign.woa.com/assets/rope-dark.e3ba9319.png'
-                : 'https://static.tdesign.tencent.com/assets/rope.5e013bf8.png'
-            }
+            src={`https://tdesign.gtimg.com/tdesign-starter/docs/starter-docs-industry-${
+              isDark.value ? 'dark' : 'light'
+            }.png`}
             alt="示例图片"
             class="w-full rounded-3xl overflow-hidden p-4"
           />
         </div>
       </section>
 
-      <section class="container mx-auto flex items-center mt-12  px-4 md:px-10 rounded-xl shadow-lg bg-background text-foreground border">
+      <section class="container mx-auto flex items-center mt-12  px-4 md:px-10 rounded-xl shadow-lg bg-card text-card-foreground dark:border">
         <div class="w-1/2">
           <img
             src={`https://tdesign.gtimg.com/tdesign-starter/docs/starter-docs-industry-${
@@ -111,44 +109,44 @@ export function Home() {
         </div>
         <div class="w-1/2 p-4">
           <h1 class="text-4xl font-bold mb-4">标题</h1>
-          <p class="text-gray-600 mb-8 dark:text-foreground">
+          <p class="text-zinc-600 mb-8 dark:text-foreground">
             这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。这里是描述内容。
           </p>
         </div>
       </section>
 
       <section class="container mx-auto my-12 grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="p-6 shadow rounded bg-card text-card-foreground">
+        <div class="p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片1</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片1的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片1的描述内容。</p>
         </div>
-        <div class=" p-6 shadow rounded bg-card text-card-foreground">
+        <div class=" p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片2</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片2的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片2的描述内容。</p>
         </div>
-        <div class=" p-6 shadow rounded bg-card text-card-foreground">
+        <div class=" p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片3</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片3的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片3的描述内容。</p>
         </div>
-        <div class=" p-6 shadow rounded bg-card text-card-foreground">
+        <div class=" p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片1</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片1的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片1的描述内容。</p>
         </div>
-        <div class=" p-6 shadow rounded bg-card text-card-foreground">
+        <div class=" p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片2</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片2的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片2的描述内容。</p>
         </div>
-        <div class=" p-6 shadow rounded bg-card text-card-foreground">
+        <div class=" p-6 shadow rounded bg-card text-card-foreground dark:border">
           <h2 class="text-2xl font-bold mb-4">卡片3</h2>
-          <p class="text-gray-600 dark:text-card-foreground">这里是卡片3的描述内容。</p>
+          <p class="text-zinc-600 dark:text-card-foreground">这里是卡片3的描述内容。</p>
         </div>
       </section>
 
       <section class="p-8 bg-background text-foreground mx-auto mt-12 h-[500px] text-center w-full bg-[url('https://www.apple.com/v/home/bi/images/heroes/iphone-15/hero_iphone15_announce__uuemlcwczn6u_mediumtall_2x.jpg')] bg-cover bg-center relative">
         <div class="absolute inset-0 dark:bg-black opacity-50"></div>
         <div class="relative z-10">
-          <h1 class="text-4xl font-bold mb-4  dark:text-gray-200">标题</h1>
-          <p class="text-gray-600 mb-8 dark:text-foreground">这里是描述内容。</p>
+          <h1 class="text-4xl font-bold mb-4  dark:text-zinc-200">标题</h1>
+          <p class="text-zinc-600 mb-8 dark:text-foreground">这里是描述内容。</p>
           <div class="flex justify-center space-x-4">
             <o-button>按钮1</o-button>
             <o-button variant="outline">按钮2</o-button>
diff --git a/packages/omi-templates/src/pages/icons.tsx b/packages/omi-templates/src/pages/icons.tsx
index 6a47407504..0d1e46c6ad 100644
--- a/packages/omi-templates/src/pages/icons.tsx
+++ b/packages/omi-templates/src/pages/icons.tsx
@@ -1,5 +1,5 @@
 import * as copyToClipboard from 'copy-to-clipboard'
-import { showMsg } from '../components/msg'
+import { showMsg } from '../components/omiu/msg'
 
 // @ts-ignore
 const copy = copyToClipboard.default || copyToClipboard
diff --git a/packages/omi-templates/src/pages/login.tsx b/packages/omi-templates/src/pages/login.tsx
index d60dd9b10f..8f29e7017b 100644
--- a/packages/omi-templates/src/pages/login.tsx
+++ b/packages/omi-templates/src/pages/login.tsx
@@ -1,5 +1,5 @@
 import { isDark } from '../store.ts'
-import '../components/button'
+import '../components/omiu/button.tsx'
 
 export function Login() {
   return (
@@ -27,7 +27,7 @@ export function Login() {
                 type="text"
                 id="username"
                 placeholder="请输入账号：admin"
-                class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-primary"
+                class="w-full px-4 py-2 border border-zinc-300 rounded focus:outline-none focus:border-primary"
               />
             </div>
             <div class="mb-4">
@@ -38,7 +38,7 @@ export function Login() {
                 type="password"
                 id="password"
                 placeholder="请输入登录密码：admin"
-                class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:border-primary"
+                class="w-full px-4 py-2 border border-zinc-300 rounded focus:outline-none focus:border-primary"
               />
             </div>
             <div class="flex items-center justify-between mb-6">
diff --git a/packages/omi-templates/src/pages/personal.tsx b/packages/omi-templates/src/pages/personal.tsx
index d63af2b6a3..8d1a7a4c05 100644
--- a/packages/omi-templates/src/pages/personal.tsx
+++ b/packages/omi-templates/src/pages/personal.tsx
@@ -1,4 +1,4 @@
-import '../components/table'
+import '../components/omiu/table'
 
 export function Personal() {
   return (
@@ -41,20 +41,20 @@ export function Personal() {
                 <nav class="-mb-px flex gap-3" aria-label="Tabs">
                   <a
                     href="javascript:void(0)"
-                    class="text-gray-700 dark:text-white border-gray-300  py-4 px-1 text-center border-b-2 font-medium text-sm"
+                    class="text-zinc-700 dark:text-white border-zinc-300  py-4 px-1 text-center border-b-2 font-medium text-sm"
                     aria-current="page"
                   >
                     我的收藏
                   </a>
                   <a
                     href="javascript:void(0)"
-                    class="border-transparent text-gray-500 hover:text-foreground hover:border-gray-300 py-4 px-1 text-center border-b-2 font-medium text-sm"
+                    class="border-transparent text-zinc-500 hover:text-foreground hover:border-zinc-300 py-4 px-1 text-center border-b-2 font-medium text-sm"
                   >
                     我点的赞
                   </a>
                   <a
                     href="javascript:void(0)"
-                    class="border-transparent text-gray-500 hover:text-foreground hover:border-gray-300 py-4 px-1 text-center border-b-2 font-medium text-sm"
+                    class="border-transparent text-zinc-500 hover:text-foreground hover:border-zinc-300 py-4 px-1 text-center border-b-2 font-medium text-sm"
                   >
                     给我点赞
                   </a>
diff --git a/packages/omi-templates/src/pages/product.tsx b/packages/omi-templates/src/pages/product.tsx
index 3a42bc5ca3..f403b2ab14 100644
--- a/packages/omi-templates/src/pages/product.tsx
+++ b/packages/omi-templates/src/pages/product.tsx
@@ -1,5 +1,5 @@
-import '../components/select'
-import '../components/button'
+import '../components/omiu/select'
+import '../components/omiu/button'
 
 export function Product(props: { id: string }) {
   return (
@@ -11,7 +11,7 @@ export function Product(props: { id: string }) {
             class="h-[450px] object-cover w-full rounded-lg shadow-md"
             alt="Product Image"
           />
-          <div class="relative text-gray-400 overflow-x-scroll whitespace-nowrap grid grid-cols-7 gap-2 mt-4">
+          <div class="relative text-zinc-400 overflow-x-scroll whitespace-nowrap grid grid-cols-7 gap-2 mt-4">
             <svg
               class="mt-1 w-16 h-16 hover:text-primary cursor-pointer"
               xmlns="http://www.w3.org/2000/svg"
@@ -61,50 +61,50 @@ export function Product(props: { id: string }) {
         <div class="md:w-[550px] w-full mt-4 md:mt-0">
           <h1 class="text-2xl font-bold">产品名称 - {props.id}</h1>
           <p class="text-md text-black mt-2 flex items-center">
-            <span class="text-gray-500 w-32">价格:</span> <span class="text-2xl dark:text-foreground">$99.99</span>
+            <span class="text-zinc-500 w-32">价格:</span> <span class="text-2xl dark:text-foreground">$99.99</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">运送至:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">运送至:</span>
             <span class="text-black dark:text-foreground">南山大道粤海街道103号1栋2单元9楼</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">重量:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">重量:</span>
             <span class="text-black dark:text-foreground">1kg</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">描述:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">描述:</span>
             <span class="text-black flex-1 dark:text-foreground">这是一个示例产品描述，提供有关产品的更多信息。</span>
           </p>
 
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">材料:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">材料:</span>
             <span class="text-black dark:text-foreground">优质原料，天然添加剂</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">保质期:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">保质期:</span>
             <span class="text-black dark:text-foreground">12个月</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">包装:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">包装:</span>
             <span class="text-black dark:text-foreground">精美包装，适合送礼</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">使用方法:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">使用方法:</span>
             <span class="text-black dark:text-foreground">根据个人口味，适量食用</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">特点:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">特点:</span>
             <span class="text-black dark:text-foreground">口感丰富，营养丰富，适合各年龄层</span>
           </p>
-          <p class="text-md text-gray-500 mt-2 flex items-center">
-            <span class="text-gray-500 w-32">评价:</span>
+          <p class="text-md text-zinc-500 mt-2 flex items-center">
+            <span class="text-zinc-500 w-32">评价:</span>
             <span class="text-black dark:text-foreground">
               <span class="text-yellow-400">⭐⭐⭐⭐⭐</span>
               <span class="text-md text-black ml-2 dark:text-foreground">4.8 (120条评价)</span>
             </span>
           </p>
           <div class="mt-4 flex items-center">
-            <label for="flavor" class="text-gray-500 w-32">
+            <label for="flavor" class="text-zinc-500 w-32">
               选择口味:
             </label>
 
@@ -134,10 +134,10 @@ export function Product(props: { id: string }) {
                 type="button"
                 id="decrement-button"
                 data-input-counter-decrement="quantity-input"
-                class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                class="bg-zinc-100 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:border-zinc-600 hover:bg-zinc-200 border border-zinc-300 rounded-s-lg p-3 h-10 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:ring-2 focus:outline-none"
               >
                 <svg
-                  class="w-3 h-3 text-gray-900 dark:text-white"
+                  class="w-3 h-3 text-zinc-900 dark:text-white"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
@@ -157,17 +157,17 @@ export function Product(props: { id: string }) {
                 id="quantity-input"
                 data-input-counter
                 aria-describedby="helper-text-explanation"
-                class="bg-gray-50 border-x-0 border-gray-300 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 border dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                class="bg-zinc-50 border-x-0 border-zinc-300 h-10 text-center text-zinc-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 border dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                 placeholder="999"
               />
               <button
                 type="button"
                 id="increment-button"
                 data-input-counter-increment="quantity-input"
-                class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                class="bg-zinc-100 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:border-zinc-600 hover:bg-zinc-200 border border-zinc-300 rounded-e-lg p-3 h-10 focus:ring-zinc-100 dark:focus:ring-zinc-700 focus:ring-2 focus:outline-none"
               >
                 <svg
-                  class="w-3 h-3 text-gray-900 dark:text-white"
+                  class="w-3 h-3 text-zinc-900 dark:text-white"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
@@ -192,7 +192,7 @@ export function Product(props: { id: string }) {
         <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mb-10 w-full mx-auto px-4 py-10 md:w-[1080px]">
           <div>
             <div class="flex items-center">
-              <div class="w-16 h-16 text-gray-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
+              <div class="w-16 h-16 text-zinc-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="100%"
@@ -214,7 +214,7 @@ export function Product(props: { id: string }) {
               </div>
               <div class="flex-1">
                 <h2 class="text-xl font-bold">超强续航能力</h2>
-                <p class="text-gray-600 dark:text-foreground">
+                <p class="text-zinc-600 dark:text-foreground">
                   这款手机拥有出色的电池寿命，无论是长时间的工作还是娱乐，都能满足你的需求。它的超强续航能力让你无需担心电量问题，让你的生活更加便捷。
                 </p>
               </div>
@@ -223,7 +223,7 @@ export function Product(props: { id: string }) {
 
           <div>
             <div class="flex items-center">
-              <div class="w-16 h-16 text-gray-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
+              <div class="w-16 h-16 text-zinc-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="100%"
@@ -246,7 +246,7 @@ export function Product(props: { id: string }) {
               </div>
               <div class="flex-1">
                 <h2 class="text-xl font-bold">卓越的摄像头性能</h2>
-                <p class="text-gray-600 dark:text-foreground">
+                <p class="text-zinc-600 dark:text-foreground">
                   这款手机配备了先进的摄像头系统，无论是拍摄日常照片还是专业级别的摄影作品，都能轻松应对。它的卓越摄像头性能让你的每一张照片都充满生活色彩。
                 </p>
               </div>
@@ -254,7 +254,7 @@ export function Product(props: { id: string }) {
           </div>
           <div>
             <div class="flex items-center">
-              <div class="w-16 h-16 text-gray-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
+              <div class="w-16 h-16 text-zinc-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="100%"
@@ -275,7 +275,7 @@ export function Product(props: { id: string }) {
               </div>
               <div class="flex-1">
                 <h2 class="text-xl font-bold">流畅的操作体验</h2>
-                <p class="text-gray-600 dark:text-foreground">
+                <p class="text-zinc-600 dark:text-foreground">
                   这款手机的处理器强大，运行流畅，无论是打开应用、浏览网页还是玩游戏，都能提供流畅的操作体验。它的高效性能让你的生活更加顺畅。
                 </p>
               </div>
@@ -283,7 +283,7 @@ export function Product(props: { id: string }) {
           </div>
           <div>
             <div class="flex items-center">
-              <div class="w-16 h-16 text-gray-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
+              <div class="w-16 h-16 text-zinc-700 rounded-md overflow-hidden mr-4 dark:text-foreground">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="100%"
@@ -302,7 +302,7 @@ export function Product(props: { id: string }) {
               </div>
               <div class="flex-1">
                 <h2 class="text-xl font-bold">优雅的设计风格</h2>
-                <p class="text-gray-600 dark:text-foreground">
+                <p class="text-zinc-600 dark:text-foreground">
                   这款手机的设计简洁而优雅，无论是手感还是视觉效果，都给人留下深刻的印象。它的优雅设计风格让你在众多手机中脱颖而出，展现你的独特品味。
                 </p>
               </div>
@@ -319,7 +319,7 @@ export function Product(props: { id: string }) {
                 style="background-image: url('https://tdesign.gtimg.com/site/images/banner-thumb.jpg'); background-size: cover; background-position: center;"
               ></div>
               <h2 class="text-xl font-bold mt-12">名称 3</h2>
-              <p class="text-gray-600 dark:text-foreground">描述 3</p>
+              <p class="text-zinc-600 dark:text-foreground">描述 3</p>
             </div>
           </div>
 
@@ -330,7 +330,7 @@ export function Product(props: { id: string }) {
                 style="background-image: url('https://tdesign.gtimg.com/site/images/banner-thumb.jpg'); background-size: cover; background-position: center;"
               ></div>
               <h2 class="text-xl font-bold mt-12">名称 3</h2>
-              <p class="text-gray-600 dark:text-foreground">描述 3</p>
+              <p class="text-zinc-600 dark:text-foreground">描述 3</p>
             </div>
           </div>
 
@@ -341,7 +341,7 @@ export function Product(props: { id: string }) {
                 style="background-image: url('https://tdesign.gtimg.com/site/images/banner-thumb.jpg'); background-size: cover; background-position: center;"
               ></div>
               <h2 class="text-xl font-bold mt-12">名称 3</h2>
-              <p class="text-gray-600 dark:text-foreground">描述 3</p>
+              <p class="text-zinc-600 dark:text-foreground">描述 3</p>
             </div>
           </div>
         </div>
diff --git a/packages/omi-templates/src/pages/questionnaire.tsx b/packages/omi-templates/src/pages/questionnaire.tsx
index 0abc625cf3..b2001949e3 100644
--- a/packages/omi-templates/src/pages/questionnaire.tsx
+++ b/packages/omi-templates/src/pages/questionnaire.tsx
@@ -1,5 +1,5 @@
-import '../components/calendar/index'
-import '../components/button'
+import '../components/omiu/calendar/index'
+import '../components/omiu/button'
 
 export function Questionnaire() {
   return (
@@ -8,12 +8,12 @@ export function Questionnaire() {
       <form action="#" method="post">
         <div class="bg-white p-6 rounded-xl shadow dark:brightness-90">
           <div class="mb-6">
-            <label class="block text-gray-700 mb-2">问题 1：您的年龄范围是？</label>
+            <label class="block text-zinc-700 mb-2">问题 1：您的年龄范围是？</label>
 
             <select
               id="flavor"
               style="background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3e%3cpolyline points=\'6 9 12 15 18 9\'%3e%3c/polyline%3e%3c/svg%3e'); background-size: 1em;  background-position: right 0.5rem center;"
-              class="mt-1 block w-full px-2 py-1 rounded-md shadow-sm bg-white border border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary focus:ring-opacity-50 bg-no-repeat appearance-none "
+              class="mt-1 block w-full px-2 py-1 rounded-md shadow-sm bg-white border border-zinc-300 focus:border-primary focus:ring-1 focus:ring-primary focus:ring-opacity-50 bg-no-repeat appearance-none "
             >
               <option>18-24</option>
               <option>25-34</option>
@@ -24,7 +24,7 @@ export function Questionnaire() {
             </select>
           </div>
           <div class="mb-6">
-            <label class="block text-gray-700 mb-2">问题 2：您的性别是？</label>
+            <label class="block text-zinc-700 mb-2">问题 2：您的性别是？</label>
             <div>
               <input type="radio" name="gender" id="male" class="mr-2" />
               <label for="male">男</label>
@@ -35,13 +35,13 @@ export function Questionnaire() {
             </div>
           </div>
           <div class="mb-6">
-            <label class="block text-gray-700 mb-2">问题 4：您的出生日期？</label>
+            <label class="block text-zinc-700 mb-2">问题 3：您的出生日期？</label>
             <div>
               <o-calendar value="2023-12-26" locale="zh"></o-calendar>
             </div>
           </div>
           <div class="mb-6">
-            <label class="block text-gray-700 mb-2">问题 4：您最喜欢的颜色是？</label>
+            <label class="block text-zinc-700 mb-2">问题 4：您最喜欢的颜色是？</label>
             <div>
               <input type="checkbox" name="color" id="red" class="mr-2" />
               <label for="red">红色</label>
@@ -56,8 +56,8 @@ export function Questionnaire() {
             </div>
           </div>
           <div class="mb-6">
-            <label class="block text-gray-700 mb-2">问题 5：您对我们的产品有什么建议？</label>
-            <textarea class="w-full rounded-md border py-2 px-3 text-gray-700 h-24"></textarea>
+            <label class="block text-zinc-700 mb-2">问题 5：您对我们的产品有什么建议？</label>
+            <textarea class="w-full rounded-md border py-2 px-3 text-zinc-700 h-24"></textarea>
           </div>
           <div class="text-center">
             <o-button type="submit" cls="px-14">
diff --git a/packages/omi-templates/src/pages/results/browser-not-support.tsx b/packages/omi-templates/src/pages/results/browser-not-support.tsx
index 3e797698e8..bd5bcd54d5 100644
--- a/packages/omi-templates/src/pages/results/browser-not-support.tsx
+++ b/packages/omi-templates/src/pages/results/browser-not-support.tsx
@@ -50,9 +50,9 @@ export function BrowserNotSupport() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">浏览器版本低</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">浏览器版本低</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">抱歉，您正在使用的浏览器版本过低，无法打开当前网页。</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">抱歉，您正在使用的浏览器版本过低，无法打开当前网页。</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
diff --git a/packages/omi-templates/src/pages/results/fail.tsx b/packages/omi-templates/src/pages/results/fail.tsx
index c0881c79d0..43dbff4d7b 100644
--- a/packages/omi-templates/src/pages/results/fail.tsx
+++ b/packages/omi-templates/src/pages/results/fail.tsx
@@ -2,7 +2,7 @@ export function Fail() {
   return (
     <div class="flex items-center justify-center" style="height:calc(100vh - 58px)">
       <div class="p-8  text-center">
-        <div class="mb-4 text-gray-600 dark:text-foreground">
+        <div class="mb-4 text-zinc-600 dark:text-foreground">
           <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="w-16 h-16 mx-auto">
             <path fill="currentColor" d="M8.5 4v5.5h-1V4h1zM8.6 10.5H7.4v1.2h1.2v-1.2z" fill-opacity="0.9"></path>
             <path
@@ -13,9 +13,9 @@ export function Fail() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">创建失败</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">创建失败</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">
+        <p class="text-zinc-600 mb-6 dark:text-foreground">
           抱歉，您的项目创建失败，企业微信联系检查创建者权限，或返回修改。
         </p>
 
diff --git a/packages/omi-templates/src/pages/results/forbidden.tsx b/packages/omi-templates/src/pages/results/forbidden.tsx
index ec2aa0824f..e921a2f85f 100644
--- a/packages/omi-templates/src/pages/results/forbidden.tsx
+++ b/packages/omi-templates/src/pages/results/forbidden.tsx
@@ -36,9 +36,9 @@ export function Forbidden() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">项目已创建成功</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">项目已创建成功</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">可以联系负责人分发应用</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">可以联系负责人分发应用</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
diff --git a/packages/omi-templates/src/pages/results/network-error.tsx b/packages/omi-templates/src/pages/results/network-error.tsx
index 454fc1ff1c..43e76f1a5b 100644
--- a/packages/omi-templates/src/pages/results/network-error.tsx
+++ b/packages/omi-templates/src/pages/results/network-error.tsx
@@ -31,9 +31,9 @@ export function NetworkError() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">网络异常</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">网络异常</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">网络异常，请稍后再试</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">网络异常，请稍后再试</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
diff --git a/packages/omi-templates/src/pages/results/not-found.tsx b/packages/omi-templates/src/pages/results/not-found.tsx
index 828daf9935..c8cca3b595 100644
--- a/packages/omi-templates/src/pages/results/not-found.tsx
+++ b/packages/omi-templates/src/pages/results/not-found.tsx
@@ -44,9 +44,9 @@ export function NotFound() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">404 Not Found</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">404 Not Found</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">抱歉，您访问的页面不存在</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">抱歉，您访问的页面不存在</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
diff --git a/packages/omi-templates/src/pages/results/server-error.tsx b/packages/omi-templates/src/pages/results/server-error.tsx
index fd1cf844e5..97fc6b9f48 100644
--- a/packages/omi-templates/src/pages/results/server-error.tsx
+++ b/packages/omi-templates/src/pages/results/server-error.tsx
@@ -42,9 +42,9 @@ export function ServerError() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">500 Internal Server Error</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">500 Internal Server Error</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">抱歉，服务器出错啦</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">抱歉，服务器出错啦</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
diff --git a/packages/omi-templates/src/pages/results/success.tsx b/packages/omi-templates/src/pages/results/success.tsx
index 1555ea5ddb..0ff9a1735c 100644
--- a/packages/omi-templates/src/pages/results/success.tsx
+++ b/packages/omi-templates/src/pages/results/success.tsx
@@ -1,4 +1,4 @@
-import '../../components/button'
+import '../../components/omiu/button'
 
 export function SuccessResult() {
   return (
@@ -15,9 +15,9 @@ export function SuccessResult() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">项目已创建成功</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">项目已创建成功</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">可以联系负责人分发应用</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">可以联系负责人分发应用</p>
 
         <div class="flex justify-center space-x-4">
           <o-button tag="a" href="#/">
diff --git a/packages/omi-templates/src/pages/results/system-maintenance.tsx b/packages/omi-templates/src/pages/results/system-maintenance.tsx
index 24d142654d..b4270e206f 100644
--- a/packages/omi-templates/src/pages/results/system-maintenance.tsx
+++ b/packages/omi-templates/src/pages/results/system-maintenance.tsx
@@ -89,9 +89,9 @@ export function SystemMaintenance() {
           </svg>
         </div>
 
-        <h2 class="text-2xl font-bold mb-2 text-gray-700 dark:text-foreground">系统维护中</h2>
+        <h2 class="text-2xl font-bold mb-2 text-zinc-700 dark:text-foreground">系统维护中</h2>
 
-        <p class="text-gray-600 mb-6 dark:text-foreground">系统维护中，请稍后再试</p>
+        <p class="text-zinc-600 mb-6 dark:text-foreground">系统维护中，请稍后再试</p>
 
         <div class="flex justify-center space-x-4">
           <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">