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

2024-02-19

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

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

如果是的话,我该如何使用 Angular 4+ 来做到这一点?有什么网站可以帮助我解释如何实现这一点吗?

提前致谢!


Clarity 现在附带浅色和深色主题的样式表。我们记录了如何使用它们here https://vmware.github.io/clarity/documentation/themes#examplesangular-cli or webpack构建配置。这意味着一旦应用程序构建完成,这就是它唯一的风格。

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

  1. 构建应用程序时不使用任何一个主题 css 文件(根本没有清晰的样式)
  2. 将两个 css 文件复制到资产文件夹(在构建期间)
  3. 编写一个可以接受的指令或组件@Input样式表的 src<head>
  4. 存储两个路径/path/to/light.css and /path/to/dark.css在服务中,以便应用程序可以传递活动主题值并在需要时对其进行修改。
  5. 将服务添加到我们希望用户更新主题的应用程序组件中。

这会给您的应用带来一些想法吗?

原型工作完成后,我将在此处进行更新,以便您可以看到它的运行情况并找到源代码。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何以 vmware 清晰度动态切换主题 的相关文章

  • Angular 中多个相同的异步管道导致多个 http 请求

    在我的角度应用程序中 我使用异步管道多次渲染组件
  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • FakeAsync/tick (Async/whenStable) 与 detectorChanges()

    您能帮我区分这两件事吗 根据我的理解 如果你只使用 observable 你可以使用 detectorChanges 因此 您可以直接更改组件属性或监视服务调用并返回可观察的值 然后调用 detectorChanges 更改将在 html
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • Angular 2可以通过路由参数传递对象吗?

    我可以使用一些建议来解决我面临的这个问题 为了尽可能地向您解释这一点 我创建了一个主要组件 Component selector main component providers FORM PROVIDERS MainService Mai
  • 如何使用深度等于 (Angular 7)

    通过 VS Code 自动导入 import deepEqual require deep equal 不起作用 错误 TS1202 定位时无法使用导入分配 ECMAScript 模块 考虑使用 import as ns from mod
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 如何在 Angular 2 中执行无限动画?

    基本上 我想利用 Angular 中的 web animations api polyfill 当前为 4 来对元素执行无限动画 让我们看一个基本的非角度示例 var ball document getElementById ball ba
  • 使用 Angular 2 的前端“微服务”

    我正在为一些奇怪的情况寻找解决方案 让我们快速浏览一下 angular2 seed 项目 以便我可以更好地解释 https github com mgechev angular2 seed tree master src client ap
  • 找不到“节点”的类型定义文件

    更新 Angular Webpack 和 TypeScript 后出现奇怪的错误 知道我可能会错过什么吗 当我使用 npm start 运行应用程序时 出现以下错误 at loader Cannot find type definition
  • 在 *ngFor 循环内使用 Angular i18n 和 Angular 5

    我想在模板中的 ngFor Loop 内使用动态翻译 如下所示
  • 在具有多级分组的 HTML 表格中显示数据

    我必须通过使用 rowspan 进行分组来显示 HTML 表中的一些数据 下面是预期的 GUI 我有如下所示的 JSON 数据 JSON数据here https jsoneditoronline org id 1014438e5489485
  • 当选项卡索引更改时,mat-tab-group 滚动到页面顶部

    我有奇怪的行为mat tab group在角度材料中 当我更改选项卡索引时 它会将页面滚动到顶部 知道为什么吗 这是角度材料库中的一个已知错误 请参阅here https github com angular material2 issue
  • 如何在 Angular 库中包含图像?

    我创建了一个简单的 Angular 库 我希望我的库也显示图像 问题是 如果我将图像包含在库的模块文件夹中 然后从模块内部引用它 则会收到 404 错误 据我所知 在 Angular 项目中 图像必须放置在 assets 文件夹中 但我确实
  • TypeError:“在严格模式函数或调用它们的参数对象上可能无法访问‘调用者’、‘被调用者’和‘参数’属性”

    每当我尝试从我的解析中调用函数时 我都会收到此错误 TypeError 调用者 被调用者 和 参数 属性可能无法在严格模式函数或调用它们的参数对象上访问我的承诺 这几天工作得很好 现在突然不起作用了 我还尝试通过承诺中的分辨率传递相同的值
  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • Angular 5 - 使用对象进行表单控制

    我目前正在开发一个由 Django 支持的 Angular 应用程序 该应用程序的一部分是它需要显示成员列表 成员数组看起来有点像这样 name John Smith id 3 score set name Jane Doe id 7 sc
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • 在“FormGroup”中预填充输入字段 - Angular2

    我正在使用 Angular2 反应形式 一切正常 直到我想在表单中的字段之一中显示预填充的值 设想 页面上有多个按钮 每个按钮都会打开一个表单 其中的字段如下 Name Email Message 产品代码 gt 此值应根据服务中的每个项目
  • Plesk Windows 部署 Node.js

    我创建了一个以 Node js 作为后端的 Angular 项目 这是服务器文件结构 Home directory httpdocs node hm dist browser folder server folder server js p

