For my portfolio site redesign, I wanted to randomly select and display one of several color schemes each time a page was loaded. So I wrote this JQuery script. The script will, given a variable number of string arguments which are CSS class names, choose one at random and attach it to the <html> page element. The styling you defined in your CSS class will then take effect, changing the design scheme for the page.
Along the way, I learned that JQuery's $(document).ready() function only waits until the DOM is complete-- but at that point CSS, images and backgrounds may not be loaded yet. Therefore in my example.html code you'll see that I used $(window).load() to wait until all CSS, images and backgrounds are loaded before changing the scheme.
If you have CSS classes .blue, .red and .orange which define your color schemes, you would call the script like this:
$(window).load(
function() {
$().schemer("blue", "red", "orange");
}
);
See example.html for a complete example of how to use the script.
This code is licensed under the MIT license.
Written by North Krimsly of www.highintegritydesign.com
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent