Lexa R Lexa R - 12 days ago 6
CSS Question

Change color scheme on refresh

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.

Answer

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) + 1; 
    $("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