search

Home  >  Q&A  >  body text

Linear gradient not working with variables in light/dark themes

I'm working on my personal website - https://cooperativedoilylivedistro.elliott23.repl.co - it has light and dark themes depending on preference. The problem is that when I set the linear gradient to a variable it doesn't work and the whole background turns white. That's HTML, CSS, and JS. If you want to know what's going on, check out the website in your browser. 

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

I've tried making multiple gradients without success. I asked a more experienced friend and he couldn't figure it out either. So I came here instead of going to an AI like ChatGPT. Thank you for your help. Thanks!

P粉190443691P粉190443691242 days ago341

reply all(1)I'll reply

  • P粉548512637

    P粉5485126372024-03-30 12:52:20

    



  
  
  
  Elliott D'Orazio
  
  
  
  
  sssccc




  
    
    
    Elliott D'Orazio
    
    
    Front-End Developer
    
    
    
      
      
      
    
    
  
    
  
    
    This page isn't viewable on mobile, move to a desktop to view it!

    This code can help you solve the linear gradient problem

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

    reply
    0
  • Cancelreply