Change color scheme on refresh

Question

What I want to accomplish is to be able to change the CSS background-color/color of multiple elements on refresh. I also want them to appear in a grouping. Therefore, not random colors - all specified and in a "set". If possible, I'd like to do three colors (e.g. blue background, dark grey text, white link).

For example:
Color Scheme 1 - Blue background, dark grey text, white link
Color Scheme 2 - Dark purple background, white link, pink link
Color Scheme 3 - White background, black text, green link

Unfortunately, the only codes I can find online are for randomized colors.

I appreciate all the help I can get.

EDIT: Following Paulie_D and Matus' comment, I tried to write up my own code with more research and multiple trial and error. Finally I came up with this.

HTML:

<link id="colorscheme" rel="stylesheet" type="text/css" href="">

JavaScript:

var stylesheets = ["schemeone.css", "schemetwo.css"];
var rand = Math.floor(Math.random() * stylesheets.length);

$(document).ready(function(){
document.getElementById("colorscheme").setAttribute("href", stylesheets[rand]);
});

However, Oliver's code compiles the color schemes in one CSS file, so thank you very much for the alternative and to everyone who gave me advice and direction.

Welcome to Stack Overflow! It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with your code and explain what you have tried. — Paulie_D
Thanks and I understand. I have tried the one from this link codepen.io/eksch/pen/wagdyZ but as I said, it only randomizes the color and not the way I want them to, in a grouping. I'm still a newbie coder and I've tried Googling this but nothing came up. — Lexa R
Hi, try creating a different css classes (or maybe different css files) for each of your color scheme. If you want to rotate between schemes in order you can use cookie or local storage to keep track of the last used color scheme. — Matus

Oliver Orchard Oliver Orchard · Accepted Answer · 2016-11-24T17:11:21

I noticed you tagged Jquery. Here is the javascript:

$( document ).ready(function() {
    var listOfClasses = ["color-scheme-1","color-scheme-2","color-scheme-3"];
    var randomNum = Math.floor(Math.random() * listOfClasses.length); 
    $("html").addClass(listOfClasses[randomNum]);
});

Then in css you would have

html.color-scheme-1 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-1 a {
    color: #000000;
}

html.color-scheme-2 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-2 a {
    color: #000000;
}

html.color-scheme-3 {
    background-color: #000000;
    color: #000000; 
}

html.color-scheme-3 a {
    color: #000000;
}

Just replace with desired hex code for colors. Codepen

Change color scheme on refresh

1 Answers