uniapp主题切换

### 在 UniApp 中实现动态主题切换功能 在 UniApp 中实现动态主题切换功能，可以通过 HTML 的 `data` 属性和 CSS 变量来完成[^2]。这种方法利用了现代浏览器对 CSS 变量的支持，能够高效地实现页面样式的动态变化。 以下是实现动态主题切换功能的具体方法： #### 1. 使用 CSS 变量定义主题样式 在项目的全局样式文件（如 `App.vue` 或 `common.css`）中，通过 CSS 变量定义不同主题的样式。例如： ```css :root { --primary-color: #007aff; /* 默认主题颜色 */ --background-color: #ffffff; /* 默认背景颜色 */ --text-color: #333333; /* 默认文字颜色 */ } /* 暗黑主题 */ [data-theme="dark"] { --primary-color: #ff69b4; --background-color: #121212; --text-color: #e0e0e0; } /* 浅色主题 */ [data-theme="light"] { --primary-color: #00c853; --background-color: #fafafa; --text-color: #212121; } ``` #### 2. 动态修改 `data-theme` 属性 在 Vue 组件中，通过改变 `data-theme` 属性值来切换主题。可以使用以下代码实现： ```javascript export default { data() { return { currentTheme: 'light', // 默认主题为浅色 }; }, methods: { switchTheme(theme) { this.currentTheme = theme; document.documentElement.setAttribute('data-theme', theme); // 修改全局属性 }, }, }; ``` #### 3. 在模板中绑定主题切换逻辑 在组件的模板中，添加按钮或菜单项以触发主题切换逻辑。例如： ```html <template> <view> <button @click="switchTheme('light')">切换到浅色主题</button> <button @click="switchTheme('dark')">切换到暗黑主题</button> </view> </template> ``` #### 4. 确保样式适配 为了确保主题切换时样式能够正确应用，需要在所有相关的样式规则中使用 CSS 变量。例如： ```css body { background-color: var(--background-color); color: var(--text-color); } button { background-color: var(--primary-color); color: var(--text-color); } ``` 通过上述步骤，可以在 UniApp 中实现动态主题切换功能，并且保证样式的一致性和可维护性。 ### 注意事项 - 如果需要支持旧版浏览器，建议使用 JavaScript 动态修改内联样式作为备选方案。 - 在实际开发中，可以根据用户偏好或系统设置（如设备的深色模式）自动初始化主题[^2]。