(九)主題切換

增加設定彈框，切換的主題主要有兩個：系統的主題，和編輯器的主題。

系統主題

系統主題顏色切換主要是通過修改覆蓋css樣式來達到切換的目的；Muse-UI提供有一個切換主題的方法，我們通過設定她可以直接使用。

import theme from 'muse-ui/lib/theme';
theme.use('dark');
複製程式碼

但是內建只有兩種型別，我們可以自定義其他的樣式：

import theme from 'muse-ui/lib/theme';
theme.add('teal', {
  primary: '#009688',
  secondary: '#ff4081',
  success: '#4caf50',
  warning: '#ffeb3b',
}, 'light');
theme.use('teal');
複製程式碼

也可以通過addCreateTheme實現樣式擴充套件。

這裡我定義了8中樣式，如下：

let list = [
  { name: "green", color: "#2e7d32" },
  { name: "cyan", color: "#006064" },
  { name: "blue", color: "#01579b" },
  { name: "indigo", color: "#3f51b5" },
  { name: "pink", color: "#880e4f" },
  { name: "purple", color: "#6a1b9a" },
  { name: "brown", color: "#795548" },
  { name: "grey", color: "#607d8b" }
];
list.forEach(i => {
  theme.add(
    i.name,
    { primary: i.color, text: { secondary: i.color } },
    "light"
  );
});
複製程式碼

並且擴充套件了一些樣式,你也可以覆蓋muse-ui的樣式。

// 主題樣式擴充套件
theme.addCreateTheme(theme => {
  return `
  .mu-item-action>.mu-secondary-text-color,
  .mu-option.is-selected .mu-item,
  .mu-checkbox-checked,
  .mu-input__focus,
  .mu-form-item__focus {
    color: ${theme.primary};
  }
  .mu-primary-boder{
      border:1px solid ${theme.primary};
      border-radius:3px;
  }
  .mu-chip.mu-primary-color,
  #editor .add-image-link-wrapper .add-image-link .op-btn.sure{
      background:${theme.primary};
  }
  .mu-circle-spinner{
    border-color:${theme.primary};
  }
  `;
});
複製程式碼

然後在設定頁面通過theme.use();方法來切換樣式即可。

編輯器主題

mavonEditor提供了一個codeStyle配置，我可以通過修改這個值，達到修改程式碼樣式的目的： 主要支援的樣式列表

注： 可通過vux來管理這兩個主題的值。