theme.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. const app = getApp();
  2. Page({
  3. data: {
  4. currentTheme: 0,
  5. primaryColor: '#E7624F',
  6. themes: [
  7. { name: '默认主题', bgColor: '#f8f8f8', textColor: '#333' },
  8. { name: '深色主题', bgColor: '#333', textColor: '#f5f5f5' },
  9. { name: '护眼主题', bgColor: '#e6f7ed', textColor: '#333' }
  10. ],
  11. colorOptions: [
  12. '#E7624F', '#4285F4', '#34A853', '#FBBC05', '#EA4335', '#9C27B0'
  13. ],
  14. theme: {}
  15. },
  16. onLoad: function () {
  17. const savedTheme = wx.getStorageSync('theme') || app.globalData.theme;
  18. const currentTheme = savedTheme.currentTheme || 0;
  19. const primaryColor = savedTheme.primaryColor || '#E7624F';
  20. this.setData({
  21. currentTheme,
  22. primaryColor,
  23. theme: savedTheme
  24. });
  25. this.updateNavigationBarColor();
  26. if (app.eventBus) {
  27. app.eventBus.on('themeChange', (theme) => {
  28. this.setData({ theme });
  29. this.updateNavigationBarColor();
  30. });
  31. }
  32. },
  33. switchTheme: function(e) {
  34. this.setData({
  35. currentTheme: e.currentTarget.dataset.index
  36. });
  37. },
  38. setPrimaryColor: function(e) {
  39. this.setData({
  40. primaryColor: e.currentTarget.dataset.color
  41. });
  42. this.updateNavigationBarColor();
  43. },
  44. applyTheme: function() {
  45. const { currentTheme, primaryColor, themes } = this.data;
  46. const newTheme = {
  47. ...themes[currentTheme],
  48. primaryColor,
  49. currentTheme
  50. };
  51. wx.setStorageSync('theme', newTheme);
  52. app.globalData.theme = newTheme;
  53. if (app.eventBus) {
  54. app.eventBus.emit('themeChange', newTheme);
  55. }
  56. wx.showToast({
  57. title: '主题应用成功',
  58. icon: 'success'
  59. });
  60. setTimeout(() => wx.navigateBack(), 1500);
  61. },
  62. // 新增:更新导航栏颜色的方法
  63. updateNavigationBarColor: function() {
  64. const { theme, primaryColor } = this.data;
  65. const textColor = theme.textColor || '#333';
  66. wx.setNavigationBarColor({
  67. frontColor: textColor === '#333' ? '#000000' : '#ffffff',
  68. backgroundColor: primaryColor
  69. });
  70. }
  71. });