Html text color change on click-CodePudding

So I have a function where you click a button and it makes the background black but then you cant see the text because the text color is black as well so is there a way I could change all of the text color in body when I make the background black?

it needs to be in html

here is my website that im making it on https://roachbois.api.stdlib.com/website@dev/roachbois/

CodePudding user response：

hello you can do it with javascript by changing text color

function changeColorBackground(color) {
document.body.style.background = color;
}
            
function black_Run() {
changeColorBackground('black');
document.body.style.color = "white"
}
    
function grey_Run() {
changeColorBackground('grey');
}

function white_Run() {
changeColorBackground('white');
document.body.style.color = "black"

}

<html lang=en>
<head>
  <meta property="og:title" content="roachbot" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://roachbois.api.stdlib.com/website@dev/roachbois/" />
  <meta property="og:image" content="https://lh3.googleusercontent.com/a-/AOh14Gjyff-ZACROad6X4ZIZzzp9Y2bgANXHkoV6yXjVYg=s42-p-k-rw-no" />
  <meta property="og:description" content="Check out Roachbot! A auto Discord bot to moderate your Discord server better." />
  <meta name="theme-color" content="#FF0000">
  <meta name="twitter:card" content="summary_large_image">
  <style>
.align {
    text-align: center !important;
}
  </style>
</head>
<body>

<button class="align" onclick = "grey_Run()"> 
Click here for dark mode
</button>

<button class="align" onclick = "black_Run()"> 
Click here for dark dark mode
</button>

<button class="align" onclick = "white_Run()"> 
Click here for light mode
</button>
<p class="align" >hello</p>
</body>
</html>

CodePudding user response：

Just as you wrote the following function:

function changeColorBackground(color) {
document.body.style.background = color;
}

you could write a new function like this:

function changeColorText(color) {
document.body.style.color = color;
}

Alternatively you could also create a CSS class for each of your modes where you can add all your styles into. This would help when more content is added which needs more specific styles for each mode. Something like this might help you get started in the right direction:

function toggleDarkMode() {
  let body = document.body;

  if( body.classList.contains('.dark-mode') )
  {
    body.classList.remove('.dark-mode');
  } else {
    body.classList.add('.dark-mode');
  }
}

However, one would maybe have to add a check to see if one of the other modes has already been toggled beforehand, too.

CodePudding user response：

You can set two different classes light and dark and style all of your HTML elements for each theme and then with some simple javascript switch between classes on click of the button.

This method prevents you from writing the CSS on the Javascript for each HTML tag or element. And making two CSS classes (light and dark) will help you a lot by reusing lots of styles. So it seems like a longer or harder method, but if you have to change the style of multiple elements, I think it's the best way.

HTML:

<div id="container" class="light">
  <h1 class="light">Title</h1>
  <p class="light">This could be your text</p>
  <button class="light" id="switchModeButton">Change to dark mode</button>
</div>

CSS:

body{
  margin: 0;
  padding: 0;
}

#container{
  padding: 1rem 1rem;
}

button#switchModeButton {
  border: none;
  padding: .3rem;
  cursor: pointer;
}

h1.light{
  color: gray;
}

p.light{
  color: gray;
}

button.light{
  background-color: black;
  color: white;
}

h1.dark{
  color: red;
}

p.dark{
  color: white;
}

button.dark{
  background-color: white;
  color: black;
}

#container.dark{
  background-color: black;
}

Javascript:

// Sets the current mode to light by default
let currentMode = "light";

let switchModeButton = document.querySelector('#switchModeButton');
switchModeButton.addEventListener('click', switchMode);

// Function to switch between modes
function switchMode(){
    // Gets all the elements with a theme class (dark/light)
    let allElements = document.querySelectorAll(`.${currentMode}`);
    
    // If the current mode is light, it will switch to dark and viceversa
    if(currentMode === "light"){
    allElements.forEach(element => {
        element.classList.remove(currentMode);
      element.classList.add("dark");
    });
    currentMode = "dark";
    switchModeButton.innerText = "Change to light mode";
  } else {
    allElements.forEach(element => {
        element.classList.remove(currentMode);
      element.classList.add("light");
    });
    currentMode = "light";
    switchModeButton.innerText = "Change to dark mode";
  }
}

If you want to see how it works, here it's an example I've made