Implemented a dark theme option

dieketzer

Well-known member
it would be great if by default a dark theme shipped with xenforo.
sure, many people will say 'just use the style editor', and i have. but there are issues that i have encountered that have made this such an annoying task; gradients that look terrible on a dark theme hidden everywhere, shadow css that is difficult to find and looks terrible on a dark theme, classes like '@darker' that actually mean 'lighter' on a dark theme, and so on.
it sure would be great to have a dark default to base further dark styles on.
 
Upvote 116
This suggestion has been implemented. Votes are no longer accepted.
Android 10 and iOS 13 (both will be released this fall) have an optional dark mode and websites can detect whether the dark mode is active to auto-adjust their colors. The same is true for Chrome 76 (currently in beta, final will be released in a few weeks), Firefox 67 and Safari 12.2.

It would be awesome if a future version of XenForo shipped with a dark mode. This should not be a completely separate style but a variant of the default style that uses the CSS media query prefers-color-scheme to detect dark mode automatically (without the user having to change styles manually).


 
Last edited:
What I wrote in the previous post would probably be a huge effort. To achieve 90% of the goal with minimal effort, XenForo could ship with a second style (a dark style) and detect the user's preferred color scheme using Window.matchMedia and MediaQueryList.addListener. This listener would send an API request to save the preference in the visitor's account or in a cookie such that it can be respected on the next page load.

The drawback of this approach would be that switching between light and dark mode would only be effective after the next page-load. But it would require much less effort to implement.
 
Android 10 and iOS 13 (both will be released this fall) have an optional dark mode and websites can detect whether the dark mode is active to auto-adjust their colors. The same is true for Chrome 76 (currently in beta, final will be released in a few weeks), Firefox 67 and Safari 12.2.

It would be awesome if a future version of XenForo shipped with a dark mode. This should not be a completely separate style but a variant of the default style that uses the CSS media query prefers-color-scheme to detect dark mode automatically (without the user having to change styles manually).


Yes, we need this
 
Xenfocus has a theme that users can toggle between light and dark mode (which I am currently using on my site).


In the top right there is a lightbulb/moon (depending on which mode you're in) that you can click to toggle between light mode and dark mode. It's essentially just two different themes (you can either purchase them separately or buy the "pro" version which just combines the two with a discount), and it has that button as an easy toggle between the two themes. I think that would be a better approach than forcing the theme to understand which mode it should be in based on the browser. That seems like more work than is necessary. But I still agree that a dark mode theme should be available out of the gates without having to search for a free one, or pay for one. My other Admin hated the white theme which is why I ended up buy other themes that were darker.
 
I found the current XenForo theme appears to be compatible with Chrome's darkreader plugin.
May there needs to be another extra.less which is only effective when OS-level Dark Mode is detected as enabled (or enabled by a board member's preference).
 
@Nulumia have a nice Dark theme, easy to customise like you with.
You can have a look at:
 
It's 2020 now.

All major browsers now support detecting if an operating system is in darkmode and displaying a dark theme.

We should be looking to the future. Rather than created separate dark themes that users can switch between or coding a custom way to switch which theme is loaded.

Theme support should be built into XenForo in the future to be able to manage 2 theme with two different display modes. To do this each theme should allow for 2 different color pallets.


I found the current XenForo theme appears to be compatible with Chrome's darkreader plugin.
May there needs to be another extra.less which is only effective when OS-level Dark Mode is detected as enabled (or enabled by a board member's preference).

In the bata branch of Chrome there is now a flag called "Force Dark Mode".

It does okay, but as a designer it's no more than that. I would like more control over what colors are used in Dark Mode.
 
It's 2020 now.

All major browsers now support detecting if an operating system is in darkmode and displaying a dark theme.

We should be looking to the future. Rather than created separate dark themes that users can switch between or coding a custom way to switch which theme is loaded.

Theme support should be built into XenForo in the future to be able to manage 2 theme with two different display modes. To do this each theme should allow for 2 different color pallets.
I would like to see whether color palettes can be extended.
My customized themes are using colors differently than how default palettes are applied in the default theme.
 
What you are suggesting -- having a distinct dark style -- and trying to switch between those doesn't work as smoothly. Because you can't switch a Xenforo style directly based on a CSS Media query. You have to detect it in Javascript, and then load the alternative Style after the entire page is loaded. This causes a "flash" of the wrong style due to the time it takes to parse the Javascript.
Hmm ... are you sure about that?

I did a little mockup (as a static page) that does not use JS to switch styles (except for browsers that do not support the required media query).
 
Support for dark themes seems like a good idea in principle. I use dark themes a lot in other web applications. However, I want to be able to switch it off just as I can other styles. My site uses a custom theme (based on Flat Awesome+ from @Pixel Exit) that is pretty dark already so it would be kind of pointless to have a dark theme. Maybe a light version, but not a dark one.
 
Top Bottom