feat: add dark theme (#10)

* feat: add dark theme

* feat: add dark theme

Author: wuyiping0628

.vitepress/theme/Home.vue

@@ -20,11 +20,15 @@
           </div>
           <!-- 第二行：大图片 -->
           <div class="row2">
-            <img
-              class="main-img"
-              :src="getImgUrl(item.imgUrl)"
-              alt="主图"
-            />
+              <img
+                :src="getImgUrl(
+                  isDark
+                    ? `images/${item.imgUrl}-dark.svg`
+                    : `images/${item.imgUrl}.svg`
+                )"
+                alt="OpenTiny NEXT"
+                class="logo-icon"
+              />
           </div>
           <!-- 第三行：描述文本 -->
           <div class="row3">{{ item.desc }} </div>
@@ -43,9 +47,18 @@
 </template>
 <script setup>
 import { useData } from "vitepress";
+import { ref, onMounted } from 'vue';
 
 const { site } = useData();
 
+// 暗色模式状态
+const isDark = ref(false);
+
+// 初始化暗色模式状态
+onMounted(() => {
+  isDark.value = document.documentElement.classList.contains('dark');
+});
+
 const getImgUrl = (imgPath) => {
   return site.value.base + imgPath;
 };
@@ -55,31 +68,31 @@ const homeList = [
         icon: 'images/tiny-vue-logo-active.svg',
         title: 'TinyVue',
         titleTip: 'vue组件库',
-        imgUrl: 'images/banner1.svg',
+        imgUrl: 'tiny-vue-banner',
         link: 'vue-playground',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
         icon: 'images/tiny-engine-logo-active.svg',
         title: 'TinyEngine',
         titleTip: '低代码引擎',
-        imgUrl: 'images/banner2.svg',
+        imgUrl: 'tiny-engine-banner',
         link: 'tiny-engine#/tiny-engine-editor',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
         icon: 'images/next-sdk-logo-active.svg',
         title: 'NEXT-SDKs',
         titleTip: '智能应用开发工具包', 
-        imgUrl: 'images/banner3.svg',
+        imgUrl: 'next-sdk-banner',
         link: '',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
       {
         icon: 'images/tiny-robot-logo-active.svg',
         title: 'TinyRobot',
         titleTip: 'AI智能助手', 
-        imgUrl: 'images/banner4.svg',
+        imgUrl: 'tiny-robot-banner',
         link: '',
         desc: 'OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。'
       },
@@ -119,6 +132,9 @@ const homeList = [
   flex: 0 0 calc((100% - 3 * 30px) / 4);
   max-width: calc((100% - 3 * 30px) / 4);
 }
+.dark .small-box {
+  background: rgba(38,38,38,1);
+}
 .row1 {
   display: flex;
   align-items: flex-start;
@@ -178,6 +194,27 @@ const homeList = [
   pointer-events: none;
   cursor: not-allowed;
 }
+.dark .link {
+  color: #5291FF;
+}
+.dark .link.disabled {
+  color: #808080;
+}
+.dark .row3{
+  color: #b3b3b3;
+}
+.dark .row1-title{
+  color: #e6e6e6;
+}
+.dark .row1-content{
+  color: #b3b3b3;
+}
+.dark .home-title{
+  color: #e6e6e6;
+}
+.dark .home-desc{
+  color: #b3b3b3;
+}
 
 /* 响应式断点：3列 / 2列 / 1列，同时在 <980px 时调整标题与描述 */
 @media (max-width: 1600px) {
@@ -240,4 +277,7 @@ const homeList = [
     padding: 20px;
   }
 }
+.logo-icon{
+  background: rgba(38,38,38,1);
+}
 </style>

.vitepress/theme/components/CustomHeader.vue

@@ -10,8 +10,8 @@
               <img
                 :src="getImgUrl(
                   isDark
-                    ? 'images/logo2.svg'
-                    : 'images/logo2.svg'
+                    ? 'images/logo-dark.svg'
+                    : 'images/logo.svg'
                 )"
                 alt="OpenTiny NEXT"
                 class="logo-icon"
@@ -113,8 +113,8 @@
                 <img
                  :src="getImgUrl(
                     isDark
-                      ? 'images/logo2.svg'
-                      : 'images/logo2.svg'
+                      ? 'images/logo-dark.svg'
+                      : 'images/logo.svg'
                   )"
                   alt="OpenTiny NEXT"
                   class="logo-icon"
