[new] color UI 更新到3.x

1. 对大量ui进行修改
2. 适配黑夜模式
3. 页面大部分修改

Author: mox-hub

app.js

@@ -1,21 +1,16 @@
 //app.js
+import { colorUI } from './config/ColorUI.js'
+import { colorUISdk } from './config/mp-sdk.js'
 App({
   //onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
+  
+  colorUI,//挂载到app上
+  colorUISdk,
   onLaunch: function(options){
 
   },
   onShow: function(options){
 
-  },
-  onHide: function(){
-
-  },
-  onError: function(msg){
-
-  },
-  //options(path,query,isEntryPage)
-  onPageNotFound: function(options){
-
   },
   globalData: {
     userInfo: {},

app.json

@@ -12,21 +12,60 @@
         "pages/publish/publish",
         "pages/search/search",
         "pages/user/change_user_info",
-        "pages/user/user"
+        "pages/user/user",
+        "pages/setting/setting"
     ],
     "window": {
         "backgroundTextStyle": "light",
         "navigationBarBackgroundColor": "#eaa8b6",
         "navigationBarTitleText": "findPlatform",
         "navigationBarTextStyle": "white",
-        "backgroundColor": "#ededed"
+        "backgroundColor": "#ededed",
+        "navigationStyle": "custom"
+
     },
+
+    "usingComponents": {
+        "ui-sys": "mp-cu/colorUI/components/ui-sys/ui-sys",
+        "ui-title": "mp-cu/colorUI/components/ui-title/ui-title",
+        "ui-code": "mp-cu/colorUI/components/ui-code/ui-code",
+        "ui-loading": "mp-cu/colorUI/components/ui-loading/ui-loading",
+        "ui-menu": "mp-cu/colorUI/components/ui-menu/ui-menu",
+        "ui-menu-item": "mp-cu/colorUI/components/ui-menu-item/ui-menu-item",
+        "ui-avatar": "mp-cu/colorUI/components/ui-avatar/ui-avatar",
+        "ui-avatar-stack": "mp-cu/colorUI/components/ui-avatar-stack/ui-avatar-stack",
+        "ui-modal": "mp-cu/colorUI/components/ui-modal/ui-modal",
+        "ui-toast": "mp-cu/colorUI/components/ui-toast/ui-toast",
+        "ui-switch": "mp-cu/colorUI/components/ui-switch/ui-switch",
+        "ui-radio-group": "mp-cu/colorUI/components/ui-radio-group/ui-radio-group",
+        "ui-radio": "mp-cu/colorUI/components/ui-radio/ui-radio",
+        "ui-card": "mp-cu/colorUI/components/ui-card/ui-card",
+        "ui-fixed": "mp-cu/colorUI/components/ui-fixed/ui-fixed",
+        "ui-img": "mp-cu/colorUI/components/ui-img/ui-img",
+        "ui-navbar": "/mp-cu/colorUI/components/ui-navbar/ui-navbar",
+        "ui-swiper": "/mp-cu/colorUI/components/ui-swiper/ui-swiper",
+        "ui-text-size": "/mp-cu/colorUI/components/ui-text-size/ui-text-size",
+        "ui-tag": "/mp-cu/colorUI/components/ui-tag/ui-tag",
+        "ui-progress": "/mp-cu/colorUI/components/ui-progress/ui-progress",
+        "ui-tab": "/mp-cu/colorUI/components/ui-tab/ui-tab",
+        "ui-popover" : "/mp-cu/colorUI/components/ui-popover/ui-popover",
+        "ui-steps" : "/mp-cu/colorUI/components/ui-steps/ui-steps",
+        "ui-form" : "/mp-cu/colorUI/components/ui-form/ui-form",
+        "ui-form-group" : "/mp-cu/colorUI/components/ui-form-group/ui-form-group",
+        "ui-input-box" : "/mp-cu/colorUI/components/ui-input-box/ui-input-box",
+        "ui-checkbox" : "/mp-cu/colorUI/components/ui-checkbox/ui-checkbox",
+        "ui-checkbox-group" : "/mp-cu/colorUI/components/ui-checkbox-group/ui-checkbox-group",
+        "ui-change-theme": "/mp-cu/colorUI/components/ui-change-theme/ui-change-theme",
+        "ui-parameter" : "/mp-sdk/components/ui-parameter/ui-parameter"
+    },
+    
     "tabBar": {
-        "color": "#999",
-        "selectedColor": "#ff2d4a",
-        "backgroundColor": "#f5f6f8",
+        "color": "#959595",
+        "selectedColor": "#eaa8b6",
+        "borderStyle": "white",
+        "backgroundColor": "#ffffff",
         "position": "bottom",
-        "borderStyle": "black",
+
         "list": [
             {
                 "pagePath": "pages/index/index",
@@ -54,8 +93,8 @@
             }
         ]
     },
+    "darkmode": true,
     "lazyCodeLoading": "requiredComponents",
-    "style": "v2",
     "sitemapLocation": "sitemap.json",
     "permission": {
         "scope.userLocation": {

app.scss

@@ -0,0 +1,5 @@
+@import "./styles/iconfont.wxss";
+@import './mp-cu/colorUI/scss/ui.scss';
+@import "colorui/main.wxss";
+@import "colorui/icon.wxss";
+@import "colorui/dark.wxss";

app.wxss

@@ -0,0 +1,167 @@
+/* 暗黑模式下应用的样式 */
+@media (prefers-color-scheme: dark) {
+	page {
+		/* 暗黑模式背景色 */
+		--darkBlack: #000000;
+		--lightGray: #393939;
+		--darkGray: #141414;
+		/* 暗黑模式按钮颜色 */
+		--btnGray: #313131;
+		/* 暗黑模式字体颜色 */
+		--darkTitle: rgba(255, 255, 255, .85);
+		--darkPrimaryText: rgba(255, 255, 255, .65);
+		--darkSecondaryText: rgba(255, 255, 255, .45);
+		--darkDisable: rgba(255, 255, 255, .1);
+		/* 暗黑模式渐变色 */
+		--darkGradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
+		--darkGradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
+		--darkGradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
+		--darkGradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
+		--darkGradualPink: linear-gradient(45deg, #ec008c, #6739b6);
+		--darkGradualBlue: linear-gradient(45deg, #112A45, #1765AD);
+		/* 阴影透明色 */
+		--ShadowSize: 6rpx 6rpx 8rpx;
+		--redShadow: rgba(204, 69, 59, 0.8);
+		--orangeShadow: rgba(217, 109, 26, 0.8);
+		--yellowShadow: rgba(224, 170, 7, 0.8);
+		--oliveShadow: rgba(124, 173, 55, 0.8);
+		--greenShadow: rgba(48, 156, 63, 0.8);
+		--cyanShadow: rgba(28, 187, 180, 0.8);
+		--blueShadow: rgba(0, 102, 204, 0.8);
+		--purpleShadow: rgba(88, 48, 156, 0.8);
+		--mauveShadow: rgba(133, 33, 150, 0.8);
+		--pinkShadow: rgba(199, 50, 134, 0.8);
+		--brownShadow: rgba(140, 88, 53, 0.8);
+		--greyShadow: rgba(114, 130, 138, 0.8);
+		--grayShadow: rgba(114, 130, 138, 0.8);
+		--blackShadow: rgba(26, 26, 26, 0.8);
+	}
+
+  page {
+		background-color: var(--darkBlack);
+		color: var(--darkPrimaryText);
+	}
+
+	.bg-gradual-blue {
+		background-image: var(--darkGradualBlue);
+	}
+
+	.bg-white {
+		color: var(--gray);
+		background-color: var(--darkGray);
+	}
+
+	.cu-list.menu>.cu-item {
+		background-color: var(--lightGray);
+  }
+
+	.text-black,
+	.line-black,
+	.lines-black {
+		color: var(--darkTitle);
+	}
+
+	.solids::after {
+		border: 8rpx solid var(--darkDisable);
+	}
+	
+	.solids-top::after {
+		border-top: 8rpx solid var(--darkDisable);
+	}
+	
+	.solids-right::after {
+		border-right: 8rpx solid var(--darkDisable);
+	}
+	
+	.solids-bottom::after {
+		border-bottom: 8rpx solid var(--darkDisable);
+	}
+	
+	.solids-left::after {
+		border-left: 8rpx solid var(--darkDisable);
+	}
+
+	.cu-bar .search-form {
+		background-color: var(--lightGray);
+		color: var(--darkPrimaryText);
+	}
+
+	.cu-list.grid {
+		background-color: var(--darkGray);
+	}
+
+	.cu-btn:not([class*="bg-"]) {
+		background-color: var(--btnGray);
+	}
+
+	radio.radio[checked]::after {
+		border: 8px solid var(--darkDisable) !important;
+	}
+
+	.cu-progress {
+		background-color: #424242;
+	}
+
+	.cu-progress view {
+		color: var(--darkPrimaryText);
+	}
+
+	.cu-load.load-modal {
+		background-color: var(--lightGray);
+		color: var(--darkPrimaryText);
+	}
+
+	.cu-load.load-modal::after {
+		background-color: var(--lightGray);
+	}
+
+	.cu-bar {
+		background-color: var(--lightGray);
+	}
+
+	.cu-bar, .cu-bar.input {
+		background-color: var(--lightGray);
+	}
+
+	.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
+		background-color: var(--lightGray);
+		color: var(--darkPrimaryText);
+	}
+
+	.cu-chat .cu-info {
+		background-color: rgba(255, 255, 255, 0.2);
+		color: var(--darkPrimaryText);
+	}
+		
+	.cu-list.menu-avatar>.cu-item {
+		background-color: var(--lightGray);
+	}
+
+	.cu-card.dynamic>.cu-item {
+		background-color: var(--lightGray);
+	}
+
+	.cu-card>.cu-item {
+		background-color: var(--lightGray);
+	}
+
+	.cu-timeline {
+		background-color: var(--lightGray);
+	}
+
+	.cu-timeline>.cu-item::before {
+		background-color: var(--lightGray);
+	}
+
+	.cu-timeline>.cu-item[class*="cuIcon-"]::before {
+		background-color: var(--lightGray);
+	}
+	
+	.cu-form-group {
+		background-color: var(--lightGray);
+	}
+	
+	.cu-form-group+.cu-form-group {
+		border-top: 1rpx solid var(--darkDisable);
+	}
+}