写点什么

CSS 架构之 Theme 层

用户头像
Augus
关注
发布于: 2 小时前
CSS架构之Theme层

前言

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

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!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
CSS架构之Theme层