JavaScript DOM style.color property not working-CodePudding

My electron app has a theme switcher button that simply fetches the container element, changes its background color, and changes the text color using the style.color property. However, the text colour property is not switching correctly. I've tried using a specific text element to change the color property on, but that doesn't work either, so it must be the DOM in JavaScript. Does anyone know how to change the text color using DOM?

I've tried using a specific text element to change the color property on, but that doesn't work either, so it must be the DOM in JavaScript. Does anyone know how to change the text color using DOM?

function themechange() {
  var lightBg = '#E5C687';
  var lightText = '#121619';
  let container = document.getElementById("container");
  container.style.backgroundColor = lightBg;
  document.getElementById('title').style.color = lightText; 
}

CodePudding user response：

Works fine, #121619 is just almost black

document.querySelector('button').addEventListener('click', themechange)

function themechange() {
  var lightBg = '#E5C687';
  var lightText = 'red'; // '#121619';
  let container = document.getElementById("container");
  container.style.backgroundColor = lightBg;
  document.getElementById('title').style.color = lightText; 
}

<div id="container">
  <h1 id="title">Title</h1>
  <button>change</button>
</div>

CodePudding user response：

It is working fine .your colour code is same as default colour that's why you can't identify the change

function themechange() {
  var lightBg = '#E5C687';
  var lightText = 'red';
  let container = document.getElementById("container");
  container.style.backgroundColor = lightBg;
  document.getElementById('title').style.color = lightText;

}

<div id='container'>container</div>
<div id='title'>title</div>

<button onclick='themechange()'>change</button>

CodePudding user response：

If you want to switch between two styles : Consider to using toggle or this solution...

        let lightBg = "#E5C687";
        let lightText = "#aa0000";
        let darkBg = "#00ff00";
        let darkText = "#00ccff";
        let switcher = false;
        let container = null;
        let doc = null;
        let change = null;
        document.addEventListener("DOMContentLoaded", onDomContentLoaded);
        
        function onDomContentLoaded(e){
            container = document.getElementById("container");
            doc = document.getElementById("title");
            change = document.getElementById("changeButton");
            change.addEventListener("click",themechange);
            themechange();
        }
        function themechange(e){
            if(switcher===true){
                doc.style.color = lightText;
                container.style.backgroundColor = lightBg;
                switcher = !switcher;
            }
            else{
                doc.style.color = darkText;
                container.style.backgroundColor = darkBg;
                switcher = !switcher;
            }
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 80vh;
        }

    <div id="container">container</div>
    <div id="title">title</div>
    <button id = "changeButton">change</button>