Question

Vmware Clarity 0.10.16刚刚发布了新的黑暗主题。这很棒！

他们描述了如何添加新主题，但没有关于在页面内动态更改它的可能性。是因为它不可行吗？

如果是，我如何使用Angular 4+？任何可以帮助我解释如何实现这一点的网站？

提前致谢！

Answer 1

Clarity现在附带了明暗主题的样式表。我们会记录如何使用angular-cli或webpack构建配置来使用它们here。这意味着一旦构建了应用程序，这只是它的风格。

我对如何实现主题切换器以在两者之间切换有一些想法。这是一个粗略的想法，我可能会开始我的原型：

在没有任何主题css文件的情况下构建应用程序（根本没有清晰的风格）
将两个css文件复制到assets文件夹（在构建期间）
在@Input
将两条路径<head>和/path/to/light.css存储在服务中，以便应用可以传递活动主题值并在需要时进行修改。
将服务添加到我们希望用户更新主题的应用组件中。

这能为您的应用提供一些想法吗？

我有一个原型工作后我会在这里更新，这样你就可以看到它的实际效果并找到源代码。

Answer 2

我已经建立了一个概念证明，你如何做到这一点，但它确实有一些局限性。由于您一次只能包含一个主题文件，因此正确的主题渲染可能会有一些延迟，因为它会在Angular渲染周期中稍后发生。当浏览器的缓存为空时，这只会是一件大事，因为随后的访问会很快呈现，但这是一个主要的考虑因素。它是一个开始，你可以建立一个更强大的东西。

https://stackblitz.com/edit/clarity-theme-switcher?file=app%2Fapp.component.ts

Answer 3

这是我所做的：

我创建了两个SCSS样式表。将它们都装入angular.json配置中。在样式表1中，导入Clarity 默认主题。在样式表2中，将Clarity 深色主题导入类选择器内。像这样：

.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;
    }
}

在AppComponent构造函数中，导入@Inject(DOCUMENT) private document: Document。
要启用暗模式，我使用了以下代码：

this.document.documentElement.classList.add('dark-mode');

我使用localStorage来存储用户首选项。

这的优势是：

没有FOUC。
我不需要调整现有样式表或替换现有样式表。

缺点是：

每个CSS选择器都将在.dark-mode类选择器中复制。这会使文件大小增加一倍。我认为这没什么问题。
html元素样式需要小的修正。上面的示例中包含了解决方案。

Answer 4

我已经实现了它，在index.html中添加了一个链接

<link id="theme" rel="stylesheet" href="https://unpkg.com/@clr/ui/clr-ui.min.css" />

然后在您的app.component.ts中

linkRef: HTMLLinkElement;
themes = [
    'https://unpkg.com/@clr/ui/clr-ui.min.css',
    'https://unpkg.com/@clr/ui/clr-ui-dark.min.css'
];
constructor(){
  this.linkRef = document.getElementById('theme') as HTMLLinkElement;
  // you could change here the theme if you have it stored in local storage
  // for example
  // const theme = localStorage.getItem('theme')
  // if(theme) this.linkRef.href = this.themes[parseInt(theme)]
}
setTheme(dark:bool){
  this.linkRef.href = this.themes[dark ? 1 : 0]
}

如何使用vmware清晰度动态切换主题

4 个答案: