Javascript CSS样式赢得'；在获取文件之前不更新

预期目标-用户从各种颜色输入中选择不同的颜色，并创建自己的主题。一旦选择了颜色，用户单击下载按钮，并获得他/她选择的颜色生成的CSS文件

问题-我可以下载CSS文件，但是我得到了原始值，尽管将输入更改为不同的颜色

我所做的

正在下载的CSS文件已经存在，与不同元素对应的所有颜色都是通过CSS变量完成的

我正在通过执行以下操作实时更新更改

import { colors } from './colorHelper'

const inputs = [].slice.call(document.querySelectorAll('input[type="color"]'));

const handleThemeUpdate = (colors) => {
  const root = document.querySelector(':root');
  const keys = Object.keys(colors);
  keys.forEach(key => {
    root.style.setProperty(key, colors[key]);
  });
}

inputs.forEach((input) => {
  input.addEventListener('change', (e) => {
    e.preventDefault();
    const cssPropName = `--${e.target.id}`;
    document.styleSheets[2].cssRules[3].style.setProperty(cssPropName, e.target.value);

    handleThemeUpdate({
      [cssPropName]: e.target.value
    });
    console.log(`${cssPropName} is now ${e.target.value}`)
  });
});

然后，我从服务器获取样式表，获取所有CSS变量，并用它们的实际值（十六进制颜色值）替换它们

之后，我得到了返回值（没有变量的新样式表）并将其设置为数据URI

async function updatedStylesheet() {
  const res = await fetch("./prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

  return updated_css;
}

const newStylesheet = updatedStylesheet().then(css => {
 downloadBtn.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(css));
 downloadBtn.setAttribute('download', 'prism-theme.css');
})

我已经在我的HTML中设置了一个下载按钮，我在我的脚本中抓取了它，以便在任何地方都可以使用它<代码>下载BTN

我按下了点火按钮，抓起了新床单

downloadBtn.addEventListener('click', () => {
  newStylesheet();
});

结果

---

我得到样式表的初始颜色值，尽管在页面上的颜色输入中更改了颜色。因此，在我下载该文件之前，CSS文件不会被更新为新的颜色

可以使用PHP将值传递到新页面。假设您选择了所需的颜色，然后单击显示“生成”的按钮，进入“生成页面”

这些值将直接传递到HTML中，您可以从Generate页面下载

当然，如果您了解PHP，这只是一个关于如何解决它的建议

---

（愿意发表评论，但由于声誉原因不能发表评论）

我很感谢您的回复，但我对PHP一无所知，只想得到一个JavaScript的答案。