I am trying to create a toggle that disables one class connected to a tag similar to the theme toggle I already have. Turning it off would disable the colored text for easier reading (I like it, others might not). How would I go about doing this?
HTML CODE:
<nav id="theme-options">
<div>
<ul>
<li class="dropdown"><a href="galaxy.html">Theme Options</a>
<div class="dropmenu_5col dropdown-fix1">
<ul>
<li>
<label id="switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>
</li>
<li>
<label id="switch-color" class="switch-color">
<input type="checkbox" onchange="toggleTxtClr()" id="slider-color">
<span class="slider-color round"></span>
</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
SPAN EXAMPLE
<span class="color">green</span>
COLOR CHANGING SCRIPT
This will change the color depeneding on what is in the span tag only if the span tag has ‘class=”color”‘. So I would need to remove or disable this with the toggle.
$('span.color').each(function() {
if( $(this).text() === 'green' || $(this).text() === 'greened' ){
$(this).css('color', '#008000')
}
})
Any help is appreciated. Thank you!
I have tried searching for scripts to do this (or something simular) and tried to get them to work with my limited JavaScript knowledge.
Cynthia Johnson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I think using css variables will be more appropriate for handling something similar to darkmode.
They are simple to use too, create some variables in :root like --font_color & --background_color then add those variable wherever you wish like background-color: var(--background_color);.
Then you can directly manipulate variable values using js. Best thing is just my changing variable value at one place it will replace properties to all elements where that variable is used.
I have illustrated in below code do check it out. Thanks.
let darkmode = "off";
function toggleDarkMode(){
var root = document.querySelector(':root');
if(darkmode == "off"){
root.style.setProperty('--font_color', "white");
root.style.setProperty('--background_color', "black");
darkmode = "on";
}
else{
root.style.setProperty('--font_color', "black");
root.style.setProperty('--background_color', "white");
darkmode = "off";
}
}:root{
--font_color: black;
--background_color: white;
}
body{
margin: 0;
padding: 0;
width: 100%;
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Colors */
background-color: var(--background_color);
color: var(--font_color);
}
button{
cursor: pointer;
background: transparent;
border: none;
color: var(--font_color);
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h2>This is sample text.</h2>
<button onclick="toggleDarkMode()">Toggle DarkMode</button>5
The easiest way would be to put a “tag” class on every element that you wanted to be able to change the color on and then use that to toggle the color class. Something like this (the tag class is “foo”):
document.addEventListener('DOMContentLoaded', function() {
[...document.querySelectorAll('.foo')].forEach( x => x.classList.add("green"));
document.querySelector('#button').addEventListener('click',
(target) => [...document.querySelectorAll('.foo')].forEach( x => x.classList.toggle("green")))
}).green {
color: green;
}<span class="foo">foo</span>
<span class="bar">bar</span>
<span class="foo">foo</span>
<br />
<button id='button'> </button>1