How to change in all css "#xxx" to "#000"

Question

I would like to have a script, so when I enable it, that all shown things on my page with value #xxx (in color, borders, etc. etc.) change to black #000. Is it possible? I want to have two versions of my site - one normal, and one for 'mourn' option.. client wanted :)

Answer 1

make two different style-sheets with different behaviors you required and switch css files when you need to change versions.

help available for css file change dynamically:

adding css file with jquery
jQuery Change CSS File Dynamically

Answer 2

This approach isn't very practical with just JavaScript. I suggest using classes on the body to differentiate the colors or options. For example -

.mourn #someSelector {
   /* override the properties with #000 */
}

This is approach is pretty standard for what you're trying to do.

Answer 3

Having two stylesheets would be more efficient. A default, the one you already have, and another one that only overrides the desired colors. You can find out how to achieve this here : http://alistapart.com/article/alternate

Answer 4

Create a copy of your CSS file and use find and replace to replace all occurances of the color. Then upload both files to your website. You can use javascript to switch between the two stylesheet.

Answer 5

If you have this line in your page:

<link id="stylesheet1" href="normal.css" type="text/css" rel="stylesheet">

you can switch to the stylesheet with all black values with JavaScript like this:

document.getElementById('stylesheet1').href= 'black_values.css';