关于Antd切换背景色以及主题色的思考

小图图
2,102 阅读2分钟

我正在参加「掘金·启航计划」

自我感觉 如果你的应用支持暗色模式以及主题色的切换，那你应用的B格嗖的一下就升去了

antd并不是能很好的支持这两种能力 今天就来聊一聊如何实现

一、 如果是不使用UI组件库如何实现

如果不使用ui库那真是老简单了,可以直接使用css变量var

  1. 我们先create一个文件夹，里边放各种背景主题色的文件

image.png

  1. 文件里写点啥呢,
  • dark.scss
html[theme='dark']{
  --color-bg: #1b1c21,
  --color-border: hsla(0, 0%, 100%, 0.1);
  --color-text: rgba(241, 241, 244, 0.9);
  ....
}
  • default.scss
html[theme='default']{
  --color-bg: #fff,
  --color-border: hsla(230, 90%, 11%, 0.12);
  --color-text: #232429;
  ....
}

把这两个文件引入到你的全局样式 文件中 @import '@/theme/dark.scss';

  1. 有了这两个文件

  • 我们直接去给html标签 setAttribute 添加一个属性 theme='dark'

  • 就这么简单，这不就直接完活了么

  • 至于如何切换 这个属性 那不是手拿把掐儿嘛

  1. 如何使用：把你所有用到颜色的地方都换成var
 .nav{
    background: var(--color-bg);
 }
  1. 主题色同理

html[primary-color='blue'] 6. 如果你喜欢用less变量那你也可以在用scss 包一层

eg：@colorBg: var(--color-bg);

.nav{ background: @colorBg; }

二、使用了antd ui库

使用了antd ui库应该如何实现主题切换呢？

antd 官方给了一些方案但是宽容度也太低了点 并不能随心所欲

  1. 我们先去antd的源码里找一个样式文件 antd/dist/antd.variable.css

image.png

这里antd处理了把主题色都处理成了变量

  1. 我们可以用这个命令，把所有的 --ant 替换成 --custom
lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

把生成的文件引入到项目中，我们就可以用自己定义颜色，把antd的覆盖掉了

当然这样做会导致css文件无法按需引入了，好在这个文件大包后 只有三四百k 还可以接受吧！ image.png

  1. 前面的步骤做完以后，我们还需将antd的dom里面使用的变量换成--custom开头

    antd 也提供了方法

<ConfigProvider prefixCls="custom"> 
  <MyApp /> 
</ConfigProvider>
  1. 借下来一个苦活 因为antd 没有吧背景色处理成变量，我们需要在modified.css文件里把所有被背景色全局替换成 我们定义的变量，替换后可能我们无法让每次个颜色都很好看，这可可以在以后的开发中慢慢替换，慢慢更改
  2. 如果有更好的方法大佬可以指点我一二

拜拜嘞您嘞！

avatar
文章
阅读
粉丝