app白天夜间模式切换

白天夜间模式切换

写了一个简单的白天夜间模式切换Demo,感兴趣的同学可以下载:

  • 先上图片
    这里写图片描述

这里写图片描述

使用Setter来对每一个页面、listView以及TextView来设置对应的属性,和皮肤,本demo中只使用了2个皮肤,就是白天和夜间,包括一些自定义属性和主题
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 提供了一种便捷的方式来实现应用的夜间模式,通常称为“暗黑模式”或“深色主题”。以下是使用 UniApp 实现夜间模式的一般步骤: 1. 设置开关:首先,你需要在项目的配置文件(如 `config.js`)中,添加一个夜间模式的开关,比如一个布尔变量 `isDarkModeEnabled`。 ```javascript export default { // ... env: { isDarkModeEnabled: true, // 初始值可以在这里设置,默认为 false }, // ... }; ``` 2. 配置样式:创建一个 CSS 文件(例如 `dark-mode.css`),定义暗色模式下的样式。这可能包括更改背景颜色、文字颜色、按钮颜色等。 3. 动态切换:在各个组件的 CSS 样式中使用媒体查询或者根据当前的主题变量(如 `$color-primary`)动态调整样式。例如: ```css /* 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` 的值,并重新渲染页面以应用新的样式。 ```javascript // 全局调用 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() ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值