feat: dark mode

nutui-uniapp · Jun 17, 2023 · d275211 · d275211
1 parent 0ce90ef
commit d275211
Show file tree

Hide file tree

Showing 38 changed files with 915 additions and 189 deletions.
diff --git a/example/manifest.config.ts b/example/manifest.config.ts
@@ -17,12 +17,14 @@ export default defineManifestConfig({
     },
     usingComponents: true,
     darkmode: true,
+    themeLocation: 'theme.json',
   },
   'uniStatistics': {
     enable: false,
   },
   'h5': {
     darkmode: true,
+    themeLocation: 'theme.json',
   },
   'vueVersion': '3',
   'app-plus': {

diff --git a/example/package.json b/example/package.json
@@ -64,13 +64,19 @@
     "@dcloudio/uni-cli-shared": "3.0.0-alpha-3080420230602001",
     "@dcloudio/uni-stacktracey": "3.0.0-alpha-3080420230602001",
     "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080420230602001",
+    "@iconify-json/tabler": "^1.1.79",
     "@uni-helper/uni-app-types": "^0.5.8",
     "@uni-helper/vite-plugin-uni-components": "^0.0.6",
+    "@uni-helper/vite-plugin-uni-layouts": "^0.1.1",
     "@uni-helper/vite-plugin-uni-manifest": "^0.1.3",
     "@uni-helper/vite-plugin-uni-pages": "^0.2.1",
+    "@unocss/eslint-config": "^0.53.1",
+    "@unocss/preset-rem-to-px": "^0.53.1",
     "@vue/tsconfig": "^0.4.0",
     "sass": "^1.62.1",
     "typescript": "^5.0.4",
+    "unocss": "^0.53.1",
+    "unocss-applet": "^0.5.3",
     "unplugin-auto-import": "^0.16.4",
     "vite": "4.3.9",
     "vue-tsc": "^1.6.5"

diff --git a/example/src/App.vue b/example/src/App.vue
@@ -7,6 +7,7 @@ onLaunch(() => {
   const systemInfo = uni.getSystemInfoSync()
   // the systemInfo.theme is only support dark mode in WeChat and QQ
   darkMode.value = systemInfo?.theme === 'dark'
+
   statusBarHeight.value = systemInfo!.statusBarHeight || 44
   menuButtonBounding.value = uni.getMenuButtonBoundingClientRect()
   uni.onThemeChange((res: UniApp.OnThemeChangeCallbackResult) => darkMode.value = res.theme === 'dark')

diff --git a/example/src/components.d.ts b/example/src/components.d.ts
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
     NutCell: typeof import('uniapp-nutui/components/cell/cell.vue')['default']
     NutCellGroup: typeof import('uniapp-nutui/components/cellgroup/cellgroup.vue')['default']
     NutCol: typeof import('uniapp-nutui/components/col/col.vue')['default']
+    NutConfigProvider: typeof import('uniapp-nutui/components/configprovider/configprovider.vue')['default']
     NutCountdown: typeof import('uniapp-nutui/components/countdown/countdown.vue')['default']
     NutDialog: typeof import('uniapp-nutui/components/dialog/dialog.vue')['default']
     NutDivider: typeof import('uniapp-nutui/components/divider/divider.vue')['default']
@@ -35,5 +36,6 @@ declare module '@vue/runtime-core' {
     NutSwipe: typeof import('uniapp-nutui/components/swipe/swipe.vue')['default']
     NutSwitch: typeof import('uniapp-nutui/components/switch/switch.vue')['default']
     NutToast: typeof import('uniapp-nutui/components/toast/toast.vue')['default']
+    ThemeSwitch: typeof import('./components/ThemeSwitch.vue')['default']
   }
 }
diff --git a/example/src/components/ThemeSwitch.vue b/example/src/components/ThemeSwitch.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store'
+
+const { darkMode } = storeToRefs(useAppStore())
+</script>
+
+<template>
+  <view @click="darkMode = !darkMode">
+    <div v-if="darkMode" class="i-tabler-sun" />
+    <div v-else class="i-tabler-moon" />
+  </view>
+</template>
diff --git a/example/src/demo/basic/pages/button/index.vue b/example/src/demo/basic/pages/button/index.vue
@@ -10,7 +10,7 @@ function changeLoading() {
   }, 3000)
 }
 
