The most common use of Palette would be to either allow your client (during the design process) or your website visitors (on your live site) to change themes via some palette picker buttons.
Note: These snippets would override a user's choice so it would be recommended to hide the picker buttons (by unchecking the 'Show pickers' option in Palette) as any choices made would not be retained beyond the current page.
Displaying a random palette
let numGen = Math.floor(Math.random() * 5); let randPalette = "palette" + numGen; setTheme(randPalette)
There are 3 parts to this piece of code:
- We are generating a random number and associating it with a variable that we are creating named
- We are then combining that number with the word 'palette' into another variable (
randPalette) to put things into the format that we need
- Finally we are passing that combined value into the setTheme function (which is a function made available by Palette stack).
Note: We are using the value of 5 in the above example - this number should represent how many palettes you are offering. This will return a number between 0 and 4. If not using the base palette (palette 0) then you would need to add 1 to the
randPalette value by adapting that bit of the code to:
Math.floor(Math.random() * 5) + 1
Displaying a palette based on day of the week
let numGen = new Date().getDay(); let randPalette = "palette" + numGen; setTheme(randPalette)
Note: To use this you would obviously need to have 7 palettes set up in Palette stack. The code assumes that palette 0 is being used - this would be selected when it is a Sunday (day number 0) and palette 6 would be selected on a Saturday (day number 6). If you are not using the default palette then like we did in the previous example we would need to add 1 to the numGen value.
How to use these
Above are a just couple of examples though this same approach could be adapted to e.g. check for months and have different palettes used for different seasons etc. Have a play with it and see what randomisations / calculated choices you can come up with!