Catppuccin主题浅色模式下背景伪元素样式不生效问题

我正在开发一个采用Catppuccin主题系统的网站，深色模式（Mocha）运行正常，但浅色模式（Latte）下的背景图片无法正确渲染。
我在默认样式表中使用body::before伪元素展示SVG背景，主题变体（flavor）通过JS设置在<html>标签的data-flavor属性上，可切换四种Catppuccin变体，其中Latte为浅色模式。
Latte样式表中的CSS变量已正确配置且可正常工作，但我尝试覆盖浅色模式下背景伪元素样式的操作未生效。

错误原因 #

核心问题是CSS选择器层级匹配错误：data-flavor属性是挂载在<html>标签上的，但你写的选择器body::before[data-flavor="latte"]试图在body::before伪元素上查找该属性——而伪元素本身并不具备这个属性，因此样式完全无法生效。

修复方案 #

调整选择器逻辑，基于<html>标签的data-flavor属性来定位body::before伪元素，正确的选择器格式为html[data-flavor="latte"] body::before。

修正后的完整代码：

<!DOCTYPE html>
<html data-flavor="mocha">
<head>
<style>
  /* Minimal Catppuccin-style variables */
  html[data-flavor="mocha"] { --base: #1e1e2e; --text: #cdd6f4; }
  html[data-flavor="latte"] { --base: #eff1f5; --text: #4c4f69; }

  body {
    margin: 0;
    background: var(--base);
    color: var(--text);
    font-family: sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  /* Default (dark) background watermark */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url(https://upload.wikimedia.org/wikipedia/commons/0/00/Estradiol.svg) center / cover no-repeat;
    filter: invert(86%) sepia(8%) saturate(900%) hue-rotate(190deg) brightness(105%);
    opacity: 0.05;
    pointer-events: none;
  }

  /* 修正后的浅色模式覆盖样式 */
  html[data-flavor="latte"] body::before {
    filter: invert(1);
    /* 背景图和默认样式一致，可省略重复声明 */
  }
</style>
</head>
<body>
  <div>
    <p>Background watermark should be <strong>light</strong> in Mocha, <strong>dark</strong> in Latte.</p>
    <button onclick="document.documentElement.setAttribute('data-flavor','mocha')">Mocha (dark)</button>
    <button onclick="document.documentElement.setAttribute('data-flavor','latte')">Latte (light)</button>
  </div>
</body>
</html>

额外优化：由于浅色模式下的背景图和默认样式完全相同，可以省略background属性的重复声明，只保留需要修改的filter样式即可。

内容的提问来源于stack exchange，提问作者Doughmination