XF 2.3 Creating a Dark Mode Variation for a Custom Template?

[VisEntities]

Hi everyone,

I'm looking to create a second variation of a template for dark mode by enabling it in the styles variation. I have some custom elements in the template that don't change colors automatically. How can I make these elements support dark mode?

Is it as simple as replicating the template and specifying it for dark mode somewhere? Can someone guide me through the process?

Thanks in advance!

 

[Mr Lucky]

Rather than using a fixed hex color code, use a color variable from the style. E.g. instead of #f5f5f5 use an equivalent from the variation as defined in style properties, color palette or basic colors .
e.g. @xf-contentBg

 

[VisEntities]

Rather than using a fixed hex color code, use a color variable from the style. E.g. instead of #f5f5f5 use an equivalent from the variation as defined in style properties, color palette or basic colors .
e.g. @xf-contentBg

Interesting approach. And I can create new style properties (colors)?

 

[Mr Lucky]

Interesting approach. And I can create new style properties (colors)?

Yes, it is best to change the colors there. You can also create your own style property colors in development mode if you want.

 

[Mr Lucky]

I would also advise to uses classes instead of inline style and then define the class elements in extra.less.

So in your example above you could either add the styling elements to the existing class "top-section" or add another class there <div class="top section anotherclass">

 

[Old Nick]

This post might 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

• 
• 

 

[VisEntities]

Thanks

 

[Mr Lucky]

I have now added a reference list of colors and @xf IDs

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]