XF 2.3 Change button style for light and dark styles

[Davyc]

I want to add a button styled in CSS to a link so that the colors are different depending on whether the style is light or dark. This is the code I want to use, though the colors will change for dark over light. So potentially the same code, just different colors. How can I implement this in the extra.less file? Any help greatly appreciated.

.myButton {
    background-color:#44c767;
    border-radius:10px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    padding:9px 31px;
    text-decoration:none;
}
.myButton:hover {
    background-color:#2ab1bd;
}
.myButton:active {
    position:relative;
    top:1px;
}

 

[Mr Lucky]

My understanding is that you'd use the xenForo variable

So for example:




color:@xf-textColor would give you the dark text in light style and light text in dark style

color:@xf-contentBg would give you the dark text in light style and light text in dark style

See here for reference variable names:

xenForo Color Palette and Basic Colors: Chart with IDs

Aug 5, 2024

A list of XenForo Style Property colors and their @xf IDs

• Mr Lucky
• basic colors
• XenForo tips & guides [2.x]

 

[Davyc]

Yeah, that doesn't work - all the colours have been changed manually in the colour palette to HSL values as the default style has been heavily customised. What I need is a variable in CSS to define what happens in the light style and then something different in the dark style. I can get the button to work, but the colours are static - and when I remove the colours completely I just get bordered text that changes from dark on the light variation to light on the dark variation.

 

[Jeremy P]

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

• 
• 

 

[Davyc]

@Jeremy P Yeah, I got that before and tried to make it work, but nothing happened. Knowing me, I will have done something wrong and put something in the wrong place. The code in my first post is a CSS button from a generator, on its own it works, but obviously it stays the same on both style variations. So, if I may be so bold to ask - how would I use that code in the first post in conjunction with what you posted. I did give it a shot, but like I said, nothing happened to make it work, lol.

 

[Jeremy P]

Something like this:

.myButton
{
    background-color:#44c767;
    border-radius:10px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    padding:9px 31px;
    text-decoration:none;

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // dark scheme rules
        background-color: green;
        color: black;
    });
}

.myButton:hover
{
    background-color:#2ab1bd;

    .m-colorScheme({{ $xf.style.getAlternateStyleType() }},
    {
        // dark scheme rules
        background-color: red;
    });
}

.myButton:active
{
    position:relative;
    top:1px;
}

 

[Davyc]

@Jeremy P thank you so much, that works perfectly. I was transferring the entirety of the first part into the second, which was obviously wrong. Now that I know the syntax, I can experiment with the colours until I get the right combination for the look I'm after. I'd never have got this without your help, so thank you again for helping out - just brilliant!