reactjs - 如何在前端显示主题对象的值（例如 #141414）与令牌名称（例如 bgPrimary）？

Question

我已经使用 theme.js 文件利用情感和样式系统对我的网站进行了样式设置，并希望在前端显示值（例如 #141414）与令牌名称（例如 bgPrimary）。

显然，当我在实践中使用令牌时，我的网站背景是正确的值，但我也想在前端展示令牌名称和值（出于文档目的）。

我经常使用它的一个例子是这样的：

background-color: ${props => props.theme.colors.bgPrimary)

但是，如果我想在 Text 组件的前端显示 bgPrimary 的值，如下所示：

<Text value={___} />

我如何在不实际硬编码 HEX 值的情况下返回值 #141414？

以下是主题文件中颜色对象当前的外观：

const colors = {
  accent: '#8548FF',
  actionPrimary: '#12A55C',
  actionPrimaryInteractive: '#0C6E3D',
  actionSecondary: '#292929',
  actionSecondaryInteractive: '#1F1F1F',
  bgPrimary: '#141414',
  bgSecondary: '#0A0A0A',
  contentPrimary: '#F5F5F5',
  contentSecondary: '#8F8F8F',
  modes: {
    light: {
      accent: '#691FFF',
      actionPrimary: '#16CA70',
      actionPrimaryInteractive: '#109351',
      actionSecondary: '#E0E0E0',
      actionSecondaryInteractive: '#CCCCCC',
      bgPrimary: '#EBEBEB',
      bgSecondary: '#F5F5F5',
      contentPrimary: '#0A0A0A',
      contentSecondary: '#707070',
    },
  }
}

如您所见，我有两种颜色模式，并且 bgPrimary 根据您设置的模式而有所不同。这就是为什么从主题中提取价值而不是硬编码很重要的原因。