Way to Allow User to Switch Page Colors?

  • Resolved chrisauthor

    (@chrisauthor)


    7 years, 2 months ago

    I have a site with white font on black background. I would like to give users a way to switch to a black font on white background (e.g. clicking on a button). First I thought to go the easy way and try to find a plugin, but I couldn’t find any. So, I decided to try and implement a JS solution

    I’ve added the following code (as it is perhaps obvious, it is linked to a button image with the id=”button”). It kinda works, in that it changes the background for the entire page to white, and the article text to black. However, text in e.g. headings or widget descriptions isn’t.

    My questions:
    1) How should I go about programmatically changing the related css value (e.g. h3) in the code below?
    2) (Perhaps this ought to be the first question): is there any easier way to implement this? Some plugin I missed?

    
var activated = 0;
document.getElementById("button").addEventListener('click', function () {
    if (activated == 0) {
        document.body.style.backgroundColor = "white";
        document.body.style.color = "black";
        activated = 1;
    } else {
        document.body.style.backgroundColor = "black";
        document.body.style.color = "white";
        activated = 0;
    }
});

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator cubecolour

    (@numeeja)

    If I had a similar task as part of my own project, I would probably approach it by having all of the styles that would need to be changed in a stylesheet added by a custom plugin or in the child theme. Each set of styles would then only apply when the body element has a specific class, eg dark or light.

    The javascript would then need to only add/remove the dark/light body class as required.

    Thread Starter chrisauthor

    (@chrisauthor)

    I’ll try to work on that, thanks for the suggestions.

    You could try this:

    var activated = 0;
document.getElementById("button").addEventListener('click', function () {
	if (activated == 0) {			
		document.body.setAttribute("style", "background-color: white; color: black !important");
		activated = 1;
	} else {			
		document.body.setAttribute("style", "background-color: black; color: white !important");
		activated = 0;
	}
});

    Adding the !important tag to your color attribute should override most of the color on the page, depending on how your theme’s style sheet is setup.

    • This reply was modified 7 years, 2 months ago by andy30z.
    Thread Starter chrisauthor

    (@chrisauthor)

    Thanks for the input, but this doesn’t seem to work either – i.e. it only changes the text and the background, not the headlines or other elements.

    I would suggest looking at your page using a browser developer tool. If you press F12 in most browsers (I prefer Chrome) and the developer tools should pop up and will allow you to inspect the elements. Inspect the headlines and other elements that don’t have the colors you want and look at the styles and you should be able to see which style is overriding your colors. Then you can adjust your styles so they have priority. The !important helps deal with conflicts but it doesn’t always work. You will have to select the headlines specifically if they aren’t inheriting the colors from the body.

    You can try this it will select all elements on the page:

    
var activated = 0;
document.getElementById("button").addEventListener('click', function () {
	if (activated == 0) {
		setStyle("background-color: white; color: black !important");
		activated = 1;
	} else {			
		setStyle("background-color: black; color: white !important");
		activated = 0;
	}
});

function setStyle(myStyle) {
	var elements = document.getElementsByTagName("*");
	for(var i in elements) {
		if(elements[i].setAttribute) {
			elements[i].setAttribute("style", myStyle);
		}
	}
}
    Thread Starter chrisauthor

    (@chrisauthor)

    This worked! Thanks for your efforts ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Way to Allow User to Switch Page Colors?’ is closed to new replies.