-function click(val) {
+function click(val: any) {
   console.log(val)
 }
 </script>

diff --git a/example/src/demo/basic/pages/cell/index.vue b/example/src/demo/basic/pages/cell/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { isH5 } from '@uni-helper/uni-env'
 
 function testClick(event: Event) {
   // console.log('点击事件');
@@ -17,7 +16,7 @@ const switchChecked = ref(true)
 </route>
 
 <template>
-  <div class="demo" :class="{ web: isH5 }">
+  <div class="demo">
     <h2 class="title">
       基础用法
     </h2>
@@ -62,7 +61,7 @@ const switchChecked = ref(true)
     <nut-cell-group title="自定义右侧箭头区域" desc="/Users/yangjunwei/Desktop/nutui/src/sites/mobile-taro/vue/src/basic/pages/overlay使用 nut-cell-group 支持 title desc slots">
       <nut-cell title="Switch">
         <template #link>
-          <!-- <nut-switch v-model="switchChecked" /> -->
+          <nut-switch v-model="switchChecked" />
         </template>
       </nut-cell>
     </nut-cell-group>

diff --git a/example/src/demo/basic/pages/overlay/index.vue b/example/src/demo/basic/pages/overlay/index.vue
@@ -60,7 +60,7 @@ const overlayStyle = ref({
       </nut-button>
       <nut-overlay v-model:visible="show2" :z-index="2000">
         <div class="wrapper">
-          <div class="content">
+          <div class="content n-bg-2">
             这里是正文
           </div>
         </div>
@@ -75,7 +75,7 @@ const overlayStyle = ref({
       </nut-button>
       <nut-overlay v-model:visible="show6" lock-scroll :close-on-click-overlay="false">
         <div class="wrapper">
-          <div class="content" @click.stop="show6 = false">
+          <div class="content n-bg-2" @click.stop="show6 = false">
             close
           </div>
         </div>
@@ -102,7 +102,6 @@ const overlayStyle = ref({
     display: flex;
     width: 150px;
     height: 150px;
-    background: #fff;
     border-radius: 8px;
     align-items: center;
     justify-content: center;

diff --git a/example/src/demo/feedback/pages/backtop/index.vue b/example/src/demo/feedback/pages/backtop/index.vue
@@ -19,76 +19,76 @@ export default {
   <view class="demo" :class="{ web: isH5 }">
     <nut-backtop @click="click">
       <template #content>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据1
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据2
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据3
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据4
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据5
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据6
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据7
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据8
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据9
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据10
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据11
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据12
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据13
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据14
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据15
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据16
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据17
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据18
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据19
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据20
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据21
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据22
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据23
         </div>
-        <div class="text-data">
+        <div class="text-data n-bg-2">
           我是测试数据24
         </div>
       </template>
@@ -106,7 +106,7 @@ export default {
 
 <style lang="scss">
 .demo {
-  .text-data {
+  .text-data  {
     margin: 0 auto;
     margin-top: 15px;
     margin-bottom: 20px;
@@ -115,9 +115,7 @@ export default {
     align-items: center;
     width: 100%;
     height: 46px;
-    background: rgba(255, 255, 255, 1);
     border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
     line-height: 19px;
     font-size: 13px;
     color: rgba(102, 102, 102, 1);

diff --git a/example/src/demo/layout/pages/layout/index.vue b/example/src/demo/layout/pages/layout/index.vue
@@ -16,7 +16,7 @@ export default {
     <h2 class="title">
       基础布局
     </h2>
-    <div class="box-item">
+    <div class="box-item n-bg-2">
       <nut-row>
         <nut-col :span="24">
           <div class="flex-content">
@@ -79,7 +79,7 @@ export default {
     <h2 class="title">
       分栏间隔
     </h2>
-    <div class="box-item">
+    <div class="box-item n-bg-2">
       <nut-row :gutter="10">
         <nut-col :span="8">
           <div class="flex-content">
@@ -101,7 +101,7 @@ export default {
     <h2 class="title">
       Flex布局
     </h2>
-    <div class="box-item">
+    <div class="box-item n-bg-2">
       <nut-row type="flex" wrap="nowrap">
         <nut-col :span="6">
           <div class="flex-content">
@@ -192,7 +192,7 @@ export default {
 </template>
 
 <style lang="scss">
-.box-item {
+.box-item n-bg-2 {
   background: #fff;
   margin-bottom: 20px;
   padding: 20px 0;

diff --git a/example/src/demo/layout/pages/sticky/index.vue b/example/src/demo/layout/pages/sticky/index.vue
@@ -15,12 +15,13 @@ export default defineComponent({
 </script>
 
 <template>
+  <!-- TODO sticky在vite-plugin-uni-layouts下失效 -->
   <div class="demo sticky-demo" :class="{ web: isH5 }">
     <h2 class="title">
       基础用法
     </h2>
     <nut-cell>
-      <nut-sticky top="30" :parent-height="1200">
+      <nut-sticky top="60" :parent-height="1200">
         <nut-button type="primary">
           吸顶按钮
         </nut-button>
@@ -36,7 +37,6 @@ export default defineComponent({
 .sticky-container {
   width: 100%;
   height: 300px;
-  background-color: #fff;
 }
 </style>
 

diff --git a/example/src/demo/nav/pages/elevator/index.vue b/example/src/demo/nav/pages/elevator/index.vue
@@ -335,10 +335,6 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.elevator-demo {
-  background-color: #fff !important;
-  // overflow-y: hidden !important;
-}
 </style>
 
 <route lang="json">

diff --git a/example/src/layouts/default.vue b/example/src/layouts/default.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { useAppStore } from '@/store'
+
+const { darkMode } = storeToRefs(useAppStore())
+</script>
+
+<template>
+  <view class="h-100vh">
+    <nut-config-provider :theme="darkMode ? 'dark' : ''">
+      <slot />
+    </nut-config-provider>
+  </view>
+</template>
+
+<style>
+.header {
+  background-color: black;
+  color: #fff;
+}
+</style>
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -2,6 +2,7 @@ import { createSSRApp } from 'vue'
 
 import { Locale } from 'uniapp-nutui/locale'
 import App from './App.vue'
+import 'uno.css'
 import { setupStore } from './store'
 import './styles/app.scss'
 

diff --git a/example/src/manifest.json b/example/src/manifest.json
@@ -1 +1 @@
-{"name":"NutUi","appid":"__UNI__D989E4B","description":"","versionName":"1.0.0","versionCode":"100","transformPx":false,"mp-weixin":{"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"usingComponents":true,"darkmode":true},"uniStatistics":{"enable":false},"h5":{"darkmode":true},"vueVersion":"3","app-plus":{"darkmode":true,"distribute":{"ios":{"dSYMs":false},"sdkConfigs":{"ad":{}}}}}
+{"name":"NutUi","appid":"__UNI__D989E4B","description":"","versionName":"1.0.0","versionCode":"100","transformPx":false,"mp-weixin":{"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"usingComponents":true,"darkmode":true,"themeLocation":"theme.json"},"uniStatistics":{"enable":false},"h5":{"darkmode":true,"themeLocation":"theme.json"},"vueVersion":"3","app-plus":{"darkmode":true,"distribute":{"ios":{"dSYMs":false},"sdkConfigs":{"ad":{}}}}}