javascript - 如何获取其他主题模式下css变量的值？

Question

:root,[data-bs-theme=light] {  --bs-body-color: #212529;}[data-bs-theme=dark] {  --bs-body-color: #dee2e6;}

上面是bootstrap.css的部分代码。

const body = document.bodyconst getRealColor = () => {  return window.getComputedStyle(body).getPropertyValue('--bs-body-color')}console.log(getRealColor())

上面的js代码，目前是可以获取到当前主题模式下的颜色值。
请问如何在不改变页面颜色模式的情况下，通过js获取到其他主题模式下的css变量的值？

没有做过尝试，希望获取对应js代码

Answer 1

原生 JS 应该没有办法，只能自己手动解析 CSS。

或许你可以手动构建一个看不见的节点，然后把样式赋给它，并且获取它的样式。

Answer 2

解析css提取出来
DEMO

Answer 3

要获取其他主题模式下的CSS变量值，你可以使用JavaScript的window.getComputedStyle()方法来获取元素的计算样式，并从中获取CSS变量的值。但是，由于CSS变量可能在不同主题下具有不同的值，因此你需要先确定要获取哪个主题下的变量值。

以下是一个示例代码，演示如何获取其他主题模式下的CSS变量值：

// 获取当前主题模式下的CSS变量值const currentThemeColor = window.getComputedStyle(body).getPropertyValue('--bs-body-color');console.log('当前主题模式下的颜色值:', currentThemeColor);// 获取其他主题模式下的CSS变量值const darkThemeColor = window.getComputedStyle(document.querySelector('[data-bs-theme="dark"]')).getPropertyValue('--bs-body-color');console.log('暗主题模式下的颜色值:', darkThemeColor);const lightThemeColor = window.getComputedStyle(document.querySelector('[data-bs-theme="light"]')).getPropertyValue('--bs-body-color');console.log('亮主题模式下的颜色值:', lightThemeColor);

在上面的代码中，我们首先使用window.getComputedStyle(body)获取当前主题模式下的CSS变量值。然后，我们使用document.querySelector('[data-bs-theme="dark"]')和document.querySelector('[data-bs-theme="light"]')选择器来选择其他主题模式下的元素，并使用window.getComputedStyle()方法获取它们的计算样式。最后，我们通过调用getPropertyValue('--bs-body-color')来获取对应的CSS变量值。

请注意，为了使代码能够正确运行，你需要确保页面中存在具有相应data-bs-theme属性的元素，并且这些元素已经被渲染到DOM中。另外，你还可以根据需要选择其他主题模式下的元素，并根据需要进行调整。