chore: add themeChangeBehavior

Author: anlyyao

example/pages/home/home.ts

@@ -1,10 +1,11 @@
+import themeChangeBehavior from 'tdesign-miniprogram/mixins/theme-change';
 import list from './data/index';
 
 Page({
+  behaviors: [themeChangeBehavior],
   data: {
     list,
     currentYear: new Date().getFullYear(),
-    isDarkMode: false,
   },
   onLoad(options) {
     const { path, q } = options;
@@ -21,7 +22,6 @@ Page({
     }
 
     this.trdPrivacy = this.selectComponent('#trdPrivacy');
-    this.setData({ isDarkMode: wx.getSystemInfoSync().theme === 'dark' });
   },
 
   showPrivacyWin() {

example/pages/home/home.wxml

@@ -4,7 +4,7 @@
     <image
       class="title-icon"
       mode="aspectFit"
-      src="/assets/{{isDarkMode ? 'TDesign-logo_dark' : 'TDesign-logo_light'}}.png"
+      src="/assets/{{theme === 'dark' ? 'TDesign-logo_dark' : 'TDesign-logo_light'}}.png"
       aria-label="TDesign Logo"
     />
   </view>

src/footer/_example/logo/index.js

@@ -1,22 +1,11 @@
+import themeChangeBehavior from 'tdesign-miniprogram/mixins/theme-change';
+
 Component({
+  behaviors: [themeChangeBehavior],
   data: {
-    logoList: [
-      {
-        icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
-        title: '品牌名称',
-      },
-      {
-        url: 'https://tdesign.gtimg.com/mobile/demos/logo1.png',
-      },
-    ],
-  },
-
-  lifetimes: {
-    attached() {
-      if (wx.getSystemInfoSync().theme === 'dark') {
-        const updateKeyName = 'logoList[1].url';
-        this.setData({ [updateKeyName]: 'https://tdesign.gtimg.com/mobile/demos/footer-logo-dark.png' });
-      }
+    logo: {
+      icon: 'https://tdesign.gtimg.com/mobile/demos/logo2.png',
+      title: '品牌名称',
     },
   },
 });

src/footer/_example/logo/index.wxml

@@ -1,8 +1,10 @@
 <!-- theme 为 logo -->
 <view class="footer-example">
-  <t-footer logo="{{logoList[0]}}" />
+  <t-footer logo="{{logo}}" />
 </view>
 
 <view class="footer-example">
-  <t-footer logo="{{logoList[1]}}" />
+  <t-footer
+    logo="{{{url: theme === 'dark'?'https://tdesign.gtimg.com/mobile/demos/footer-logo-dark.png':'https://tdesign.gtimg.com/mobile/demos/logo1.png'} }}"
+  />
 </view>

src/mixins/theme-change.ts

@@ -0,0 +1,30 @@
+const themeChangeBehavior = Behavior({
+  data: {
+    theme: 'light',
+  },
+
+  attached() {
+    this._initTheme();
+  },
+
+  methods: {
+    _initTheme() {
+      const that = this;
+      wx.getSystemInfo({
+        success(res) {
+          that.setData({
+            theme: res.theme,
+          });
+        },
+      });
+
+      wx.onThemeChange((res) => {
+        that.setData({
+          theme: res.theme,
+        });
+      });
+    },
+  },
+});
+
+export default themeChangeBehavior;

src/navbar/_example/img/index.js

@@ -1,13 +1,5 @@
-Component({
-  data: {
-    image: 'https://tdesign.gtimg.com/mobile/demos/logo-light.png',
-  },
+import themeChangeBehavior from 'tdesign-miniprogram/mixins/theme-change';
 
-  lifetimes: {
-    attached() {
-      if (wx.getSystemInfoSync().theme === 'dark') {
-        this.setData({ image: 'https://tdesign.gtimg.com/mobile/demos/image-dark.png' });
-      }
-    },
-  },
+Component({
+  behaviors: [themeChangeBehavior],
 });

src/navbar/_example/img/index.wxml

@@ -1,5 +1,9 @@
 <t-navbar>
   <view slot="left">
-    <t-image t-class="custom-image" src="{{image}}" aria-label="导航栏图片" />
+    <t-image
+      t-class="custom-image"
+      src="{{theme === 'dark' ? 'https://tdesign.gtimg.com/mobile/demos/image-dark.png' : 'https://tdesign.gtimg.com/mobile/demos/logo-light.png'}}"
+      aria-label="导航栏图片"
+    />
   </view>
 </t-navbar>