javascript 线性渐变不适用于亮/暗主题中的变量

ikfrs5lh 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(108)

我正在做我的个人网站-https://coordinatedoilylivedistro.elliott23.repl.co-它有基于偏好的浅色和深色主题。问题是，当我将线性渐变设置为变量时，它不起作用，整个背景变成白色。这是HTML，CSS和JS。如果你想看看发生了什么，请在浏览器中查看网站。

<!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>

: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;
  }
}

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")
})

我试过做多个渐变，但没有成功。我问了我的一个更有经验的朋友，他无法弄清楚。所以我在这里凸轮，而不是去像ChatGPT这样的AI。非常感谢帮助。谢谢！

JavaScript

来源：https://stackoverflow.com/questions/75846111/linear-gradient-not-working-with-variables-in-light-dark-themes

1条答案

按热度按时间

axr492tv1#

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

<head>
  <meta charset="utf-8">
  <meta name="color-scheme" content="light">
  <meta name="viewport" content="width=device-width">
  <title>Elliott D'Orazio</title>
  <link href="./src/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="./src/script.js" defer></script>
</head>

<body class="">

  <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>

这段代码可以帮助你解决线性梯度问题

:root{
  --accent-color-: #4022d3;
   color-scheme: dark light;
  --background-white: white;
  --background-dark: #222;

}
body:not(.dark) {
  --text: black;
  /* background-color: var(--background-white); */
}

body.dark {
  background: var( --background-dark);
  --text: white;
}
html {
  height: 100%;
  width: 100%;

    background-image: linear-gradient(to right, transparent 20%, var(--background-white) 60% ), url('http://www.skrenta.com/images/stackoverflow.jpg');

  font-family: 'Rubik', monospace;
  background-size: cover;
}
/* *{
  outline: 1px red solid;
} */
.split {
  height: 100%;
  width: 80%;
  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;
  }
}

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 线性渐变不适用于亮/暗主题中的变量

1条答案

相关问题

热门标签

最新问答