Customizing Cookie Banner with Variable Font and Color for Template

Hi there,

I'm working on building my first Squarespace template. Since - per the nature of templates - people will be uploading or using their preferred fonts and colors, I'd like to create some code to style the cookie banner so that whatever font or colors they use sitewide will get pulled into the cookie banner.

First, I'd like to do this with the font. So that whatever font they use for paragraphs will get used here.

I'd also like to do to do this for the background color and the text color so that whatever color they choose as their darkest/lightest will be pulled for the background and text colors, respectively. I've currently got a workaround code in there that's pulling the menu block title color for the background, but I could see that getting messy. I'd much prefer to have it refer to the actual core site palette if possible. 

I've tried a few things but nothing's working seamlessly yet. Thanks in advance for any help! 

Site: https://www.caroline-reese.squarespace.com

Password: Caroline23

@Jess84 I think the easiest way to accomplish this would be to make use of the :root CSS mapping... just inspect the page and look down to the :root CSS formatting and then assign your mappings using the same formats... for example, something like this:

.sqs-cookie-banner-v2 {
	background-color: var(--darkAccent-hsl); /* or whichever color from the list you want to map it to */
}
.sqs-cookie-banner-v2 p {
	color: var(--lightAccent-hsl); /* or whichever color from the list you want to map it to */
	font-family: var(--body-font-font-family);
}

That should set it up so that whenever the primary theme colors or fonts are updated, the cookie banner keeps the same styling as the rest of the site. Make sense?

@SaranyaDesigns thank you! I will play around with this and let you know what I figure out. Appreciate your help!