Question 43841 in Html Question posted in
Some basic documentation can be found here.

why is the dark mode transition covering the whole text? – Html

enter image description hereIm facing a problem with a transition from light mode to dark mode. In JavaScript after the else the variables cover all of my HTML text that is inside a flexbox and not the body (i think that this might be the problem but I dont know how to solve it.

JavaScript

const toggle = document.getElementById('toggleDark');
const body = document.querySelector('body');

toggle.addEventListener('click', function(){
    this.classList.toggle('bi-moon');
    if(this.classList.toggle('bi-brightness-high-fill')){
        body.style.background = 'white';
        body.style.color = 'black';
        body.style.transition = '2s';
    }else{
        body.style.background = 'black';
        body.style.color = 'white';
        body.style.transition = '2s';
    }
});

HTML

<!DOCTYPE html>
<html lang="it">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8">
    <title>home site</title> 
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>

<body>

  
</body>
    
<div class="top-container">
  <span class="scrittaSu"><h1><span class="greg">GREG'S</span> PORTFOLIO</h1></span>
  <span class="scrittaGiu"><p>Home.</p></span>
</div>


<header> 
        <span><li><a class="active" href="http://127.0.0.1:5500/index.html" target="_blank">HOME</a><li></span>
        <li><a href="http://127.0.0.1:5500/portfolio.html" target="_blank" font="arial" >PORTFOLIO</a></li>
        <li><a href="http://127.0.0.1:5500/aboutme.html" target="_blank" >ABOUT ME</a></li>
        <i class="bi bi-brightness-high-fill" id="toggleDark"></i>
        </header>


        
    <div class="flex-container"> <!--beijvbihvbsdakjvbalksjvb-->
      <div class="flex-left">
        <span class="contentTop"><h2>random text</h2><span><br>
          <span class="contentBottom"><p>random text
             <br>
         random text

enter image description here

I expected the whole text to transfer into darkmode, but just the background did. I think its because the text isnt included in body.style.color = 'white';.

Really dont know wha to do. thank you

Tags:

2

Answers


  1. 0

    there is a better way to add dark/light modes to your website, for example:

    Add in CSS

        :root {
  --background: #f2f2f2;
  --card: #bfbfbf;
  --card-hover: #22303c;
  --secondary-card-hover: #1c3142;
  --main-text-color: #000;
  --secondary-text-color: #8899a6;
  --link-hover: #fd8f8f;
}
.dark-theme {
  --background: #15202b;
  --card: #192734;
  --card-hover: #22303c;
  --secondary-card-hover: #22303c;
  --secondary-text-color: #8899a6;
  --main-text-color: #fff;
  --link-hover: #2a9ec9;
}

    js:

    const themeIcon = document.querySelector(".header nav .fa-regular"); 
themeIcon.addEventListener("click", () => {
   document.body.classList.toggle("dark-theme");
   //add code here to change themIcon in each mode
})
    Login or Signup to reply.
  2. 0

    every html file is like this

    <html>
   <head></head>
   <body></body>
</html>

    and every html element that appears in your website should be in body tag
    now you can fix your code by yourself!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search