A flexible colour theming engine for RapidWeaver and Stacks
Get colour right
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!
Modern approach
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.
Exclusively available for Source and Foundation 6
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.
Use cases
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....
Design phase
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.
Working with a client
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.
Giving end users a choice
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!).
Respect user preferences
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.
Template designer?
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.
Create numerous style options
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!!).
How it works
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.
#Accent#Accent (Hover)#Accent (Alt)#Secondary#Secondary (Hover)#Secondary (Alt)#Text#Background#Background (Alt)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.
Get Palette
You can get this stack on its own or as part of our hugely discounted stacks bundle.
Our stacks bundle includes Palette and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:
Palette
A theme switching stack for complete colour control (available for Source and F6 only)
Buy for
Buy for
Buy for
Over 60% off!
Stacks bundle
Our stacks bundle includes ALL of our stacks in one incredible bundle dea (along with an exclusive project file)l!
Buy for
Buy for
Buy for
FAQs
Below are some of the most common questions about this stack. Please see our Knowledge Base page for full instructions about how to use this 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 also an inbuilt JavaScript function that you can call via any button or link on the page. Details about this can be found in the demo project and on our Knowledge Base site. Below are some buttons that have been set up to be styled by (and to trigger) the available palettes.
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.
Yes! As with all of our stacks we have extensive supporting documentation over on our Knowledge Base.
There are also various tutorials on how to take Palette even further!
All our stacks use only local resources, collect no data and include no calls to remote servers / CDNs etc. As such the stacks are completely GDPR compliant.
We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can't find what you need there then do not hesitate to reach out to us via your preferred channel.
Palette in action
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!!)
