如何通过新的调色板更新临时更改 Ionic 8 中组件中颜色变量的值？

Question

在带有 Ionic Framework 的 Angular 应用程序中，我有一个组件，在特定操作中，我需要使默认颜色变量

--ion-background-color

透明，并在特定操作完成时恢复到定义的颜色。在 Ionic 7 中，建议在

theme/variables.scss

文件中定义所有颜色变量。可以通过在所需组件中导入

theme/variables.scss

并在我想要使其透明时更改那里的

--ion-background-color

来更改颜色变量。

组件.scss

@import "{path}/theme/variables.scss";

.transparent-active {
  --background: transparent !important;
  --ion-background-color: transparent !important;
}

组件.ts

enableTransparency = false;

onAction(): void {
   this.enableTransparency = true;
}

onActionFinished(): void {
   this.enableTransparency = false;
}

组件.html

<ion-content [class.transparent-active]="enableTransparency">
</ion-content>

这曾经可以正常工作，没有任何问题。

---

但是，在 Ionic 8 中，他们更新了默认调色板，并建议删除所有颜色变量，除非您需要定义自己的调色板。当您导入 core.scss 和相关的深色主题 SCSS 文件时，浅色和深色主题

 的新颜色变量会自动导入

。如果

theme/variables.scss

文件中定义了任何变量，它们将覆盖默认调色板。

我需要迁移到新的调色板，因此我已从

theme/variables.scss

文件中删除了所有变量。问题是，由于全局变量被删除，因此没有定义的

--ion-background-color

变量可供我在组件内部透明。我在 Ionic 7 中使用的解决方案不起作用。我尝试将

core.scss

和相关的深色主题 SCSS 导入到组件的 SCSS 文件中，看看它是否会导入所需的颜色变量，但它似乎仍然不起作用。我还需要确保当透明度关闭时

--ion-background-color

变量也返回到其原始颜色。

Answer 1

在你的 page.html 中你可以声明一个常用的类：

<ion-content class="enableTransparency">
</ion-content>

并使用您的函数更改 ts 文件中的颜色：

onAction(): void {
   this.enableTransparency = true; // Keep it or not, depending on whether you need it for something else. 

   (<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}

onActionFinished(): void {
   (<HTMLStyleElement>document.querySelector(".enableTransparency")).style.background = "your color";
}