CODEWITHSUNDEEP
javascriptcss
RNPF
RNPF

Reputation: 261

Changing all colors on the page with JS

I'm trying to make a simple color switcher for my site with JS. The issue being my site has two possible style sheets, making it a little more difficult.

I currently have:

$(document).ready(function () {
$('*').filter(function() { 
    return $(this).css('background-color') == "rgb(101, 31, 255)" 
}).css('background-color', '#33b5e5')
$('*').filter(function() { 
    return $(this).css('border-color') == "rgb(101, 31, 255)" 
}).css('border-color', '#33b5e5')
$('*').filter(function() { 
    return $(this).css('color') == "rgb(101, 31, 255)" 
}).css('border-color', '#33b5e5')
});

Which is hideous and horrible, but iterates through all elements that can have a color, and replaces it with the other. The issue being I'd have to rerun this not just every page change, but every single time a div is loaded, which would be insane.

Is there some better way of changing all of color 1 in a style sheet with color 2?

Upvotes: 0

Views: 548

Answers (1)

partypete25
partypete25

Reputation: 4413

Can you use jQuery to add or remove a specific class to the body on a click event? Then in your stylesheet, define a new colour depending on whether or not that .theme class exists.

This is just an example:

$(".btn").click(function(){
  $("body").toggleClass( "theme" );
});

Then in your stylesheet have it setup something like this:

* {color:red;background:yellow;border-color:blue}
.theme * {color:green;background:pink;border-color:orange}

Upvotes: 4

Related Questions