Dynamically Change Page Backgrounds With Screen Color jQuery Plugin

Screen Color is a tiny jQuery plugin that enables a trigger button to alter the background color of a site instantly while ensuring text remains readable by adjusting its contrast automatically. This gives you an easy way to let users customize their viewing experience or create fun color themes for your site. 

The plugin also includes options to override default background/text colors and even cycle through colors automatically. This customization can make long browsing sessions more comfortable, especially in varying lighting conditions or for users with visual impairments.

How to use it:

1. Download the package and insert the main script plugin-screen-color.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/plugin-screen-color.js"></script>

2. Call the function screenColorChange on the target trigger button and the plugin will take care of the rest.

<button id="themeSwitcher">
  Switch Theme
</button>

$(document).ready(function () {
  $("#themeSwitcher").screenColorChange({
    // options here
  });
});

3. Override the default background/text colors.

$("#themeSwitcher").screenColorChange({

  // background colors
  colors: [
    { name: "blue", color: "rgb(43, 174, 226)" },
    { name: "green", color: "rgb(43, 226, 113)" },
    { name: "yellow", color: "rgb(177, 226, 43)" },
    { name: "purple", color: "rgb(159, 43, 226)" },
    { name: "red", color: "rgb(214, 40, 40)" },
    { name: "black", color: "rgb(0, 0, 0)" },
  ],

  // initial background color
  initialColor: "blue", 

  // text colors
  textColors: [ 
    { name: "blueText", color: "#5e1e03" },
    { name: "greenText", color: "#A60D2C" }, 
    { name: "yellowText", color: "#080808" },
    { name: "purpleText", color: "#020827" },
    { name: "redText", color: "#D9FEBE" },
    { name: "blackText", color: "#fdfc69" },
  ]
  
});

4. Enable a button to automatically switch between background colors.

var autoChangeEnabled = false;
$("#autoColorChangeSwitch").on("click", function () {
  autoChangeEnabled = !autoChangeEnabled;
  if (autoChangeEnabled) {
    startAutoColorChange();
 } else {
    stopAutoColorChange();
 }
});
function autoChangeColor() {
 setInterval(function () {
   $("#themeSwitcher").click();
 }, 2000);
}
function stopAutoColorChange() {
 console.log("Paused");
}

---

This awesome jQuery plugin is developed by Biasiolo. For more Advanced Usages, please check the demo page or visit the official website.