随机推荐

  • C# 将 double 转换为 float 错误[重复]

    这个问题在这里已经有答案了 在我的代码中 我有以下内容 其中 realScore 是浮点数 realScore Math Ceiling realScore 但我收到以下错误 无法将类型 double 隐式转换为 float 存在显式转换
  • Sublime Text 3 有集成终端吗?

    我通常使用 WebStorm IDE 进行 Node js 和 FE JavaScript 开发 然而 我正在考虑使用 Sublime Text 3 因为我在蹩脚的旧 Macbook Pro 上的计算能力已经耗尽 而 ST3 在内存和 CP
  • 调用函数时设置列名

    假设我们有一个数字 data framefoo并想要找到每两列的总和 foo lt data frame x 1 5 y 4 8 z 10 14 w 8 4 bar lt combn colnames foo 2 function x fo
  • 詹金斯附件-语法是什么?

    我试图让 Jenkins 将一个或一组文件附加到作业已完成的电子邮件通知中 我不断收到以下错误 发送电子邮件以触发 成功 错误 访问要附加的文件时出错 需要 Ant GLOB 模式 但看到了C p p etc html See Filese
  • 设置多线程调试 (/MTd) 时发生崩溃 (C++)

    在构建动态库 C 时 我们可以选择Windows的多线程调试 MTd 或多线程调试DLL MDd 运行时库 如果我们选择多线程调试 那么创建的动态库将负责库中使用的所有变量的内存分配 因此 以下示例将显示 MDd 设置有效而 MTd 设置失
  • WindowsError:[错误2]系统找不到指定的文件,无法在Python中解析

    我制作了一个 Python 程序 它将清理我下载的 torrent 文件和文件夹中存在的不必要的名称 以便我可以将其上传到我的无限 Google Drive 存储帐户 而无需太多麻烦 然而 它给了我 WindowsError Error 2
  • Spring Security,注销:将参数从/logout传递到/login

    我使用默认的 Spring Security 来处理注销 登录 我有一个控制器方法来处理 login 当我注销时 我看到 Spring Security 将我重定向到app login logout 这个 Spring 创建的参数的存在 有
  • Android Phonegap 滑动类型

    我正在 Android Phonegap 中开发一个应用程序 我需要在我的应用程序中应用 swype 如何申请 任何人都好心指导我 您可以使用 jGestures jQuery 库 http jgestures codeplex com j
  • 核心数据 - 使用谓词过滤一对多关系

    我的核心数据模型中有以下两个实体 Manufacture name other attributes Product name other attributes 我已经设置了一对多关系 Manufacturer manufactures l
  • Postman请求带body表单数据转json

    我和邮递员有问题 For one side I can make this request with the body in form data 但是 当我尝试使用 raw json 中的正文发送相同的请求时 我得到了 我正在尝试通过 An
  • 为什么 javascript 不在加载 Ext.Ajax.Request 的 .php 文件中执行?

    我想通过 ajax 加载 php 文件 该文件在加载时执行 ExtJS 脚本 从而修改 DOM 中已存在的现有 ExtJS 对象 但是 我什至无法从正在加载的页面执行 JavascriptExt Ajax request Firebug N
  • 如何通过代码编程获取设备的 IMEI/ESN 号码但在 android > 6 中

    我的安卓版本是棉花糖6 0 如何以编程方式在 android gt 6 中查找 获取 imei 号码 注意 我在 AndroidManifest xml 文件中添加了 READ PHONE STATE 权限
  • Laravel - 会话返回 null

    我第一次在 Laravel 中使用会话 并且尝试执行多步骤形式 所以我认为使用会话将是一个明智之举 但是下面的代码返回一个空值 我做错了什么 user information name gt request gt name email gt
  • 扩展 CodeIgniter 中的控制器类

    I have class MY Controller extends CI Controller和大配置文件部分的通用逻辑 所以我尝试创建class Profile extends MY Controller正如我所理解的那样 配置文件部分
  • 如何使用自定义元素将子自定义元素包装到 div 中

    我正在尝试创建一个包装器自定义元素 将其子自定义元素包装到 div 中 但子元素没有被包装 相反 一个空的 div 被插入到子元素之前的包装元素中
  • 如何对私有变量进行单元测试?

    考虑一个链表类 我维护 2 个私有变量 1 firstNode 和 2 lastNode 因此 这些变量仅供内部使用 不通过 getter 公开 我想测试操作是否按预期修改这两个变量 例如 如果最后一个节点是重复的 则消除排序链表中的重复应
  • Blade 文件中的 if else 条件(laravel 5.3)

    我想检查一下if else我的刀片文件中的状况 我想检查一下情况 user gt status waiting 如下面给出的代码 输出按我的预期正确返回 但随着我的输出 我发现打印了大括号 我想删除结果中的大括号 我的有什么问题吗if健康
  • 计时器每 5 分钟运行一次

    如何每 5 分钟运行一些函数 示例 我想跑步sendRequest 仅在 14 00 14 05 14 10 等时间 我想用 C 以编程方式完成它 该应用程序是 Windows 服务 Use System Threading Timer h
  • Mockito:模拟对象,不是成员,但内联创建

    我有一个类执行以下操作 public class Transformer public void transform final Car car throws IOException switch car getType case OFFR
  • 如何以 vmware 清晰度动态切换主题

    Vmware Clarity 0 10 16 刚刚发布了新的深色主题 这很棒 他们描述了如何添加新主题 但没有描述在页面内动态更改它的可能性 是因为不可行吗 如果是的话 我该如何使用 Angular 4 来做到这一点 有什么网站可以帮助我解