Although Palette stack generates palette picker buttons for you it can be useful to create your own - especially if you want to display buttons in multiple places on your web page (as this is a more efficient approach than using multiple Palette stacks) or want to display a subset of the available palettes. This tutorial takes you through the process for doing just that and includes a handy tip for automatically styling the palette buttons in the palette colours - regardless of which palette is active.
I have used this approach on the Palette product page (in the How it works section on all devices - and in the Header section on small devices).
Let's begin...
- Decide what you want to use for your buttons - e.g. buttons, links or (as we'll use in this example) SVG
- Drag an SVG stack to the page (this tutorial will use the Source SVG stack but the same instructions should hold true for the F6 version too)
- Add the following SVG code to the stack. This will create a circle shape with a thin border - if you don't want a border change the stroke-width value to 0..
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="var(--background-color)" stroke-width="3" fill="var(--accent-color)" /></svg> - Adapt the SVG code to pick up the desired fill and stroke colors - the above example uses the variable colors for Source's page background color (for the border stroke) and accent color (for the fill). F6 users should use
var(--primary)- the background color uses the same variable name as Source. - The SVG stack can be used to control the size of the circle
- Add the code to trigger a palette change. Depending on the stack used the method for doing this may vary (see the main Palette page for more information on triggering a theme change).
If we leave things as they are then whenever a palette is changed (e.g. via the inbuilt palette picker buttons) then this SVG will change its colors to match the active theme. This would not be particularly useful as the SVG should represent the colors of the theme that this button will activate. To make our svg pick up the colors of the palette that we want this button to control we can simply add the palette name as a css class of the stack - e.g. palette3 will make the content of that stack pick up the colours of palette 3!
One final thing that we might want to do it to style this SVG a bit differently if it is the active palette. We can achieve this with some custom CSS - though exactly what that will be will vary depending on which part of your element you want to tweak when active. The code below will change the width of the border/stroke of our SVG circle element to 10 when that particular palette is active.
html.palette0 .palette0 svg circle, html.palette1 .palette1 svg circle, html.palette2 .palette2 svg circle, html.palette3 .palette3 svg circle, html.palette4 .palette4 svg circle{stroke-width: 10}
This CSS contains all the required selectors if you are using 5 palettes (0-5). You would need to repeat the html...circle bit for any additional palettes that you are using. What this CSS is basically saying is that if the active palette (the one attached to the html element) is the same as the palette that we are using to style our SVG then make the stroke-width of that one to be 10. You could style the active one in countless ways.
Have a play and see what you come up with!
