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.
You may however have a use case for presenting a palette randomly (or programatically) - e.g. if you have set up 7 palettes in your Stacks/RapidWeaver page then you might want to use a different one on each day of the week. I'm sure there are other use cases for this kind of thing but as it is a bit niche it is not something that I would add direct support (and settings) for in the stack itself. It's easily achieved though with just a couple of lines of JavaScript.
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
numGen. - 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
In this example we are using almost exactly the same code as before but tweaking the code that we are using to generate the number (as this time we are using JavaScript to determine the 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
Simply copy the desired snippet from above and paste into RapidWeaver's JavaScript code window in the page settings. You may need to tweak a couple of the values depending on your Palette set up (see notes above).
Get creative
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!
