input组件在uni-app深色模式下显示异常

input组件在uni-app深色模式下显示异常

开发环境 版本号 项目创建方式
Windows 11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：11

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：模拟器

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
<template> <view> <input :value="username" maxlength="18" /> </view> </template> <script> export default { data() { return { username: 'username' } } } </script> ````

操作步骤： 手机开启深色模式后打开APP

预期结果： 输入框显示username

实际结果： 输入框空白

bug描述： 手机切换深色模式后，input主键内容无法显示，如图显示的输入框有值（不是空格），没有显示出来


更多关于input组件在uni-app深色模式下显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

主动设置下字体颜色是否正常

更多关于input组件在uni-app深色模式下显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的深色模式适配问题。在uni-app的nvue页面中，input组件默认不会自动适配系统深色模式，导致文字颜色与背景色相近而无法显示。

解决方案：

  1. 明确设置input的文字颜色：
<input :value="username" maxlength="18" style="color: #000000" />
  1. 更好的做法是使用条件样式适配深色模式：
<input :value="username" maxlength="18" :style="{color: isDarkMode ? '#FFFFFF' : '#000000'}" />
  1. 在script中检测深色模式：
export default {
    data() {
        return {
            username: 'username',
            isDarkMode: false
        }
    },
    onLoad() {
        // 检测系统深色模式
        uni.getSystemInfo({
            success: (res) => {
                this.isDarkMode = res.theme === 'dark'
            }
        })
    }
}
  1. 也可以监听主题变化：
onLoad() {
    uni.onThemeChange((res) => {
        this.isDarkMode = res.theme === 'dark'
    })
}
回到顶部