@@ -194,7 +194,7 @@
             class="home-link home-link-mb"
           >
             <img
-              :src="getImgUrl('images/logo.svg')"
+              :src="getImgUrl('images/logo1.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -342,6 +342,9 @@ watch(
 .logo-icon {
   height: 32px;
 }
+.modal-header .logo-icon {
+  height: 16px;
+}
 
 .logo-text {
   font-size: 20px;
@@ -410,6 +413,9 @@ watch(
   background-color: #e6e6e6;
   color: var(--vp-c-text-1);
 }
+.dark .tool-button:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
 .tool-switch {
   position: relative;
   border-radius: 11px;

.vitepress/theme/components/customContent.vue

@@ -4,7 +4,7 @@
       <div class="home-logo">
         <a :href="backHome" rel="noopener noreferrer">
           <img
-            :src="getImgUrl(isDark ? 'images/mini-logo.svg' : 'images/mini-logo.svg') "
+            :src="getImgUrl(isDark ? 'images/mini-logo-dark.svg' : 'images/mini-logo.svg') "
             class="home-logo-icon"
           />
         </a>
@@ -61,7 +61,7 @@
         <div class="home-logo-mb">
           <a href="/" class="logo-link">
             <img
-              :src="getImgUrl(isDark ? 'images/logo2.svg' : 'images/logo2.svg')"
+              :src="getImgUrl(isDark ? 'images/logo-dark.svg' : 'images/logo.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -131,7 +131,7 @@
             class="home-link home-link-mb"
           >
             <img
-              :src="getImgUrl('images/logo.svg')"
+              :src="getImgUrl('images/logo1.svg')"
               alt="OpenTiny NEXT"
               class="logo-icon"
             />
@@ -157,12 +157,18 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch ,onMounted } from "vue";
 import { useRoute ,useData } from "vitepress";
 // 获取 VitePress 数据
 const { site } = useData();
 const route = useRoute();
+// 暗色模式状态
+const isDark = ref(false);
 
+// 初始化暗色模式状态
+onMounted(() => {
+  isDark.value = document.documentElement.classList.contains('dark');
+});
 const showModal = ref(false);
 
 const backHome = ref('/');
@@ -295,10 +301,11 @@ watch(
   height: 2px;
   background-color: #dbdbdb;
 }
-.home-logo-icon {
-  height: 32px;
-  width: 32px;
-  margin: 14px 12px;
+.dark .home-logo-mb ::before {
+  background: rgba(255, 255, 255, 0.1);
+}
+.dark .home-logo-icon {
+  background: #1a1a1a;
 }
 .sidebar {
   width: 56px;
@@ -533,6 +540,9 @@ watch(
   background-color: #fafafa;
   border-radius: 8px;
 }
+.dark .modal-tab:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
 
 .modal-tab-title {
   font-size: 16px;
@@ -565,6 +575,15 @@ watch(
   font-weight: 500;
   color: #495057;
 }
+.dark .sidebar{
+  background: #1a1a1a;
+}
+.dark .home-logo::before {
+  background: rgba(255, 255, 255, 0.1);
+}
+.dark .icon-wrapper:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
 
 @media (max-width: 680px) {
   .sidebar {

.vitepress/theme/style.css

@@ -45,4 +45,9 @@
 
 .VPContent {
   padding: 0 !important;
-}
+}
+
+.dark .opentiny-playground-layout {
+  background-image: url('images/bg-playground-home-dark.png');
+  background-color: #000000;
+}