1.Angular代码

scss代码：

.theme-wrapper {
    --cardBackgroundColor: #0094ff;
    --cardColor: #ffffff;
}

$variables: (
    --cardColor: var(--cardColor),
    --cardBackgroundColor: var(--cardBackgroundColor),
);

@function var($variable) {
    @return map-get($variables, $variable);
}

.card {
    background-color: var(--cardBackgroundColor);
    color: var(--cardColor);
    height: 200px;
    width: 200px;
    margin: 10px auto;
}

html代码：

<div id="theme-wrapper" class="theme-wrapper">
  <div class="card"></div>
</div>

<input #colorSelector type="color">
<button (click)="changeToRed(colorSelector.value)">改变颜色</button>

component代码：

changeToRed(color: any) {
  const themeWrapper = document.getElementById('theme-wrapper');
  themeWrapper.style.setProperty('--cardBackgroundColor', color);
}

以上代码在Chrome中没有问题，但是在IE中却无法正常运行。

2. 支持IE浏览器的写法

引入插件：

npm install css-vars-ponyfill

在angular.json中引入js文件：

"scripts": [
	"node_modules/css-vars-ponyfill/dist/css-vars-ponyfill.js"
]

ts文件如下：

import cssVars from 'css-vars-ponyfill';

export class AppComponent {
  constructor() {
  	// 初始化颜色
    cssVars({
      variables: {
        '--cardBackgroundColor': 'red'
      }
    });
  }

  /**
   * 改变颜色
   * @param color 颜色
   */
  changeToRed(color: any) {
    cssVars({
      variables: {
        '--cardBackgroundColor': color
      }
    });
  }
}

css文件如下：

.card {
    background-color: var(--cardBackgroundColor);
    height: 200px;
    width: 200px;
    margin: 10px auto;
}

html代码如下：

<div class="card"></div>

<input #colorSelector type="color">
<button (click)="changeToRed(colorSelector.value)">改变颜色</button>

3. 在IE中显示颜色选择器

<input type="color">默认在IE中是无法显示的，如需显示，可参考以下网址：
https://www.npmjs.com/package/jquery-colpick