小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

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

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!