真正能落地的方案是手动维护两套图资源并根据主题值条件渲染；主题值需存本地存储，且在app.vue的onlaunch和onshow中均读取；图片按主题前缀组织路径，模板中用三元表达式或封装方法切换。
uni-app里图片怎么按主题色自动切换
不能靠 CSS 变量动态改 src，也不能用 media query 直接切图——小程序不支持 prefers-color-scheme 媒体查询，H5 端也仅限静态判断。真正能落地的方案是：**手动维护两套图资源 + 根据当前主题值条件渲染**。
主题值从哪来、怎么读才不丢、不闪
主题值必须存在本地存储，且在 App.vue 的 onLaunch 和 onShow 两个生命周期里都读一次，否则页面可能先于 App.vue 渲染，导致初始图错乱或闪一下再换。
-
uni.setStorageSync('theme_mode', 'dark')必须在用户点击切换时立刻执行，别等路由跳转后再存 - key 名统一用
'theme_mode'，值限定为'light'/'dark'/'auto'字符串，避免布尔值在小程序平台解析异常 - App.vue 中通过计算属性暴露
themeClass，例如：computed: { themeClass() { return 'theme-' + (uni.getStorageSync('theme_mode') || 'light') } }
图片路径怎么组织才好维护
推荐按「主题前缀 + 文件名」方式存放，比如：/static/images/icon-home-light.png 和 /static/images/icon-home-dark.png。这样逻辑清晰，删图/换图不会漏配对。
- 模板中用三元表达式写死路径：
:src="themeClass === 'theme-dark' ? '/static/images/logo-dark.png' : '/static/images/logo-light.png'" - 更进一步可封装成方法：
getThemeImage(name) { return `/static/images/${name}-${this.themeClass.split('-')[1]}.png` }，但注意this.themeClass必须是响应式变量（来自 data 或 computed） - 不要用
require()动态导入，uni-app 编译期不支持运行时路径拼接，会报Cannot find module
图标类图片要不要用字体图标替代
纯色图标（如返回箭头、菜单、用户头像）优先用字体图标或 SVG 内联，而不是 PNG。这样只需控制 color 和 fill 就能随主题变色，省去双图管理成本。
- uni-app 默认支持
icon组件，配合type和color属性即可：<uni-icon type="contact" :color="themeTextColor"></uni-icon> - 自定义 SVG 图标建议内联写进组件 template，用
:fill="themeTextColor"绑定颜色，比加载外部 SVG 更可控 - 如果必须用 PNG，且有大量图标，建议写个全局 mixin 或工具函数统一处理路径，避免每个页面重复写三元判断
onShow 里补读那一次，很多人以为只在 onLaunch 里读就够了，结果从后台切回来时图还是旧的。
