鍍金池/ 問答/HTML/ antd官網(wǎng)底部的color picker切換主題是怎么實(shí)現(xiàn)的？

antd官網(wǎng)底部的color picker切換主題是怎么實(shí)現(xiàn)的？

最近在研究antd一鍵切換主題的功能，但是官網(wǎng)定制主題的方案是通過less-loader的modifyVars修改配色，只能在編譯時(shí)使用。

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: {
      "@primary-color": "#1DA57A",
    },
  })(config, env);
  return config;
};

但是我發(fā)現(xiàn)官網(wǎng)底部的color picker能夠?qū)崿F(xiàn)切換主色的功能

請(qǐng)問這個(gè)功能是怎么實(shí)現(xiàn)的？

回答
編輯回答
笨尐豬

哈哈哈哈前兩天剛看過這個(gè)，這么冷門的問題居然還有其他人好奇。

它在網(wǎng)頁里放了一個(gè) color.less，里面寫有所有跟顏色有關(guān)的樣式。位于其他所有樣式表的后面，以便覆蓋樣式。
unknown.png

同時(shí)它引入了 LESS.js。
每次 colorpicker 選了顏色的時(shí)候，會(huì)調(diào)用 less.modifyVars()，這時(shí)候 LESS 就會(huì)重新編譯 color.less，新的顏色也就應(yīng)用上了。

希望對(duì)你有幫助

2017年4月24日 13:31