[tabbar] 深色模式下颜色错误的问题

[Nero978]

tdesign-miniprogram 版本

1.4.2

重现链接

No response

重现步骤

在深色模式下，通过在app.wxss中引入npm包内的miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss
（design token文件），tabbar的颜色定义有误。

原因是现阶段的token文件内定义的是page选择器。

而tabbar是一个特殊的组件，按照微信的文档（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html ），应该定义在custom-tab-bar文件夹内，这将导致tabbar渲染在page标签以外，造成深色模式下tabbar颜色不正确的问题。可以考虑在token文件中将加一个view标签解决这个问题。

期望结果

tabbar能够正确显示深色模式下的颜色

实际结果

No response

基础库版本

3.4.1

补充说明

No response

[github-actions]

👋 @Nero978，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@Nero978 感谢反馈和提供修改方案～

但我可能不太倾向在 app.wxss 中通过增加 view 标签选择器的方式来规避 custom-tab-bar 、或 root-portal 组件在 webview模式下无法继承 page选择器样式的问题。

• 不推荐标签选择器
• 优先级view > page，这意味着二次覆盖组件库样式必须大于等于view

综合考虑，我更倾向新增一个 .page class选择器，在custom-tab-bar 或者 root-portal 组件等特殊场景中，主动引入保证design token能正确被继承

使用上大概是：

// 开启虚拟节点
<view class="page" >
  <t-tab-bar  />
</view>

// 不开启虚拟节点
<t-tab-bar class="page" />

[jarmywang]

#2857 涉及文档补充