为颜色离子角度提供自定义名称答案

【问题标题】：provide custom name for color ionic angular为颜色离子角度提供自定义名称
【发布时间】：2021-11-27 04:20:04
【问题描述】：

我是 ionic 和 angular 的新手，所以我试图为一个类提供特定的颜色名称并将其导出到所有应用程序。我已经使用 react 完成了这项工作，但我不确定我们如何使用离子角度：我在 react-native 中实现了这个示例

color.js

export default {
  primary: "#fc5c65",
  secondary: "#4ecdc4",
}

我已经将它用于不同的类，例如

Button.js

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    borderRadius: 25,
  }
})

那么我如何在 ionic angular 中实现这个结构？我有 color.ts 类与

export default {
  primary: '#26316d',
  secondary: '#8995d6',
};

我正在尝试将这些颜色值用于scss 类

header.page.scss
.header {
    display: flex;
    background: #26316d;  //I want to use primary instead of color code here
}

【问题讨论】：

标签： angular typescript ionic-framework sass

【解决方案1】：

您不需要创建.ts 文件，而是可以创建custom.scss 和

custom.scss
    $primary: '#26316d',
    $secondary: '#8995d6',

你可以通过导入任何scss来使用它

@import "./custom.scss";

.header {
    display: flex;
    background: $primary;
}

【讨论】：

【解决方案2】：

接受的答案效果很好，但我将添加一些有关在使用颜色时首选 Ionic 实现的细节。默认调色板在 variables.scss 中定义。如您所见，它使用 CSS 变量来定义颜色、对比度、提示和阴影。稍后这些变量被带有[color] 输入的 Ionic 组件用来定义背景、前景和状态颜色。

通过使用相同的语法，您可以为调色板添加更多颜色：

:root {
  --ion-color-mycolor: #69bb7b;
  --ion-color-mycolor-rgb: 105,187,123;
  --ion-color-mycolor-contrast: #000000;
  --ion-color-mycolor-contrast-rgb: 0,0,0;
  --ion-color-mycolor-shade: #5ca56c;
  --ion-color-mycolor-tint: #78c288;
}

.ion-color-mycolor {
  --ion-color-base: var(--ion-color-mycolor);
  --ion-color-base-rgb: var(--ion-color-mycolor-rgb);
  --ion-color-contrast: var(--ion-color-mycolor-contrast);
  --ion-color-contrast-rgb: var(--ion-color-mycolor-contrast-rgb);
  --ion-color-shade: var(--ion-color-mycolor-shade);
  --ion-color-tint: var(--ion-color-mycolor-tint);
}

一旦你的颜色被声明，你就可以将它用于 Ionic 组件：

<ion-header color="mycolor"></ion-header>

或者直接在你的 (S)CSS 文件中：

.header {
  background: var(--ion-color-mycolor);
  color: var(--ion-color-contrast);
}

Ionic 网站上有一个工具可以生成这些变量： https://ionicframework.com/docs/theming/colors#new-color-creator

【讨论】：