XF 2.3 A first look at XenForo 2.3

Well, here we are with our first Have you seen thread for XenForo 2.3.

It's been a long time coming, and for various reasons that we will go into later, it has changed quite a bit from what we had originally intended it to be, but it's finally ready to start showing you what's new.

tl;dr: there's a video at the end of this post.

Dark mode​

A lot of the new stuff in XenForo 2.3 is related to performance improvements that won't be immediately apparent on first glance, but there is one new feature in particular that is very obvious, and that is the new dark mode.

1694695492940.png


1694612354992.png


1694612120532.png


1694616451007.png


1694617171895.png


1694617408731.png


If the device with which you are browsing a XenForo site is configured to use its own dark mode, XenForo will switch itself to use the dark theme. Alternatively, you can request either the light, dark, or system-controlled theme using the gadget in the footer next to the style chooser. This will switch the mode instantly, without a page reload.

1694612251510.png


This is not XenForo 3.0​

This is not the big design overhaul that was originally targeted for 2.3, which included sweeping changes to the template system and introduced a range of new technologies to provide a significant improvement to many areas of XenForo.

When it became clear that the new design would introduce unresolvable backward-compatibility issues, the decision was made to back out the new design and reserve it for a version of XenForo we will call 3.0. Instead, we decided to ship the new functionality that we have built for 2.3 without the new design, so that existing users can gain access to all the new features without worrying about a major maintenance job to get it integrated.

Some of the new systems that we built to support the 3.0 design have been adapted to work with the 2.3 system, and support for dark mode is one of them.

Style variations​

The dark mode is built on top of a brand new style variations system. This system allows defining alternate sets of certain style properties, namely colors, to be switched dynamically without a page reload.

We currently expose two variations, which we dub 'default' and 'alternate'. In the default style, the default variation corresponds to the light theme and the alternate variation corresponds to the dark theme.

When both variations correspond to different style types (that is, light or dark), we expose them using the prefers-color-scheme media query. This automatically selects a variation based on the device's preferred color scheme when a user has not explicitly chosen a variation to use.

However, you could also set both variations as light or dark. In this case, the gadget in the footer will display the variation names instead, still allowing users to switch to a different color palette at whim.

Many sites running XenForo already run with a third-party dark style, but it's important to note that offering both light and dark styles to your visitors would previously have entailed providing completely separate styles, and while the dark style may have inherited most of its templates and style properties from a light parent, there would still have been a performance penalty tied to supporting both of these styles. With the style variations system in XenForo 2.3, this is no longer the case. Both variations of the style are handled within a single style. Those administrators who maintain multiple styles and have to handle inheritance between them will appreciate how much easier this will make style management.

1694602899783.png


Default and alternate​

Furthermore, while light styles can now be extended to support a dark variation, the same is true of existing dark styles, which can now define a light variation. At present, we refer to the Default and Alternate variations, where Default could be light or dark, and Alternate is (usually) the opposite.

1694602934013.png


Style properties​

From a style designer's perspective, style variations are handled as part of the style properties system. Style properties defined as a color value may be edited to enable variations, in which case they will accept values for each of the variations defined in the style.

1694602777696.png


With variations enabled, the user is free to define completely different versions of the color for each variation.

1694602968075.png


Note that the ability to support variations is limited to color value type style properties and does not extend to CSS-type properties. Of course, that does not mean that CSS-type properties are unable to benefit from the variations system, because the color values they reference may themselves be variants. That is to say, if your header CSS uses @xf-chromeBg, which in turn references @xf-paletteColor5, then it will automatically pick up the variant value of @xf-paletteColor5 when defined.

Future extension​

In a future version of XenForo, depending upon feedback, we may add support for defining additional variations, and extend the range of style properties which support variations beyond color properties. This could allow variations with different padding or typography choices, all within a single style.

UI improvements​

You will notice that we have significantly increased the size of the color preview chip next to these controls, and that the style property editor has become faster to operate, as style property changes are now saved without the need to reload the page.

Additionally, in style properties where palette colors are referenced, variations are automatically inherited when using either the default or alternate fields, and can be manipulated using the standard color editing functions provided by XenForo, such as darken and xf-intensify.

Naturally, the xf-intensify and xf-diminish functions now respect the light or dark mode within which they are operating, pushing colors either darker or lighter depending upon the way in which the current variation is flagged.

HSL color space​

You may have spotted from the images shown so far that we are now making use of HSL color space. While colors in XenForo were largely defined in RGB format, either as RGB decimal or hexadecimal values, this system presents challenges to some users, as adjustment of red, green and blue values is required to achieve even simple changes like making a color darker. HSL (hue, saturation and lightness) brings a more human-friendly color system, where the tone (hue) of the color is defined with a single value, then the intensity (saturation) and brightness (lightness) can also be adjusted with a single value change.

The color picker has been updated to reflect this change.

1694603931568.png


CSS variables​

Furthermore, each component of the HSL colour is now represented as a CSS variable. In XenForo 2.3 this allows the switching between light and dark variations, but its full utility will become apparent with XenForo 3.

A fun thing to try when you get access to 2.3, use your browser's inspector to locate the HSL values for paletteNeutral3, defined as the CSS variables --xf-paletteNeutral3--h, --xf-paletteNeutral3--s, and --xf-paletteNeutral3--l and use your cursor keys to adjust the value up and down. You will see that all instances of that color in use on the page react immediately, regardless of any adjustments made to them in subsequently inherited colors. Here, we have adjusted xf-paletteNeutral3 from hsl(0, 0%, 8%) to hsl(200, 50%, 20%) using the inspector in Chrome, resulting in changes to various backgrounds and borders that are based on adjustments of the original color.

