如何通过vmware清晰度动态切换主题 [英] How to dynamically switch theme with vmware clarity
问题描述
Vmware Clarity 0.10.16刚刚发布了新的深色主题.太好了！
Vmware Clarity 0.10.16 just released the new dark theme. This is great!
他们描述了如何添加新主题，但没有讨论在页面内动态更改主题的可能性.是因为它不可行吗?
They described how to add that new theme, but nothing about the possibility to dynamically change it inside the page. Is it because it is not doable?
如果是的话，我该如何使用Angular 4+?是否有任何网站可以帮助我解释如何实现这一目标?
If it is, how can I do it with Angular 4+? Any site that could help me explaining how to realize that?
提前谢谢！
推荐答案
Clarity现在随附用于浅色和深色主题的样式表.我们在此处同时使用 angular-cli 记录了如何使用它们code>或 webpack 构建配置.这意味着一旦构建了应用程序，便只有它具有样式.
Clarity now ships with stylesheets for both light and dark themes. We document how to consume them here with both angular-cli or webpack build configurations. That means that once the app is built, that is only style it has.
我对如何实现在两者之间切换的主题切换器有一些想法.这是一个大概的主意，我可以从以下地方开始创建我的原型:
I have some ideas about how to implement a theme switcher for toggling between the two. Here is a rough idea I might start my prototype with:
- 构建没有主题css文件(根本没有清晰样式)的应用程序
- 将两个css文件复制到资产文件夹(在构建过程中)
- 在
< head>中写一个指令或组件，使其可以使用src的src的 - 将两个路径
/path/to/light.css和/path/to/dark.css存储在服务中，以便应用程序可以传递活动主题值并在需要时对其进行修改. - 将服务添加到我们想让用户更新主题的应用程序组件中.
@Input .- Build the app without either of the theme css files (no clarity style at all)
- Copy both css files to the assets folder (during the build)
- Write a directive or component that can take an
@Inputof the the src for a stylesheet in the<head> - Store the both paths
/path/to/light.cssand/path/to/dark.cssin a service so the app could pass the active theme value around and modify it when needed. - Add the service to the app components where we want to let users update the theme.
这会给您一些有关应用程序的想法吗?
Does this give you some ideas for your app?
在我制作完原型之后，我将在这里更新，以便您可以实际使用它并找到源代码.
I'll update here after I have a prototype working so you can see it in action and find the source code.
这篇关于如何通过vmware清晰度动态切换主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
