巧妙获取Bootstrap不同主题模式下的CSS变量值，无需改变页面样式
Bootstrap框架支持多种主题模式，每种模式都定义了不同的CSS变量。本文将介绍一种方法，在不影响当前页面主题显示的情况下，获取其他主题模式下的CSS变量值。
Bootstrap的CSS代码片段示例：
:root,
[data-bs-theme=light] {
--bs-body-color: #212529;
}
[data-bs-theme=dark] {
--bs-body-color: #dee2e6;
}
直接使用window.getComputedStyle只能获取当前页面主题的变量值。为了获取其他主题的变量值，我们需要解析CSS代码。
以下JavaScript代码实现了CSS变量的提取：
立即学习“前端免费学习笔记（深入）”；
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']);
这段代码首先定义了一个extractCssVariables函数，使用正则表达式解析CSS文本，提取CSS变量名和值。然后，它使用正则表达式从模拟的Bootstrap CSS文本中提取亮色和暗色主题的CSS代码块，并分别调用extractCssVariables函数获取变量值。最后，它将提取的变量值打印到控制台。 在实际应用中，需要替换模拟的cssText为从实际Bootstrap CSS文件或网络请求获取的CSS文本。
通过这种方法，我们可以方便地获取Bootstrap框架中不同主题模式下的CSS变量值，而无需修改页面当前的主题样式。
