Palette

A great stack for web designers! Palette is a theming powerhouse that allows the changing of the colour palette used throughout your web page / site.

Use the colour pickers to try it out!

A flexible colour theming engine for RapidWeaver and Stacks

18_object_settings

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!

18_designer_tools

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.


Not got Source yet?
Get the Source version of Palette completely for FREE when you buy our Source Addon pack today!

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....

46_production_priorities

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.

11_social_engagement

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.

54_free_access_open_content

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!).

16_system_monitoring

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.

17_digital_graphics

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.

Frequently asked questions

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 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!

What are you waiting for?

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).

image

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!!)