Mini-Program/pages/test-tools/test-mode-switch.js

// pages/test-tools/test-mode-switch.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isDarkMode: false,
    isHighContrast: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 从本地存储获取当前模式设置
    const darkMode = wx.getStorageSync('isDarkMode') || false
    const highContrast = wx.getStorageSync('isHighContrast') || false
    this.setData({
      isDarkMode: darkMode,
      isHighContrast: highContrast
    })
    this.applyModeSettings()
  },

  /**
   * 切换深色/浅色模式
   */
  toggleDarkMode(e) {
    const isDarkMode = e.detail.value
    this.setData({ isDarkMode })
    wx.setStorageSync('isDarkMode', isDarkMode)
    this.applyModeSettings()
  },

  /**
   * 切换高对比度模式
   */
  toggleHighContrast(e) {
    const isHighContrast = e.detail.value
    this.setData({ isHighContrast })
    wx.setStorageSync('isHighContrast', isHighContrast)
    this.applyModeSettings()
  },

  /**
   * 应用模式设置
   */
  applyModeSettings() {
    const { isDarkMode, isHighContrast } = this.data
    
    // 创建或删除高对比度样式
    this.createOrRemoveHighContrastStyle(isHighContrast)
    
    // 更新窗口背景和导航栏样式
    this.updateWindowStyle(isDarkMode)
    
    console.log(`黑白测试模式设置: 深色模式=${isDarkMode}, 高对比度=${isHighContrast}`)
    wx.showToast({
      title: '模式已更新',
      icon: 'success'
    })
  },

  /**
   * 创建或删除高对比度样式
   */
  createOrRemoveHighContrastStyle(enable) {
    // 移除旧的高对比度样式
    const oldStyle = wx.createSelectorQuery().select('#highContrastStyle')
    oldStyle.context((res) => {
      if (res.context) {
        wx.removeStyleSheet('#highContrastStyle')
      }
    })
    
    if (enable) {
      // 创建高对比度样式
      const styleContent = `
        /* 高对比度样式 */
        * {
          filter: grayscale(100%) contrast(120%) !important;
        }
        
        /* 确保文字可读性 */
        text, span, div, p {
          color: #000 !important;
          background-color: #fff !important;
        }
        
        /* 按钮和交互元素 */
        button, .btn {
          border: 2px solid #000 !important;
          color: #000 !important;
          background-color: #fff !important;
        }
      `
      
      // 动态添加样式
      const styleSheet = document.createElement('style')
      styleSheet.id = 'highContrastStyle'
      styleSheet.textContent = styleContent
      document.head.appendChild(styleSheet)
    }
  },

  /**
   * 更新窗口样式
   */
  updateWindowStyle(isDarkMode) {
    wx.setNavigationBarColor({
      frontColor: isDarkMode ? '#ffffff' : '#000000',
      backgroundColor: isDarkMode ? '#000000' : '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'easeInOut'
      }
    })
    
    wx.setBackgroundColor({
      backgroundColor: isDarkMode ? '#000000' : '#ffffff',
      backgroundColorTop: isDarkMode ? '#000000' : '#ffffff',
      backgroundColorBottom: isDarkMode ? '#000000' : '#ffffff'
    })
  },

  /**
   * 重置所有设置
   */
  resetAllSettings() {
    this.setData({
      isDarkMode: false,
      isHighContrast: false
    })
    wx.setStorageSync('isDarkMode', false)
    wx.setStorageSync('isHighContrast', false)
    this.applyModeSettings()
  }
})