Closed Kutius closed 11 months ago
用了antd的组件,需要考虑到这些组件的黑暗色适配
可以考虑同时兼容 切换dark时,同时也支持dark前缀的样式
有关color的变量 都是从 antd 里 获取的,如果 这样使用 dark:bg-${colorBgBase}
其实也挺麻烦的
现在需要从
useSettings
中取出themeMode
,再根据这个值去写style对象既然用了tailwind,可以适配
dark:bg-gray
这种写法
有例子吗?大佬
@d3george 唔确实 这也比较麻烦的一点 实际上提出这个issue是因为在编写的时候,多种设置style的方法混在一起了显得很混乱,如下面这样:
const backgroundColor = useMemo(() => {
if (themeMode === ThemeMode.Light) {
return selected ? Color(themeToken.colorBgContainer).alpha(0.9).toString() : 'transparent';
}
return selected ? 'rgba(145, 158, 171, 0.12)' : 'transparent';
}, [selected, themeMode, themeToken.colorBgContainer]);
const style: CSSProperties = {
display: 'flex',
alignItems: 'center',
borderRadius: themeToken.borderRadiusLG,
backgroundColor,
padding: '8px 12px',
userSelect: 'none',
};
// ......
<div style={style} className={classnames({ 'hover:!bg-hover': !selected })} onClick={onClick}>
</div>
不过也由于个人能力有限,没有很好的解决方案。
同时在使用的过程中,还有一点比较麻烦的是:当有三部分 page -> component -> sub-component
拆成三个function时,如果涉及到样式,都需要引入一遍hook拿到值去编写样式:
const themeToken = useThemeToken();
const { themeMode } = useSettings();
亦或者props一层层透传也是很繁琐,我经验有限,希望可以一起探讨一下
我的想法是与Theme有关的样式都从antd获取变量去设置,而其它样式用tailwind快速设置,混用的话会很混乱
@TLovers 你是说用到dark前缀的这种情况 举个例子吗? 比如在暗色模式下,需要调整元素的背景色
@d3george 是的,最开始我看到您的代码,于是也是尝试遵循这个规则,但是在行内样式设置hover的样式是一件稍微麻烦的事,与此相比使用tailwind hover:就显得方便很多,但是就造成了混乱的样式规则
现在需要从
useSettings
中取出themeMode
,再根据这个值去写style对象既然用了tailwind,可以适配
dark:bg-gray
这种写法