How to get anchor to change color when I toggle the body background-color?-CodePudding

I've created a light/dark mode button with an onClick function that runs an element.classList.toggle.

The CSS class I toggle to is connected to document.body and changes the background-color and color.

However, I've struggling to find a way to include the <a> anchor links so that they also toggle to white/black text along with the document.body toggle.

When I use the code below, I can only change the text and background color of the body and text. Not including the anchor links in my HTML file.

How do I set the anchor tags to start as black color text when in light mode, and switch with the onclick function to white color text when the rest of the page turns to dark mode?

function myFunction() {
  let element = document.body;
  element.classList.toggle("dark-mode");
}

body {
  background-color: white;
  color: black;
}

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

<button onclick="myFunction()" id="lightDark">Dark Mode</button>

<a id="contact"  href="mailto: [email protected]">contact</a>
<a id="resume"  href="/abc.pdf" target="_blank">resume</a>

CodePudding user response：

You can use > to select the direct children in css

function myFunction() {
  let element = document.body;
  element.classList.toggle("dark-mode");
}

body {
  background-color: white;
  color: black;
}

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

.dark-mode>a {
  color: #fff;
}

<button onclick="myFunction()" id="lightDark">Dark Mode</button>

<a id="contact"  href="mailto: [email protected]">contact</a>
<a id="resume"  href="/abc.pdf" target="_blank">resume</a>

You can skip > if you intend to select all anchors

function myFunction() {
  let element = document.body;
  element.classList.toggle("dark-mode");
}

body {
  background-color: white;
  color: black;
}

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

.dark-mode a {
  color: #fff;
}

<button onclick="myFunction()" id="lightDark">Dark Mode</button>


<div>
  <a id="contact"  href="mailto: [email protected]">contact</a>
  <a id="resume"  href="/abc.pdf" target="_blank">resume</a>

  <div>

    <a id="contact"  href="mailto: [email protected]">Test 1</a>
    <a id="resume"  href="/abc.pdf" target="_blank">Test 2</a>
  </div>

</div>

CodePudding user response：

Try this

<--- CSS --->

body.dark {
    background-color: #36393f;
    color: #fff;
}

.mode-control input {
    position: absolute;
    opacity: 0;
}

.mode-control span:nth-of-type(2) {
    display: none;
}

.mode-control input:checked span {
    display: none;
}

.mode-control input:checked span span {
    display: inline-block;
}

.mode-control span {
    display: inline-block;
    padding: 0 20px;
    line-height: 30px;
    background-color: #36393f;
    color: #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 18px;
}

<--- HTML --->

<label  style="margin-top: 18px !important;">
    <input type="checkbox" id="mode-btn">
    <span style="cursor: pointer;"><i  style="color: white;"></i></span>
    <span style="cursor: pointer;"><i  style="color: black;"></i></span>
</label>

<-- JS -->

document.getElementById('mode-btn').addEventListener('click', () => {
        document.body.classList.toggle('dark');
        localStorage.setItem('mode', document.body.classList)
    });

    if (localStorage.getItem('mode') != "") {
        document.body.classList.add(localStorage.getItem('mode'));
        document.getElementById('mode-btn').checked = true;
    }

If you want to add a style for your dark mode use this

Example:

body.dark .page-titles {
    background: #36393f;
    color: white;
}