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

Html – The children of an element does not inherit the changed variables' values in the parent element

I want to have the dark mode functionality in CSS. At first, I defined my variables inside the asterisk selector. But when I press the dark mode button (which adds the "dark-mode" class to the "main" element), the "input" element which is the child of "main", won’t inherit the newly changed variables’ values.

My HTML file:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    
</head>

<body>
    <main>
        <input type="button" class="theme-switcher" value="Switch Theme">
        <header class="header">
            <h1>Nice Website</h1>
        </header>
        <footer>
            &copy;All rights reserved.
        </footer>
    </main>
    <script src="./script.js"></script>
</body>

</html>

My CSS file:

    * {
        padding: 0;
        margin: 0;
        --main-background-color: cyan;
        --font-color: black;
        --btn-border: hsl(0, 0%, 0%);
        --btn-color: white;
    }
    
    
    main {
        position: relative;
        height: 100vh;
        width: 100vw;
        background-color: var(--main-background-color);
        color: var(--font-color);
        transition: background-color ease 0.5s, color ease 0.5s;
    }
    
    .dark-mode {
        --main-background-color: black;
        --font-color: rgb(255, 255, 255);
        --btn-border: white;
        --btn-color: rgb(0, 0, 0);
        transition: background-color ease 0.5s, color ease 0.5s;
    }
    
    header {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
    }
    
    footer {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .theme-switcher {
        position: relative;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--btn-color);
        color: var(--font-color);
        border: 1px solid var(--btn-border);
        width: 300px;
        height: 40px;
        cursor: pointer;
    }

My JavaScript file:

    const theme_changer_button = document.querySelector(".theme-switcher")
    const main_element = document.querySelector("main")

    theme_changer_button.addEventListener("click", () => {
        if (main_element.classList.contains("dark-mode")) {
            main_element.classList.remove("dark-mode");
        } else {
            main_element.classList.add("dark-mode")
        }
    })

If I declare my varaibles in :root pseudo element at first, then the problem gets solved. I can’t understand why it does not work with the asterisk selector.

Tags:

2

Answers


  1. 0

    you need to define your properties as global by put them in the css root
    :root {}
    when you switch to dark mode you set those root properties

    I have added 2 divs just for the example

    const theme_changer_button = document.querySelector(".theme-switcher")
const main_element = document.querySelector("main")

theme_changer_button.addEventListener("click", () => {
    if (main_element.classList.contains("dark-mode")) {
        main_element.classList.remove("dark-mode");
    } else {
        main_element.classList.add("dark-mode")
    }
})
    :root {
    --main-background-color: cyan;
    --font-color: black;
    --btn-border: hsl(0, 0%, 0%);
    --btn-color: white;
}

* {
    padding: 0;
    margin: 0;
}

main {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: var(--main-background-color);
    color: var(--font-color);
    transition: background-color ease 0.5s, color ease 0.5s;
}

.dark-mode {
    --main-background-color: black;
    --font-color: rgb(255, 255, 255);
    --btn-border: white;
    --btn-color: rgb(0, 0, 0);
    transition: background-color ease 0.5s, color ease 0.5s;
}

header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
}

footer {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.theme-switcher {
    position: relative;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--btn-color);
    color: var(--font-color);
    border: 1px solid var(--btn-border);
    width: 300px;
    height: 40px;
    cursor: pointer;
}
    <main>
<div>
        <input type="button" class="theme-switcher" value="Switch Theme">
        </div>
        <div class="header">
            <h1>Nice Website</h1>
        </div>
        <footer>
            &copy; All rights reserved.
        </footer>
    </main>
    Login or Signup to reply.
  2. 0

    Because any form’s element like input, select, textarea, button… use browsers styling default values for them, where any CSS inheritance does not apply.
    see also similar
    Or this one

    You may add a CSS class to any inputs on changing reason, the more simple is using a CSS :root element.

    const theme_changer_button = document.querySelector('.theme-switcher');

theme_changer_button.addEventListener('click', () => 
  {
  document.body.classList.toggle('dark-mode');
  })
    * {
  padding                 : 0;
  margin                  : 0;
  }
:root {
  --main-background-color : cyan;
  --font-color            : black;
  --btn-border            : hsl(0, 0%, 0%);
  --btn-color             : white;
  }
.dark-mode {
  --main-background-color : black;
  --font-color            : rgb(255, 255, 255);
  --btn-border            : white;
  --btn-color             : rgb(0, 0, 0);
  }
main {
  position         : relative;
  height           : 100vh;
  width            : 100vw;
  background-color : var(--main-background-color);
  color            : var(--font-color);
  transition       : background-color ease 0.5s, color ease 0.5s;
  }
header {
  position   : absolute;
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%, -50%);
  font-size  : 50px;
  }
footer {
  position   : absolute;
  top        : 65%;
  left       : 50%;
  transform  : translate(-50%, -50%);
  }
.theme-switcher {
  position         : relative;
  top              : 10%;
  left             : 50%;
  transform        : translateX(-50%);
  background-color : var(--btn-color);
  color            : var(--font-color);
  border           : 1px solid var(--btn-border);
  width            : 300px;
  height           : 40px;
  cursor           : pointer;
  z-index          : 10;
  }
    <main>
  <button class="theme-switcher">Switch Theme</button>

  <header class="header">
    <h1>Nice Website</h1>
  </header>
  <footer>
    &copy;All rights reserved.
  </footer>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search