本文介绍了如何在Angular6项目中实现场景切换，包括light和dark两种主题。通过在body上设置data-theme-style属性来控制样式，利用SCSS创建mixin处理背景色和字体颜色等。在组件中监听按钮事件切换主题，并解决组件样式隔离问题，确保样式在组件内也能生效。
分配了个给现有angular6项目实现主题切换的效果，实现light dark明暗两种显示效果，我使用scss css预处理器方便开发。
效果(只截了一点点)：
切换样式 就是 实现css 的 变化，主要思路是通过在body 上控制自定义属性的值实现样式的控制，在body上 添加 data-theme-style=”dark”, 像这样：
<body data-theme-style="dark">
<app-root></app-root>
</body>我们通过data-theme-style的值 来控制样式，本项目中 值有 light,dark 分别代表明暗两套主题
首先把切换主题 需要变化的 样式 抽离出来 定义成mixin，如：背景颜色，字体颜色，阴影，边框等，，
这里以背景颜色 和 字体颜色举例：
@mixin mixin-bg-color($dark-color,$light-color){
[data-theme-style="dark"] & {
background-color: $dark-color;
}
[data-theme-style="light"] & {
background-color:
最低0.47元/天 解锁文章
扫一扫
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
