Custom button hover states that match each theme color: Is it possible?

Hi all. I want my global button hover state to use theme colors, not static colors. This way, the button hover states will match the active theme's unique button colors.

Specifically: a button with a LIGHT background, DARK text, and DARK border would reverse on "hover" to a DARK background with a DARK border and LIGHT text.

Does anyone know how to replace static hex or RGBA colors with dynamic theme color variables? Here's what I'm hoping for:

/* change global button hover state */
.sqs-block-button-element:hover,
.sqs-button-element--primary:hover,
.sqs-button-element--tertiary:hover {
 background-color: VARIABLE-THEME-BUTTON-BACKGROUND-COLOR !important;
 border-color: VARIABLE-THEME-BUTTON_BORDER_COLOR !important;
 color: VARIABLE-THEME-BUTTON-TEXT-COLOR !important;
 opacity: 1 !important; /* no hover fade */

Any ideas would be appreciated!

Can you share link to page where you use light, dark background, light/dark text? We can check ID easier

hey @birdmade this is a great question!

At this time, we can use the text style variables from the source code, but color theme specifics won't cross over (it's an HSL/A code issue I have been troubleshooting for a while now 😅) but there is good news!  

Color themes are set on a container level, so we can target them individually with CSS.

If you know the color codes, you can program it to reverse, and if you are using black and white, you can use an invert filter hover effect. Here is an example for light 1 and bright 2 using both the color properties and the filter property:

[data-section-theme="light"] .sqs-block-button-element{
  background-color:red;
  color:blue;
  border-color:blue
}
[data-section-theme="light"] .sqs-block-button-element:hover{
  background-color:blue;
  color:red;
  border-color:red
}
[data-section-theme="bright"]
.sqs-block-button-element{
  background-color:#fff;
  color:#000;
  border-color:#fff
}
[data-section-theme="bright"] .sqs-block-button-element:hover{
filter:invert(1)
}

One word of caution here - there are more than 15 types of buttons in Squarespace. Primary, secondary, tertiary, fit vs fill, list item, list section, product, digital product, newsletter form, header button, etc etc. so when working on a code that can create this hover effect for a "global button" you've got a lot of code to write.

I hope this answer helps and best of luck with your project!

Thanks for this great explanation and clever workaround @inside_the_square!

I'll experiment with this and report back the community. Like you said, it's not a pure solution due to current build limitations, but it's a snappy way to override defaults.