使用自定义类进行 vmware 清晰深色主题

Question

我正在使用深色主题在vmware清晰的明暗主题之间切换。

但问题是深色主题无法应用于我的自定义 css 类，这是显而易见的。

例如。我有一个设置内容背景的自定义类：

.custom-class { 背景：白色； }

但是当应用深色主题时，我希望背景会发生变化。但我不确定我能做到什么。

Stackblitz 试用：https://stackblitz.com/edit/clarity-theme-switcher-9mjqdm

对于解决方法，我尝试从clearance.css 文件中找到一个现有的类，该类具有基于主题（例如卡片）的不同背景，但它们中的大多数都是额外的css 属性，它会扭曲我的UI。

此外，bg-faded、bg-primary 等 bg 类也没有相应的深色主题。任何人都可以帮我解决这个问题。

Answer 1

听起来您正在使用 Clarity（浅色/深色）提供的两个样式表之间进行切换。我们使用自定义属性（css 变量）从同一个 css 生成这两个主题，但它最初只是 scss 变量。

您可以以类似的方式为应用程序完成此操作。例如 - 为您的自定义类生成浅色/深色样式表。将white 转换为$custom-class-background 并生成两个样式表（一个用于浅色$custom-class-background:white，一个用于深色$custom-class-background:black。

然后，应用程序可以在执行 Clarity 主题时切换这些样式表。