亮色/暗色主题下Linear gradient结合CSS变量失效问题求助

我正在开发个人网站，网站可根据系统偏好切换亮色/暗色主题。但使用CSS变量设置linear-gradient时出现问题：渐变失效，页面背景变为全白。尝试过多种渐变方案均无效，特来寻求帮助。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Elliott D'Orazio</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <meta content="Elliott-D'Orazio" property="og:title" />
  <meta content="my amazing portfolio website" property="og:description" />
  <script src="script.js" defer></script>
</head>

<body>

  <div class="split right">
    <h1>Elliott D'Orazio</h1>
    <h3>Front-End Developer</h3>
    <div class="icons">
      <i class="fa-solid fa-bars fa-2x" style="color: #000000;"></i>
      <i class="fa-solid fa-address-card fa-2x" style="color: #000000;;"></i>
      <i class="fa-solid fa-phone fa-2x" style="color: #000000;"></i>
    </div>
  </div>
  <div class="mobile">
    This page isn't viewable on mobile, move to a desktop to view it!
  </div>
</body>

</html>

CSS代码 #

:root{
  --accent-color-: #4022d3;
}
body:not(.dark) {
  --background: white;
  --text: black;
}

body.dark {
  --background: #222;
  --text: white;
}
html {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, transparent 20%, var(--background) 60% ), url('bd86goc4fhvenj72.jpg');
  font-family: 'Rubik', monospace;
  background-size: cover;
}
/* *{
  outline: 1px red solid;
} */
.split {
  height: 100%;
  width: 40%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
  text-align: center;
  background-color: var(--background);
  color: var(--text);
}
.right {
  right: 0;
  background-color: var(--background);
}
h1{
  font-size: 7.4em;
  font-weight: 800;
}
.icons{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-left: 40%;
  width: 136px;
}
.fa-solid{
  color: var(--text) !important;
}
.fa-solid:hover{
  content: '';
  color: var(--accent-color-) !important;
  cursor: pointer;
}
.mobile{
  display: none;
}
@media screen and (max-width: 678px) {
  body{
    display: none;
  }
  .mobile{
    display: block !important;
    color: #fff;
  }
}

JS代码 #

let dark_prefered = window.matchMedia("(prefers-color-scheme: dark)")
if(dark_prefered.matches) document.body.classList.add("dark")

dark_prefered.addEventListener("change", () => {
  if(dark_prefered.matches) document.body.classList.add("dark")
  else document.body.classList.remove("dark")
})

解决方案 #

核心问题 #

你将--background变量定义在body元素上，但html元素无法继承body的CSS变量，导致linear-gradient中的var(--background)无法被正确解析，最终渐变失效，背景显示为全白。

修复步骤 #

1. 调整变量作用域：将主题变量移到:root下，通过媒体查询直接切换，确保html能访问到变量：

:root{
  --accent-color-: #4022d3;
  --background: white;
  --text: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #222;
    --text: white;
  }
}

2. 简化JS代码：如果仅依赖系统偏好切换主题，上述CSS媒体查询已足够，可移除原有的body类切换逻辑；若需要后续支持手动切换，可保留并调整：

let dark_prefered = window.matchMedia("(prefers-color-scheme: dark)")
// 同步初始状态
document.documentElement.classList.toggle("dark", dark_prefered.matches)

dark_prefered.addEventListener("change", () => {
  document.documentElement.classList.toggle("dark", dark_prefered.matches)
})

3. 修复移动端样式：原代码中body{display: none;}会导致移动端完全看不到内容，调整为仅隐藏内容区块，保留提示文本：

@media screen and (max-width: 678px) {
  .split {
    display: none;
  }
  .mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: var(--text);
    margin: 0;
  }
}

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