The colour choices on your website can have a big effect on the end user and their experience (and behaviour) on your website. Getting it right (and even giving your website visitors a choice) can be hugely beneficial - for them and you!
The modern web lets us use 'CSS variables' to hold values relating to the styles we want on our websites. Palette stack can tap into these values and dynamically change them allowing us to transform all of the elements that reference those colour values.
Source and F6 utilise CSS variables to store colour values as such it it only these frameworks that can take advantage of the theming options that Palette stack facilitates.
Not got Source yet?
Get the Source version of Palette completely for FREE when you buy our Source Addon pack today!
There are many reasons why providing different themes could be useful for you, your clients and / or your website visitors.
Here are just a few....
During the design phase easily try out different colour schemes to find what works best. You could even make a partial containing your favourite colour schemes to test with each new site you build.
You might want to present your client with numerous page styling options for their site. Simply set up Palette and let them see their page/site in various styles to see what they like best.
Let your website visitors choose whatever colour scheme they like. You can even set Palette up to remember the choice made so that it is carried between sessions (and pages!).
Computer users can specify system settings on their OS to register their preferences in terms of dark/light appearance and also in terms of whether they want high contrast. Palette can be set up to respect these preferences by allocating different Palettes to each scenario.
Do you showcase website templates that you sell to customers? Palette is a great option to demonstrate how flexible and adaptable your sites can be.
Palette lets you create up to 10 different palettes/themes that can be offered to your web page visitors for them to select their preferred option.
Not only that....Palette will (optionally) remember their choice and carry it between sessions (and even between pages if you are using Palette throughout a whole site!!).
Switching palettes assigns the different colour values of the chosen palette to the underlying colour variables that we use throughout Source. As such, any elements on the page where we use these variables will get automatically updated!
Click on the different Palette selectors to see the colour values below change based on your choice.
Note: This is just a subset of the colours that Palette works with in Source framework. The F6 version of the stack works in the same way with the colours set in the Site Styles stack.
Below are some responses to questions about the functionality of Palette stack.
You can optionally set Palette to use your default colour options (from the main Source stack or F6's Site style stack) as one of the palette options.
No. You can opt to hide the default palette switcher buttons if you wish (e.g. perhaps after the design phase).
If you don't show the default buttons but do want to allow theme switching then you can create your own buttons to trigger the switch (see question below).
You can even hide them and toggle them into view if the website visitor wishes. See here for an example of that (and check out our Knowledge Base pages to see how this was done!).
Palette generates palette picker buttons by default (it is those that you see in the Nav bar on this page).
There is an option in Palette stack that allows you to store the user's palette choice in the browser's 'local storage'. This is a great (and safe and private) option to ensure that when your web page visitor returns to the page then their choice is remembered. Not only that but their chosen theme will be applied to all pages where you are using Palette stack.
If however you do not want to use this function then you can let the palette reset to the default option on each load.
Only Source and Foundation 6 use the modern approach to working with colour values and so it is only these that Palette stack supports at this time.
Add this stunning theming stack to your collection and your RapidWeaver projects today!
You can buy this stack on its own or as part of our hugely discounted stacks bundle (find out more).
Webdeersign has put together a fantastic project that showcases the stunning theme switches that Palette makes possible. Check out the demo (and if you like it and don't already have Palette - then the project download comes with a code for 50% off Palette stack!!)