What follows below is copied pretty much as is from the demo project file that comes with Palette. I have added some F6 columns to check that there are no issues integrating this into an F6 environment. I haven't found any issues arising from that.
A lot of the F6 colors are available to use via utility classes. For example we are setting the background of this Container to pick up the 'primary' colour (of whatever the active theme is) by adding the custom class bg:primary to the css box of the stack.
Unfortunately F6 does not supply custom classes for all colors so you may want/need to create some of your own. For example the text in this container (an h3 heading and paragraph text) we would ideally want to be primary-contrast color (as opposed to our default text colours) - but there is no class available for this.
As such in the custom CSS field of RW i have created a new css rule that we can use for this:
.color\:primary-contrast h3, .color\:primary-contrast p{
color: var(--primary-contrast) !important
}
This applies the F6 color variable value - for the primary-contrast color - to a new class called color:primary-contrast that we are applying to all h3 and p tags that are contained within a container with that class.
If you find yourself needing to build out your own classes in this way then be sure to use the color variables that F6 generates. Using these is what lets F6 and Palette work its magic.
If you are using icons then you can adjust the code in the SVG to also pick up the theme colours. This can really help tie your iconography into the overall look and feel of your page. In the svg code simply switch out the default color values (e.g. #000000) for the F6 color variables (e.g. var(--primary)). Double-click into the SVG stack above to see where this has been done.