简单css主题换肤

最新推荐文章于 2023-02-11 21:24:50 发布

Be super

最新推荐文章于 2023-02-11 21:24:50 发布

阅读量382

点赞数

分类专栏： js 文章标签： css javascript html

本文链接：https://blog.youkuaiyun.com/weixin_41826895/article/details/120434234

版权

js 专栏收录该内容

2 篇文章

订阅专栏

1、引入主题样式文件

$theme-colors:(primary1: (key:"2D74E7",
		theme-color:#2D74E7,
		menu-color:#155DD1,
		menu-active-color:#2D74E7),
	primary2: (key:"FF8706",
		theme-color:#FF8706,
		menu-color:#F27D00,
		menu-active-color:#FFA544),
	primary3: (key:"768AF5",
		theme-color:#768AF5,
		menu-color:#384FC6,
		menu-active-color:#5B72EE),
	primary4: (key:"01C5ED",
		theme-color:#01C5ED,
		menu-color:#0DA3C3,
		menu-active-color:#00BDE7),
	primary5: (key:"FCA802",
		theme-color:#FCA802,
		menu-color:#222222,
		menu-active-color:#333333));

@each $i in map-keys($theme-colors) {
	.theme-#{map-get(map-get($theme-colors,$i),key)} {
		$--theme-color: map-get(map-get($theme-colors, $i), theme-color);
		$--theme-color-menu: map-get(map-get($theme-colors, $i), menu-color);
		$--theme-color-menu-active: map-get(map-get($theme-colors, $i), menu-active-color);
		
		/*样式根据主题覆盖*/
		.page-container {
			background-color: $--theme-color-menu !important;
		}
	}
}

2、切换主题

      // 自定义样式主题覆盖
      changeCustomCss (theme) {
        document.body.classList = []
        document.body.classList.add(`theme-${theme.split('#')[1]}`)
      },