angular - 如何以编程方式在Ionic的variables.scss中设置变量？

Question

Ionic 附带了一个variables.scss 文件，您可以在其中设置不同的样式变量，例如原色等。

有没有办法可以以编程方式更改此处的变量？

$colors: (
  primary: #ffbb00,
  secondary: #32db64,
  danger: #f53d3d
);

例如:将原色更改为颜色选择器的结果

Answer 1

所以我很好奇，四处寻找是否能够找到解决方案，所以这就是我得到的:

您无法更改 SASS 变量，因为它已编译并转换为 css，因此您使用属性 color="your Color Name" 的任何标签将在构建过程中进行预处理并变成大量background-color和其他东西。

所以我开始寻找使用 css variables使用 SASS 变量，类似于

:root {
  --modified-color: #333;
}
/*Declaring it here \/ or inside :root */
$colors: (
  primary: --modified-color,
  secondary: #32db64,
  danger: #f53d3d
);

但无法实现我想要的，或者我不知道如何正确地做到这一点。使用变量也许你可以做我的下一个想法中的事情，但以更简单的方式。

所以我想“也许有一个解决方法”，然后我想到了一些事情:

• 您可以创建一个类，我们将其命名为 .dynamic-bg-color .
• 最初将其设置为您想要的颜色，比如说 .dynamic-bg-color: { background-color: #333} .
• 将该类赋予您想要更改的任何组件，例如 <ion-item>或<ion-toolbar>或<button> .
• 将此颜色作为字符串保存在某个地方，例如 localStorage、NativeStorage 等 ( this.storage.set('dynamic', '#333') )；

• 当用户选择新颜色时，您将覆盖存储中的旧颜色并更改您的类的颜色:

  public updateColor = (pickedColor) => { const color: string = pickedColor; // I'M ASSUMING THE PICKER RETURNS IT AS A STRING LIKE '#333333' let myTags = document.getElementsByClassName('dynamic-bg-color'); for(i=0; i < myTags.length; i++) { myTags [i].style.backgroundColor = color; // UPDATE ANYTHING ELSE YOU WANT } }

可能您每次进入新页面时都需要更新，因为它会生成该类的更新标签，因此在 ionViewWillEnter 上放置一个代码，这样每次他或她进入或返回该页面时都会更新颜色.

还没尝试过，但值得一试。如果您尝试此操作，请告诉我它是否有效。

希望这有帮助:D