您在运行时能够读取的唯一样式变量是CSS custom properties。
中央支助组/中央支助组：

:root {
   --foo-bar: red;
}

联合秘书处/技术秘书处：

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get red

正如@matthieu-riegler所指出的，你需要的是CSS自定义属性，如果你只需要CSS中的值，一种方法是让组件的用户直接用元素的自定义属性设置颜色（例如<my-component style="--color: #003366"></my-component>），然后你就可以在CSS中使用它了：

.element {
  background-color: var(--color);
}

如果你还需要JS中的值（或者发现在元素上设置一个属性/特性更好，不管什么原因），那么你也可以反过来，而不是在CSS中定义颜色并从JS中读取：

import { Component, State, Host } from '@stencil/core';

export class MyComponent {
  @State() color = 'red';

  render() {
    return (
        <Host style={{'--color': this.color}}>
            <div>Hello, World!</div>
        </Host>
    );
  }
}

注：
1.我用@State()修饰了color，使其值具有React性（即，每当color的值发生变化时，就会调用render()函数）。
1.我使用<Host>功能组件设置主机元素的属性（在本例中为<my-component>）。
1.我在宿主元素上定义了一个CSS自定义属性，你也可以把它应用到子元素上。