Website Background color change

Question

I want to know how can I change the color of my website when the I select a different color. For example, the background of my website is white and if I choose black, my websites background color changes to black. I have applied the CSS, but the changes are not reflected in all the pages. On which ever page I am clicking as the color theme black, the color of that particular page gets changed. Rest all the pages remain white. Can you please tell me how can I change the background color of the whole website on button click.

depends on how you are performing this and how you expect each page to know what colour you want — Jaromanda X, Sep 13 '17 at 06:08
Your question already has an answer! Check [this](https://stackoverflow.com/questions/26937424/change-button-color-onclick) and [this too](https://stackoverflow.com/questions/31089414/javascript-change-background-color-on-click) — Dubois, Sep 13 '17 at 06:14
Possible duplicate of [javascript change background color on click](https://stackoverflow.com/questions/31089414/javascript-change-background-color-on-click) — Yash Parekh, Sep 13 '17 at 06:15
not sure how those supposed duplicates answer the question - all they do is change the colour of the current page, they do nothing to "remember" the choice — Jaromanda X, Sep 13 '17 at 06:21

Jaromanda X · Answer 1 · 2017-09-13T12:28:51.150

Here's some code - can't make it a runnable snippet here though - works in this jsfiddle - https://jsfiddle.net/bbb7wpot/

<button onclick="changeBackground();">
Change
</button>

script

On page load, check if a background color is selected

This doesn't really have to be on page load, just in a script at the top of the body element will do

if(localStorage.bgcolor) {
    document.body.style.backgroundColor = localStorage.bgcolor;
}

then the function to handle the click to change

function changeBackground() {
    var currentValue = localStorage.bgcolor || 'white'; // default is white
    currentValue = currentValue == 'white' ? 'black' : 'white';
    localStorage.setItem('bgcolor', document.body.style.backgroundColor = currentValue);
}

Note: I didn't use jquery for such a basic task

using CSS and a class on the body tag for example

<style>
    body.white .target {
        background-color: white;
    }
    body.black .target {
        background-color: black;
    }
</style>

and

<body>
    <div class="target">This will change background</target>
    ...
    ...
</body>

document.body.className = localStorage.bgcolor || 'white';

then the function to handle the click to change

function changeBackground() {
    var currentValue = localStorage.bgcolor || 'white'; // default is white
    currentValue = currentValue == 'white' ? 'black' : 'white';
    localStorage.setItem('bgcolor', document.body.className = currentValue);
}

I was able to change the background color of body. It's working fine. How can I change the background colors of different sections, header and footer present on my website. There background color is not white by default. — Harshita Sinha, Sep 13 '17 at 10:28

score 0 · Answer 2 · edited Sep 13 '17 at 07:00

If you want the change to be persistent after page refresh or moving to other pages, you might want to use javascript for that.

Store the user's color preference(you could either use the browser's local storage or cookies), and run a script to fetch that value and set the web page's background color.

An example of doing that with localStorage:

Function to set the background color from localStorage:

var apply_global_theme = function(){
    var bg_color = localStorage.getItem("global_theme") || '#fff';
    $("body").css("background", bg_color);
}

Function to change the global background color(assuming new_color is your color preference, ex: 'red' or '#f00'):

localStorage.setItem("global_theme", new_color);
apply_global_theme()

Apply the background color on page load:

$(document).ready(function(){
apply_global_theme();
})

score 0 · Answer 3 · answered Sep 13 '17 at 06:57

<!-- a full working example including inlined StyleChanger -->
<html>
<head>
    <style>
        /* put this style into css file and apply all your page body */
        .my_custom_identifier { background-color:darkOliveGreen;}
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body class="my_custom_identifier">
    <h1>TITLE</h1>
    <h2>subtitle</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non saepe obcaecati recusandae autem ratione natus molestiae vero libero cumque placeat dolorem odit molestias excepturi suscipit voluptatem perspiciatis, magnam dicta velit.</p>
    <button>test</button>
    <script>
      /* create new js file and add into htnl */
var StyleChanger = function(id) {
    id = id.toLowerCase().trim();
    let findSS = function() {
        for (let ss of document.styleSheets) 
            for (let rule of ss.cssRules) 
                if (rule.selectorText.toLowerCase().substr(1)===id) 
                    return ss;        
    }
    let ss = findSS();
    if (!ss) return undefined;
    ss.change = function(originalValue, newValue) {
        for (let rule of ss.cssRules) {
            if (!rule.originalStyle) { // init original rules at first use                            
                rule.originalStyle = {};
                for (let style of rule.style) 
                    rule.originalStyle[style] = rule.style[style];
            }
            for (let style in rule.originalStyle) { // replace rules from original list
                if (rule.originalStyle[style]===originalValue) 
                    rule.style[style] = newValue;
            }
        }        
    }
    ss.reset = function() {
        for (let rule of ss.cssRules) {
            if (!rule.originalStyle) continue;
            for (let style in rule.originalStyle)  
                rule.style[style] = rule.originalStyle[style];
        }                            
    }
    return ss;
}

// find the stylesheet to change
var ss = StyleChanger("my_custom_identifier");

$( "button" ).click(function() {
    ss.change("darkolivegreen", "blue");
});

    </script>
</body>
</html>

score -1 · Answer 4 · edited Sep 13 '17 at 07:03

-1

Add this snippet to your body:

  style="background-color:red;"

edited Sep 13 '17 at 07:03

noamt

7,397
2
37
59

answered Sep 13 '17 at 06:10

User123123

19
1
7

how will this change the colour `on button click` – Jaromanda X Sep 13 '17 at 06:20
on button click event add this css to where they want $(target).css('background-color','red'); – User123123 Oct 05 '17 at 07:33

Website Background color change

4 Answers4