使用ice-plugin-fusion给icedesign的模板加个主题（theme）

最近一直处于半失业状态，好多年没有更新对前端的理解了，闲来看看前端技术的发展。因为一直是个草台班子，身兼多职东看看西看看，一直没太搞清楚iceworks、ant design， fusion等等一堆阿里系的开源项目。用了半小时用iceworks搭了一个react的模板出来，感觉好像自己突然成了react砖家似的，花了几天时间像猫吃刺猬一样，难以下嘴。总是觉得“ice design pro”没有动态主题配置很不方便。摸索了两天，算是磕磕绊绊的抄出了一个功能。那就仿照这“多语言”设置依葫芦画瓢整一个多主题配置吧。

在路径“\src\layouts\basiclayout\components\header”下找到了index.jsx

import selectlang from '@/components/selectlang';
import selecttheme from '@/components/selecttheme'; //添加一个不存在的组件

        <div classname={styles.headeraction}>

{/*依葫芦画瓢整个标签，来切换主题*/}
          {/*多主题选择*/}
          <selecttheme />
{/*依葫芦画瓢整个标签，来切换主题*/}

          {/* 多语言选择 */}
          <selectlang />

　　然后，照样在“src\components”下把selectlang文件夹拷贝更名为“selecttheme”，然后修改"\src\components\selecttheme\index.jsx"

import react from 'react';
import { select } from '@alifd/next';
import { gettheme, settheme } from '@/utils/theme';

const option = select.option;
const theme_config = {
  '@icedesign/theme': {
    text: '默认主题',
    icon: '',
  },
  '@alifd/theme-ice-green': {
    text: '绿色主题',
    icon: '',
  },
  '@alifd/theme-ice-orange': {
    text: '橙色主题',
    icon: '',
  },
  '@alifd/theme-ice-purple': {
    text: '紫色主题',
    icon: '',
  },
};

function changetheme(key) {
  settheme(key);
}

export default function selecttheme() {
  const selectedtheme = gettheme();
  return (
    <select
      onchange={changetheme}
      defaultvalue={selectedtheme}
      size="small"
      style={{ display: 'flex', alignitems: 'center' }}
    >
      {object.keys(theme_config).map((theme) => {
        return (
          <option value={theme} key={theme}>
            {theme_config[theme].text}
          </option>
        );
      })}
    </select>
  );
}

　　然后拷贝“src\utils\locale.js”改名为"theme.js"

/**
 * 设置当前主题
 * @param {string} ctheme
 */
function settheme(ctheme) {
  if (ctheme === undefined) {
	ctheme = '@icedesign/theme';
  }
  
  if (gettheme() !== ctheme) {
    window.localstorage.setitem('theme', ctheme);
    // 可以在设置的主题包 @icedesign/theme 和 @alifd/theme-ice-purple 之间切换
	window.__changetheme__(ctheme);
  }
}

/**
 * 获取当前主题
 */
function gettheme() {
  if (!window.localstorage.getitem('theme')) {
    window.localstorage.setitem('theme', navigator.theme);
  }
  return localstorage.getitem('theme');
}

export { settheme, gettheme };

　　测试一下，没问题了。总算抄出来一个功能，比较有装逼的成就感了。

 

当然用iceworks的gui还需要改一下"ice.config.js"

  plugins: [
	['ice-plugin-fusion', {
      // 通过数组方式配置多主题包
      themepackage: [{
        name: '@icedesign/theme',
        // 设置默认加载主题，如果不进行设置，默认以最后添加主题包作为默认主题
        default: true,
        // 设置自定义主题颜色，可以在 scss 文件中直接使用该变量，比如： .bg-color { background: $custom-color; }
        themeconfig: {
          'custom-color': '#000',//测试自定义
        },
      }, {
        name: '@alifd/theme-ice-orange',
        themeconfig: {
          'custom-color': '#fff', //测试自定义
        },
      }, {
        name: '@alifd/theme-ice-green',
        themeconfig: {
          'custom-color': '#fff',//测试自定义
        },
      }, {
        name: '@alifd/theme-ice-purple',
        themeconfig: {
          'custom-color': '#fff',//测试自定义
        },
      }],
    }],
    ['ice-plugin-moment-locales', {
      locales: ['zh-cn'],
    }]
  ],

　　

 

剩下的就是用npm把这几个主题引入到工程中了，另外fusion提供了一个可以在线编辑主题的功能，可以访问“fusion”

 

参考材料：

ice主题配置

select选择器