uni-app实现夜间模式

UniApp 提供了一种便捷的方式来实现应用的夜间模式，通常称为“暗黑模式”或“深色主题”。以下是使用 UniApp 实现夜间模式的一般步骤：

1. 设置开关：首先，你需要在项目的配置文件（如 `config.js`）中，添加一个夜间模式的开关，比如一个布尔变量 `isDarkModeEnabled`。

export default {
  // ...
  env: {
    isDarkModeEnabled: true, // 初始值可以在这里设置，默认为 false
  },
  // ...
};

2. 配置样式：创建一个 CSS 文件（例如 `dark-mode.css`），定义暗色模式下的样式。这可能包括更改背景颜色、文字颜色、按钮颜色等。

3. 动态切换：在各个组件的 CSS 样式中使用媒体查询或者根据当前的主题变量（如 `$color-primary`）动态调整样式。例如：

/* light mode */
.dark-theme :not(.dark) {
  background-color: white;
  color: black;
}

/* dark mode */
.dark-theme .dark {
  background-color: #2c2c2c;
  color: white;
}

4. 元素响应：确保你的 UI 组件能够响应夜间模式的切换，比如按钮的点击效果、输入框的高亮等。

5. 开启和关闭功能：在全局或页面级，你可以添加一个切换夜间模式的按钮或者逻辑，当用户选择开启夜间模式时，改变 `isDarkModeEnabled` 的值，并重新渲染页面以应用新的样式。

// 全局调用
export default function App() {
  const toggleDarkMode = () => {
    uni.setStorageSync('isDarkModeEnabled', !uni.getStorageSync('isDarkModeEnabled'));
    // 更新页面样式
    changeTheme();
  };
  
  // ...
  
  // 仅当需要时调用
  const changeTheme = () => {
    if (uni.getStorageSync('isDarkModeEnabled')) {
      applyDarkTheme();
    } else {
      applyLightTheme();
    }
  };

  return <YourAppComponent toggleDarkMode={toggleDarkMode} />;
}

// ... 在适当的地方调用 changeTheme()