1694608756513.png


Of note here is that the operations being performed on the colors are done on the client side rather than with the server-side LESS processor, so it's much easier to prototype sweeping color adjustments.

Making it your own​

In order to prevent any unexpected behavior when you upgrade to XenForo 2.3, we will not make changes to any of your styles. This includes marking your styles as supporting variations.

To enable variations, edit each of your styles in turn and toggle the 'Enable variations' option. Next, jump into the style properties editor for that style and concentrate on the Color palette and Basic colors groups.

In the default style, we took each of the Palette and Accent colors and reduced their saturation and lightness a little for the dark variation so that they are a little more muted against a dark background. We did not adjust the Neutral colors at all.

Next, in the Basic colors group, we switched around references to the Neutral 3 (dark) and Neutral 1 (light) colors, and in some cases reversed the references to palette colors, so references to Palette 1 now point to Palette 5 etc., making further adjustments with the built-in color functions as necessary.

1694619513607.png


If you follow these guidelines with your own styles, you should be able to quickly build dark variations that are suitable for use on your site.

Video​


Here's a video showing everything in action:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
Hmm, so in this case you only want to apply the definitions if the user has selected Light and the browser / system preference is Light as well but not if the user has selected Light and the browser / system preference is Dark?
I would assume that selecting Light or Dark in XenForo’s style chooser overrides the OS preference altogether.

Basically, what is needed is a way to specify in the LESS templates that certain CSS properties and their values target only the light or only the dark style variant, regardless of how either one is chosen by the user (systemically or manually).

In our case, we’d then use the LESS template syntax to specify that some background images and box shadows apply only to the light variant and deal with color variation through the style property system.

(Dark styles tend to become simpler than their light equivalents because our eyes lose their ability for visual discrimination; the transition from light to dark, in addition to color readjustment, is thus likely to require a further simplification or reduction of design elements.)
 
Yes, that seems to be how most sites and apps work--we can specifically choose either one, which will ignore what is chosen in the OS.
Well, that's exactly what i've been trying to explain since https://xenforo.com/community/threads/a-first-look-at-xenforo-2-3.216641/post-1647657 ...

If a website wants to give the user an explicit color theme choice it must ignore the OS / browser choice if an explicit choice is made and therefore using smth. like
Code:
@media  (prefers-color-scheme: light)
{
/* Some additional CSS / LESS to use for light color theme */
}
would not work as intended as an explicit user color theme choice for the website = Light will not change the value of prefers-color-scheme
(so that might still be dark and the CSS would therefore not be applied).
 
Last edited:
What i love about these threads is that the developers aren't shy when it comes to doing vlogs.
I reckon you should do some zoom webinars so you can interact and answer some questions.
 
in xf 2.3, wll there be option to disable light/dark on each theme we use on our forums like for example the default theme allow dark/light but our blue theme to disable dark/light , etc ?
 
Wow! Light AND Dark styles in core! I've been hoping for this since 1.x. Thanks team! I'm still on 2.1 because I didn't need anything much from 2.2, but this addition alone will have me renewing my licenses. As the meme says, shut up and take my money!

@Kier Regarding more than two options: If it doesn't create a maintenance headache for you guys, I would say add it. I can easily see myself using choices such as these -
  • Light - Normal
  • Light - Large fonts
  • Dark - Normal
  • Dark - Large fonts
 
More than two variants aren’t planned for XF 2.3 but at least now you only need to create two different styles to achieve this.

One style with light and dark variants and normal font size.

Another with light and dark plus the larger font size.

Style inheritance will work in the same way so the second style will be a child of the first with only the font size changed.
 
I used to think so too. I was very, very wrong. The majority of XenForo installations make minor colour and font adjustments and leave it at that, so actually the default theme is of paramount, critical importance.
Mine is just about 100% out of the box
I like nice and plain and simple, and I think most of my members do.
That said we are general and politicla discussionforum
I image gaming and tech fourms like all the fancy themes
 
I used to think so too. I was very, very wrong. The majority of XenForo installations make minor colour and font adjustments and leave it at that, so actually the default theme is of paramount, critical importance.
I would agree with this. A few factors lead to not making major changes.

The first is ability of the forum owner. Most forum owners don't have the skill to make major template changes.

The second factor is compatibility to third party add-ons. Making only minor changes ensures not needing to modify add-ons. This also goes back to the first factor as the ability to correctly modify styles without impacting the layouts of add-ons can be a challenge.
 
I nearly always fiddle with the colours and the css of the forum.
Not many people like the mouldy green colour they see first up with.
 
The second factor is compatibility to third party add-ons. Making only minor changes ensures not needing to modify add-ons. This also goes back to the first factor as the ability to correctly modify styles without impacting the layouts of add-ons can be a challenge.
Yea, I used to use a custom theme. But now I just use the default XF theme with custom color changes, and a background applied via style properties. Much less conflicts with addons.
 
I would agree with this. A few factors lead to not making major changes.

The first is ability of the forum owner. Most forum owners don't have the skill to make major template changes.

The second factor is compatibility to third party add-ons. Making only minor changes ensures not needing to modify add-ons. This also goes back to the first factor as the ability to correctly modify styles without impacting the layouts of add-ons can be a challenge.
I'm an older guy - once I was very good with computers but there is so much more to things now. I find it hard to keep up with the difference between a Template and a Style and why we need to make chnages to our style, but not the default.
So I do appreciate Xenforo going slowly and steadily in this area.

I imagine that many forum owners are one band bands like me.
I like a nice clean look with no fancy fonts and colours and I imgine that most of my members do as well (most of them are over 50)
That said a Dark Mode could be good for ease of viewing at night etc.
 
Back
Top Bottom