前言

在我们的开发中，我们可能会看到，在某些系统或某些应用上会有一个主题切换的功能。点击不同的主题，整个应用或系统样式会发生相应的改变，那他是怎么实现的呢？接下来让我们来看一看。

Theme 层

• 首先必不可少的是，我们需要根据自己定制的主题，书写相映的 scss 文件，放在 theme 文件夹下。

• 当然每个主题文件夹的类名尽量语义化,开头的类名尽量和主题相关。如下：

// bule.scss.theme-bule{    ...}

 // cool.scss.theme-cool {    ...}

• 然后在 theme/index.scss 文件下引入这些文件。

// white@import './white.scss';
//dark@import './dark.scss';
// star@import './star.scss';
...
//cool@import './cool.scss';

• 接着在 main.js 文件中应用。

切换主题

• 做了这么多准备工作。接下来我们就要做的事，自由切换主题。还记得我们刚才书写的。不同主题的类名吗？对，没错，接下来要做的就是通过改变类名来达到控制不同的主题样式。

• 我们可以在空区内文件夹下，导出一个方法，设置相应的类名。

/** * 设置主题 */export const setTheme = (name) => {  document.body.className = name;}

• 剩下的我们就可以通过单选框的形式，让用户自定义，选择不同的主题。然后通过方法来改变类名。当然，我们还可以通过加上 storage 的形式，把用户的选择的主题存储下来，这样每次进来的时候，就会保存原来选择的主题了。

好，今天就到这里了。Bye!