Dark Mode

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

Dark Mode​

XenForo 2.3 introduced a variation system that allows light and dark modes to be built directly into a single style. No more separate child styles for dark mode.

All of our light styles include a dark variation built right in. However, styles that ship as dark by default do not include a light variation. At the time of writing, the following styles are dark only: Evolve, Fusion Gamer, Omni, Blackened Pro 2, and Apex.

After installing your style, your members should see a variation chooser in the footer allowing them to switch between light and dark. If you don't see the variation chooser, navigate to Appearance → Styles, edit your style, and ensure Enable variations and Allow user selection are both checked.
1773338358746.png


For an even better experience, we include a style variation dropdown right in the header. To enable it, go to Style properties → Header and navigation → Style variation dropdown in header.

When customizing, place your edits directly in the style as you normally would. Color-specific adjustments for dark mode can be made through the variation's style properties.

Setting the Default Light/Dark display​

By default, XenForo sets the variation choice to "System" for all users and guests. This means visitors will see whichever color scheme their device prefers. For example, if a user is on their computer with light mode enabled, they'll see light mode. If they switch to their phone and it has dark mode enabled, they'll see dark mode on that device. Logged in users can override this by choosing System, Light, or Dark in their preferences to lock in a specific mode across all devices.

If you want to force a specific default for guests (for example, always showing dark mode), you'll need an add-on. We recommend the free Style Variation Default add-on, which allows admins to define the default as Light, Dark, or System, and can also update the preference for existing users.



Making edits for Light and Dark Mode​

XenForo 2.3 provides a LESS mixin that lets you target styles specifically for light or dark mode.
To apply CSS only in dark mode:
Code: 
.m-colorScheme(dark, {
    .p-body-inner {
        background-color: red;
    }
});
To apply CSS only in light mode:
Code: 
.m-colorScheme(light, {
    .p-body-inner {
        background-color: blue;
    }
});
You can also combine them on a single element:
Code: 
.p-body-sidebar .custom-block {
    color: #000;
    .m-colorScheme(dark, {
        color: #FFF;
    });
}
While this works, a better approach is to avoid hard-coding colors altogether. XenForo provides style property variables like @xf-textColor that automatically adjust based on the active variation. For example:
Code: 
.p-body-sidebar .custom-block {
    color: @xf-textColor;
}
This will display the correct text color in both light and dark mode without needing the mixin at all. Whenever possible, lean on XenForo's built-in style property variables before reaching for manual overrides.
Back