Light/Dark Mode

[Ehren]

This tutorial only applies to 2.2 themes. These steps will not work for 2.3 themes.

Some xenfocus themes come in dark and light colour schemes. If you have purchased both colour schemes (or if you own the "Pro" version), you can enable a light/dark toggle switch which allows your members to easily switch between the two colour schemes. The switch is located in the user panel (next to your notifications and inbox icons), and in the footer (next to the Style selector).

1. To begin, you must first install both the light and dark versions of your theme.

2. Next, you need to find out the ID of your styles. To do this, visit the Styles page in your Admin Cpanel and click on "Style Properties" next to the Light version of your theme. The URL will look something like this:
https://site.com/admin.php?styles/dimension.5/style-properties

By looking at the URL, you'll notice the Style ID for the light theme is 5
Repeat these steps for the Dark theme to get its Style ID, which (for this example) is 6.
Keep these two values in mind.

3. Visit the Style Properties page for the Light theme and open the Xenfocus: Light/Dark Mode group. Enter the Style ID of the Dark theme (6), and press Save.

4. Repeat the above step but for the Dark theme. Open the Light/Dark Mode group and enter the Style ID of the Light theme. Press Save.

Done!

 

[markbrule]

I dont know how many times I tried until I noticed I was doing it the other way around. For the Dark Light I was using its same ID instead using the one to call the Dark Mode and viceversa.... .

Apart from that, works as a charm!!!

 

[allbuffs]

I just imported the Uniform Style (both dark and light). I created a child style for each. I was able to configure the dark mode switch in the Uniform light style but I don't get the same options for the Dark Style

 

[Ehren]

Hi allbuffs,

The dark version needs to be a child theme of your light version. There's a tutorial available here: https://xenfocus.com/community/threads/installing-pro-themes.35635/

I'm planning on doing a video tutorial at some stage to make this process easier, however that tutorial should hopefully help in the mean time

 

[allbuffs]

Hi allbuffs,

The dark version needs to be a child theme of your light version. There's a tutorial available here: https://xenfocus.com/community/threads/installing-pro-themes.35635/

I'm planning on doing a video tutorial at some stage to make this process easier, however that tutorial should hopefully help in the mean time

Thanks !

 

[Nerdface]

Strictly speaking it should probably be more like this..

 

[allbuffs]

Strictly speaking it should probably be more like this..

View attachment 1729

Thanks. Actually I changed it after my last post so I have the 2 styles that aren’t modified.

 

[kaka90]

انتم ريجيل ماعلي من الهرج

 

[Smokey]

Does Carbon have a light variant that can be purchased?

 

[Ehren]

Does Carbon have a light variant that can be purchased?

There are currently no plans for a light version, but if there was enough demand, I’d be happy to reconsider

 

[Smokey]

I'd love to see a light version of Carbon. Curious to see how it'd look.

 

[nodle]

A suggestion or idea. Is there anyway to make the Light version of Uniform switch to Dark at a certain time setting? I remember one of your other themes would switch to the Dark version in the evening. Is there anyway to do this with Uniform? Or is it to complex to do?

 

[Ehren]

@nodle Thats something I’ve actually been looking into recently but I’m not sure of a solution. I don’t know how to force the theme to be changed automatically without having the visitor click the theme link (either the Style picker or the dark/light toggle icon).

Also, I’m not sure how to change themes during (or even before) page load. For example, if you visited the site at midday, the light version would be shown. If you closed your browser and revisited the site at 9:00pm, the dark theme would ideally be shown, but it would need to be applied before the page is loaded which I don’t believe is possible (without the use of a plugin)

It’s a nice idea in theory but I just have no idea how to apply it unfortunately.

 

[Medic84]

Will Dark mode support be added to Ortem?

 

[Ehren]

Will Dark mode support be added to Ortem?

I'm not entirely sure just yet.. There isn't a dark version of Ortem planned at the moment, but I guess it would depend on demand

 

[PokerChipper.com]

How do you get the light/dark switch to go away? Im using dark only

 

[Ehren]

How do you get the light/dark switch to go away? Im using dark only

Visit the Xenfocus: Light/Dark Mode Style Property group and delete the theme ID from the setting on that page

 

[6686]

i not see Xenfocus: Light/Dark Mode

 

[Ehren]

My apologies. The name varies across themes. But the top Style Property group (Xenfocus: Illuminate settings) literally mentions light/dark mode in the description, so you’ll find it in there