在前端显示CSS变量的值

是通过使用JavaScript来实现的。以下是一个实现的示例：

首先，在CSS中定义一个变量：

:root {
  --primary-color: blue;
}

然后，在HTML中使用这个变量，并且在JavaScript中获取并显示它的值：

<p>Primary color: <span id="primaryColor"></span></p>

const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
document.getElementById('primaryColor').textContent = primaryColor;

上述代码中，getComputedStyle函数用于获取计算后的CSS样式值，getPropertyValue方法用于获取指定CSS属性的值。通过将获取到的值赋给元素的textContent，就可以在前端页面中显示CSS变量的值。

这种方法可以用于在前端页面中动态展示CSS变量的值，例如在用户选择不同的主题色时，通过改变CSS变量的值并更新页面的显示来实现主题切换功能。

腾讯云相关产品和产品介绍链接地址：

• 云服务器CVM：提供稳定可靠的云端计算资源，可灵活配置和管理服务器。
• 云函数SCF：事件驱动的无服务器计算服务，可实现按需运行代码。
• 云原生容器服务TKE：提供高可靠、高扩展的容器化应用管理平台。
• 云数据库CDB：提供高性能、可扩展的关系型数据库服务，支持多种引擎和部署方式。

请注意，以上仅为示例，实际选择产品时应根据具体需求和场景进行评估和选择。