最近公司的电商定制平台的项目继上了国际化，又要搞多主题了，我又练了一把手。
实现了，也就那么回事，但是动手之前的犹豫和无思路也着实让我慌了一逼。
需求分析
看了antd官网上定制主题上的主题介绍，也看了其他博主的一些手段，比较多的还是打包时将某些主题色打包到代码里，运行起来就是这个主题色。
一来这个方式是静态的，通过打包之前去设置一些config，不是最终想要的，二来里面的介绍要么就是借助webpack，要么就是用Umi。巧的是我们项目用clojurescript开发，只用了antd的component，并没有用到Antd Pro后台的所有功能，所以官网的介绍对我来说就是个大大的“0️⃣”
运行时切换主题，显然只在编译时打包less是不够的的，必须是走在浏览器端动态修改less的方案。
有了目的就好办了，对于我一个前端菜鸡来说，分析到这一步已经涨知识了。
下面进入解决方案正题。
美丽的插件
首先迎面走来的，昂首挺胸的美女就是antd-theme-generator，非常感谢，帮大忙了。
核心代码就补贴了，作者太懒，不论是github还是npm库里，这个插件的README.md文件写的有点马虎。
参考了上antd在线换肤定制功能这位仁兄的介绍，我的代码做了如下改动
1. 增加依赖
npm i antd-theme-generator --save
2. 引入文件，根据我的项目修改文件内容
在resources/public下新建less目录，创建2个文件
- main.less
//内容为空就行，防止生成color.less报错
- vars.less
@import "~antd/lib/style/themes/default.less"; //引入antd的变量文件，实现变量的覆盖
@primary-color: #800019;
@link-color: #800019;
@btn-primary-bg:#800019;
//color.less中加入css原生变量：--PC
:root {
--PC: @primary-color;
--BPB: @btn-primary-bg;
}
- 项目根目录新建
color.js文件，内容如下：
const path = require('path');
const { generateTheme, getLessVars } = require('antd-theme-generator');
const options = {
stylesDir: path.join(__dirname, './resources/public/less'), //对应具体位置
antDir: path.join(__dirname, './node_modules/antd'), //对应具体位置
varFile: path.join(__dirname, './resources/public/less/vars.less'), //对应具体位置
mainLessFile: path.join(__dirname, './resources/public/less/main.less'), //对应具体位置
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background'
],
indexFileName: 'index.html',
outputFilePath: path.join(__dirname, './resources/public/css/color.less'),
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
});
- 修改index.html文件，如下
门店定制系统
- 修改
package.json，命令前面增加node color
"scripts": {
"start": "node color && shadow-cljs server",
"build": "node color && shadow-cljs release app"
}
3. 切换测试
项目运行后页面比如页面有个Button的type="primary"那它默认是红色的。
在浏览器的控制台执行如下命令
window.less.modifyVars(
{
'@primary-color': '#722ed1',
'@link-color': '#722ed1',
'@btn-primary-bg': '#722ed1',
}
)
会发现颜色变成了酱紫色。
到此，实现逻辑修改完。
在clojurescript中实现动态切换
页面view部分
在页面布局文件的右上角加了个切换下拉按钮。
;; 语言
(def ^:private theme-array
[{:key "#800019"
:color {:primary-color "#800019"
:name "喜庆红"}}
{:key "#4880FF"
:color {:primary-color "#4880FF"
:name "拂晓蓝"}}
{:key "#faad14"
:color {:primary-color "#faad14"
:name "日 暮"}}
{:key "#52c412"
:color {:primary-color "#52c412"
:name "拂晓绿"}}
{:key "#722ed1"
:color {:primary-color "#722ed1"
:name "酱 紫"}}])
;; 主题菜单
(defn- dropdown-theme []
[:> ant/Menu
{:className "menu"
:onClick (fn [menu]
(let [value (js->clj menu :keywordize-keys true)]
(rf/dispatch [:theme/generate-theme (:key value)])))}
(for [{:keys [key color]} theme-array]
^{:key key}
[:> MenuItem {:key (:primary-color color) :title (:name color)
:style {:background (:primary-color color)
:color "white"
:border-radius "5px"}}
[:span (i18n-str (:name color))]])])
;;在某个view组件里写入内容
[:div {:style {:margin-left 20
:font-size "14px"
:font-family "PingFangSC-Medium,PingFang SC"
:font-weight 500
:color "rgba(0,0,0,1)"}}
[:> ant/Dropdown {:overlay (reagent.core/as-element [dropdown-theme])}
[:div {:className "theme-setting"}
[:span (i18n-str (or (:name (first (get-theme-color @theme))) "主题"))]]]]
切换事件
(ns store-pc.common.theme
(:require
[re-frame.core :as rf]
[kee-frame.core :as kf]
[store-pc.common.storage :as storage]))
(defn- gen-theme [color]
#js{
"@primary-color" color
"@link-color" color
"@btn-primary-bg" color
})
(kf/reg-controller
:theme-controller
{:params (constantly true)
:start [::set-theme-by-local]})
;;如果页面刷新的话从localstorage里获取
(kf/reg-event-fx
::set-theme-by-local
(fn [_ [_ _]]
(when-not @(rf/subscribe [:theme/now-theme])
(rf/dispatch [:theme/generate-theme (storage/get-current-theme)])
)))
(rf/reg-event-fx
:theme/generate-theme
(fn [{:keys [db]} [_ color]]
(js/console.log "设置主题为:" (gen-theme color))
(.modifyVars (.-less js/window ) (gen-theme color))
(storage/set-current-theme color)
{:db (assoc-in db [:global :theme] color)}))
(rf/reg-sub
:theme/now-theme
(fn [db]
(get-in db [:global :theme])))
里面唯一用到的框架外的就是存储localstore和从localstore里拿值，核心代码就两个：
(defn get-local-storage [key]
(.getItem js/localStorage key))
(defn set-local-storage [key value]
(.setItem js/localStorage key value))
效果图
日暮
蓝色
遇到的问题
index.html里一开始引入的less.min.js版本太高，得降成2.7.2才不会报错，否则modifyVars有错误提示- js里的window.less.modifyVars(obj)这句调用在cljs里不会写
- 上面一条解决了，但是modifyVars的参数不会传，后来查到原来是用
#js定义的就是原始js的意思。
更上一层楼
这个选择器选择的颜色比较单调，如果可以，集成一个颜色拾取器更加高大上。
推荐 react-color
这个组件集成也比较简单，
npm install react-color --save
share一下同事用cljs写的公用组件代码：
(ns custom-manage.components.react-color
(:require
[reagent.core :as r]
[re-frame.core :as rf]
[kee-frame.core :as kf]
["react-color" :as react-color]
["antd" :as ant]
[custom-manage.common.utils :as utils]))
(defn select-react-color [{:keys [init-value selected] :as props}]
(let [params (r/atom {:color init-value
:selected-color nil
:display "none"})]
(fn [props]
[:div
[:> ant/Select (merge {:open false
:onFocus (fn []
(if (= (:display @params) "block")
(swap! params assoc-in [:display] "none")
(swap! params assoc-in [:display] "block")))}
(if (or (:init-value props) (:selected-color @params))
{:value (or (:selected-color @params) (:init-value props))}
{:placeholder "请选择颜色"}))]
[:div {:style {:display (:display @params)}}
[:> ant/Card {:title "颜色拾取器"
:size "small"
:extra (r/as-element
[:> ant/Button
{:type "primary"
:icon "close"
:size "small"
:on-click #(swap! params assoc-in [:display] "none")
:style {:float "right"}}])
:style {:width "246px"
:height "376px"}}
[:> react-color/SketchPicker {:color (if (:selected-color @params)
(:selected-color @params)
(or (:init-value props) "#fff"))
:onChange (fn [displayColorPicker]
(swap! params assoc-in [:selected-color] (:hex (js->clj displayColorPicker :keywordize-keys true?)))
(when selected (selected (:hex (js->clj displayColorPicker :keywordize-keys true?)))))}]]]])))
组件使用示例
[select-react-color {:init-value "#FFFFFF"
:selected #(utils/set-fields-value form "#FFFFFF")}]
效果如下
颜色拾取器
参考
antd在线换肤定制功能
themeChanger demo