如何优雅的编写主题相关的样式

[Kutius]

现在需要从 useSettings 中取出 themeMode ，再根据这个值去写style对象

既然用了tailwind，可以适配 dark:bg-gray 这种写法

[d3george]

用了antd的组件，需要考虑到这些组件的黑暗色适配

[Kutius]

可以考虑同时兼容 切换dark时，同时也支持dark前缀的样式

[d3george]

有关color的变量 都是从 antd 里 获取的，如果 这样使用 dark:bg-${colorBgBase} 其实也挺麻烦的

[TLovers]

现在需要从 useSettings 中取出 themeMode ，再根据这个值去写style对象

既然用了tailwind，可以适配 dark:bg-gray 这种写法

有例子吗？大佬

[Kutius]

@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一层层透传也是很繁琐，我经验有限，希望可以一起探讨一下

[d3george]

我的想法是与Theme有关的样式都从antd获取变量去设置，而其它样式用tailwind快速设置，混用的话会很混乱

[Kutius]

@TLovers 你是说用到dark前缀的这种情况 举个例子吗？ 比如在暗色模式下，需要调整元素的背景色

[Kutius]

@d3george 是的，最开始我看到您的代码，于是也是尝试遵循这个规则，但是在行内样式设置hover的样式是一件稍微麻烦的事，与此相比使用tailwind hover:就显得方便很多，但是就造成了混乱的样式规则