如何在不改变页面颜色模式的情况下获取Bootstrap框架中其他主题模式下的CSS变量值？

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

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

function extractCssVariables(cssText) {
  const variables = {};
  const regex = /(--[a-zA-Z0-9-]+):\s*([^;]+);/g;
  let match;

  while ((match = regex.exec(cssText)) !== null) {
    variables[match[1]] = match[2].trim();
  }

  return variables;
}

// 模拟从Bootstrap CSS文件中获取CSS文本 (实际应用中需从文件或网络获取)
const cssText = `
:root,
[data-bs-theme=light] {
  --bs-body-color: #212529;
}

[data-bs-theme=dark] {
  --bs-body-color: #dee2e6;
}
`;


const allVariables = extractCssVariables(cssText);

// 使用正则表达式提取不同主题模式下的CSS代码块
const lightThemeCss = cssText.match(/:root,\s*\[data-bs-theme=light\]\s*{[^}]*}/s)[0];
const darkThemeCss = cssText.match(/\[data-bs-theme=dark\]\s*{[^}]*}/s)[0];

const lightThemeVariables = extractCssVariables(lightThemeCss);
const darkThemeVariables = extractCssVariables(darkThemeCss);

console.log('亮色主题变量:', lightThemeVariables);
console.log('暗色主题变量:', darkThemeVariables);
console.log('所有变量:', allVariables);

console.log('亮色主题 --bs-body-color:', lightThemeVariables['--bs-body-color']);
console.log('暗色主题 --bs-body-color:', darkThemeVariables['--bs-body-color']);