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