7

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

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

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

提前致谢！

4

4 回答 4

5

Clarity 现在附带了浅色和深色主题的样式表。我们在此处记录了如何使用两者angular-cli或webpack构建配置来使用它们。这意味着一旦构建了应用程序，这就是它唯一的风格。

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

  1. 在没有任何主题 css 文件的情况下构建应用程序（根本没有清晰的样式）
  2. 将两个 css 文件复制到 assets 文件夹（在构建期间）
  3. 编写一个指令或组件，它可以将@Inputsrc 中的一个样式表用于<head>
  4. 将这两个路径存储在服务中/path/to/light.css，/path/to/dark.css以便应用程序可以传递活动主题值并在需要时对其进行修改。
  5. 将服务添加到我们希望让用户更新主题的应用程序组件中。

这是否为您的应用程序提供了一些想法？

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

于 2017-12-02T01:53:56.853 回答
2

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

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

于 2017-12-04T18:55:35.853 回答
1

这是我所做的：

  1. 我创建了两个 SCSS 样式表。将它们都加载到angular.json配置中。在样式表 1 中，导入 Clarity默认主题。在样式表 2 中，在 class-selector中导入 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;
    }
}
  1. 在AppComponent构造函数中导入@Inject(DOCUMENT) private document: Document。
  2. 为了启用暗模式，我使用了以下代码：
this.document.documentElement.classList.add('dark-mode');

我曾经localStorage存储用户的偏好。

这样做的好处是：

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

缺点是：

  • 每个 CSS 选择器都将在.dark-mode类选择器中复制。这会使文件大小加倍。我不认为这有什么问题。
  • html-element 样式需要一个小修复。上述示例中包含的解决方案。
于 2020-04-01T15:04:47.307 回答
0

我已经实现了它，在 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]
}
于 2019-03-25T11:28:24.130 回答