XF 2.3 Different html widget colors between 2 different styles/themes

[mrdoitnyce]

Hey All,

Currently rocking 2 themes that has 2 different color schemes on my site.

1 dark - black & red
1 light - blue & white

So I mostly rock the blue & white style and recently created a buy me a coffee widget and set it to match the theme color, then i realized i forgot about the other style and obviously it looks off when i switch between the 2. I was just wondering if there was a way to have it 2 different colors of the same widget and it would remain its respective color that I set somehow as I switch between the 2. Btw, it's an HTML widget.

 

[Old Nick]

Currently rocking 2 themes that has 2 different color schemes on my site.

Using Style variation, correct?
Then this post can help:

XF 2.3 Post in thread 'Custom prefixes'

Jul 1, 2024

You'll typically want to use the .m-colorScheme mixin to target color schemes (light/dark):

.some-class
{
    // normal rules (default color scheme -- light in the default style)

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // alternate rules (alternate color scheme -- dark in the default style)
    });
}

However you can target specific variations if you want:

.some-class
{
    // normal rules (system or implicit default variation)

    :root[data-variation="alternate"] &
    {
        // alternate rules (explicit alternate variation -- will...

• Jeremy P

• 
• 

 

[mrdoitnyce]

No, not using style variation. Switching between different themes.

I only have one html code for the button which is this:

<center><a href="https://www.buymeacoffee.com/superchunes"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a Beer&emoji=🍺&slug=superchunes&button_colour=09afdc&font_colour=FFFFFF&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00" /></a></center>

As you can see, i've set that button color to match my blue & white theme. But, lets say I want to use my black & red theme and I switch over, the button will obviously stay the color in the html code. I was just wondering if there was a way to add another color combination to the html code to match the black&red theme and if i switch between themes, it would stay its respective colors.

 

[Old Nick]

It seems that this is a code that you get from the Buy me a coffee site... I don't know if you can modify it easily.
You should create your own button and use XenForo color variables, this will automatically adapt to the selected theme.

 

[mrdoitnyce]

It seems that this is a code that you get from the Buy me a coffee site... I don't know if you can modify it easily.
You should create your own button and use XenForo color variables, this will automatically adapt to the selected theme.

looks like i'm gonna have to do that.