There are options to have both of these methods target either the background of an element like this one:
Or the foreground of the element, like this one:
You will see throughout this demo youHue changing colours of different sections, you will also see that I have tried to make it as easy as possible for the user by not requiring them to mess around with the plug-in code. Everything can be done from your own js file by saying true to the options you want but this can be seen more below!
First you need to include the js file into your project.
Once you have included the youHue.js file in your project directory you can get started with using the plugin. To do this you must call upon the plugin in your own script file i.e. script.js, it will look something like this:
We will start with looking at the options you have when you want to have completely random colours chosen for your elements. To have just the background of an element change simply say this for your chosen element:
For your font colour to be the only colour changed simply make your option:
If you have multiple elements you wish to be different colours but dont want to give them different classes youHue allows you to do this completely randomly by adding this to your options:
The example above looks like this in a js file:
But they can be changed to be either background or foreground or as you can see both.
The processes for this section are slightly different than the section above but that is because the way that it works is slightly different also. The functions of this section pick hex codes from an array and make sure that hex code cant be picked again for the same "box", this is to stop clashes of text with background. The easiest example to show you would be the "Hello World" boxes at the top of this page.
First things first for your own colour pallette is to add an array of your colours. For this I will use 3 but you can use as many as you like! To add an array of your own colours it should look like this:
Make sure to put the word colors in double quotes and each colour within the square brackets in single quotes seperated by a comma, this is because it is something as simple as a missed comma that can make a whole javascript file stop working.
Once you have your colour array set up and ready you can set whether you want foreground and/or background to be targetted by one colour from your array on each page load or multiple colours to be chosen for multiple elements, as mentioned above. Here are some examples of how that would look:
As you can see on the above example adding "myRandom" to the options it will do both foreground and background by default as opposed to the random colour option above. This default can be overidden by just adding "myBackground" or "myForeground" to the options to be more specific. See below: