如何使用vmware clarity动态切换主题
Vmware Clarity 0.10.16刚刚发布了新的dark主题。这太棒了！
他们描述了如何添加新的主题，但没有提到在页面中动态更改它的可能性。是否因为这是不可行的？
如果是，我怎么用Angular 4+来做呢？有没有什么网站可以帮我解释如何实现这一点？
提前感谢！
回答 4
Stack Overflow用户
发布于 2017-12-02 09:53:57
清晰度现在随样式表一起提供，既适用于亮主题也适用于暗主题。我们记录了如何通过angular-cli或webpack构建配置来使用here。这意味着，一旦应用程序构建完成，这就是它唯一的风格。
我有一些关于如何实现在两者之间切换的主题切换器的想法。这是一个粗略的想法，我可能会从我的原型开始：
- 在没有任何一个主题css文件的情况下构建应用程序(根本没有清晰的样式)
- 将两个css文件复制到assets文件夹(在构建期间)
- 编写一个指令或组件，该指令或组件可以获取
<head> - Store中的样式表的src的
@Input，服务中的路径/path/to/light.css和/path/to/dark.css，以便应用程序可以传递活动主题值，并在需要时修改它。 - 将服务添加到我们希望让用户更新主题的应用程序组件中。
这对你的应用有什么启发吗？
在我有一个原型工作后，我会在这里更新，这样你就可以看到它的运行情况，并找到源代码。
Stack Overflow用户
发布于 2017-12-05 02:55:36
我已经建立了一个如何做到这一点的概念证明，但它确实有一些限制。由于一次只能包含一个主题文件，因此要正确呈现主题可能会有一些延迟，因为它发生在角度呈现周期的较晚阶段。只有当浏览器的缓存为空时，这才是一个大问题，因为随后的访问将很快呈现，但这是这里的主要考虑因素。这是一个开始，你也许可以在上面构建一些更健壮的东西。
https://stackblitz.com/edit/clarity-theme-switcher?file=app%2Fapp.component.ts
Stack Overflow用户
发布于 2020-04-01 23:04:47
下面是我所做的：
- 我创建了两个SCSS样式表。将它们都加载到
angular.json配置中。在样式表1中，导入Clarity default主题。在样式表2中，在类选择器中导入Clarity dark主题。像这样：
.dark-mode {
@import "~@clr/ui/src/utils/theme.dark.clarity"; // Dark theme variables
@import '~@clr/ui/src/utils/components.clarity';
// @import third party styling...
// Fix styling HTML-tag.
// node_modules\@clr\ui\src\typography\_typography.clarity.scss
& html {
color: $clr-global-font-color;
font-family: $clr-font;
font-size: $clr-baseline-px;
}
}在导入@Inject(DOCUMENT) private document: Document.
- To启用暗模式的
- 构造函数中，我使用了以下代码：
this.document.documentElement.classList.add('dark-mode');我使用localStorage来存储用户的首选项。
这方面的advantage是：
- 没有stylesheets.
。
- 我不需要调整现有的样式表或替换现有的FOUC
disadvantage为：
- 每个CSS选择器都将在
.dark-mode类选择器中复制。这会使文件大小加倍。我不认为这有什么问题。 - 需要对
html-element样式进行一个小的修复。上述示例中包含的解决方案。
https://stackoverflow.com/questions/47602912
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号