I'm a false beginner with HTML, CSS, and Javascript (having done KhanAcademy stuff in the past but also having forgotten most of it). I'm working on trying to get a simple webpage with dark mode going (with as little Javascript as possible). The problem is, the links have low contrast in dark mode. I'm using this code to add a class of .dark-mode to the body element of my html and style it with CSS.
Javascript:
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
CSS:
html, body {
background-color: ivory;
color: black;
}
.dark-mode {
background-color: #142514;
color: blanchedalmond;
}
button.right {
float: right;
}
HTML:
<button class="right" onclick="myFunction()">Toggle Dark Mode</button>
I tried adding this to CSS, but I realize that the tag isn't getting class="dark-mode".
CSS:
a.dark-mode:link { color: lightskyblue; }
a.dark-mode:visited { color: #6d4b8d; }
a.dark-mode:hover { color: #ffffff; }
a.dark-mode:active { color: #ff4040; text-decoration:none; font-weight:normal; }
Could someone please help me figure out a method that is light on Javascript to either add the dark-mode class to the tag as well as to the body or specify that the tag should get these attributes when the body has the dark-mode class? Any help would be greatly appreciated.
The problem is that you are toggling a .dark-mode class on your <body/> element, but you are writing your CSS selectors as though they themselves would have a .dark-mode class.
This selector:
a.dark-mode {}
...would target an element that looks like this:
<a href="mysite.com" class="dark-mode">Link</a>
Because you want to target all anchors inside a <body/> with a class of .dark-mode you'll want to rewrite your selectors as:
.dark-mode a:link { color: lightskyblue; }
.dark-mode a:visited { color: #6d4b8d; }
.dark-mode a:hover { color: #ffffff; }
.dark-mode a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
...which matches all anchors inside an element with class .dark-mode.