[TH] Style Switch

[TH] Style Switch [Paid] 1.0.0 Patch Level 4

No permission to buy ($35.00)

doublespaces

Well-known member
Okay... This is pretty sick. I'm surprised this hasn't been asked yet:

Will this work with UIX and UIX Dark? Because I already have these two styles set and users select between them.

Does the 'auto detect' style simply flip back and forth between style sheets within the same style?

When you allow someone to toggle between light and dark, is that within the auto-detect style or between the two separate ligh/dark themes you have specified?

What is the purpose of the child styles, is this specific to Style Switch or is it for the same reason we use child styles on our other addons?
 

Mike Creuzer

Well-known member
Will this work with UIX and UIX Dark? Because I already have these two styles set and users select between them.
Indeed so. It works with all our themes but willing to bet that it'll work with most others as well. Any theme combination that has dark and light where they are the same template minus different color palette and maybe a bit of CSS. Images can be made to work with this with some additional lines of JavaScript or just by converting them to CSS images (background property)
Does the 'auto detect' style simply flip back and forth between style sheets within the same style?
Not exactly as this would trigger that "Confirm you wish to change this theme" modal. We do some fancy workarounds and temporarily load in the entire CSS for that theme until next page load. And some other fancy things. We are doing a write-up for those interested in the technical details.
When you allow someone to toggle between light and dark, is that within the auto-detect style or between the two separate ligh/dark themes you have specified?
You have your main parent theme where you make all the changes or whatever structure you have now should be fine. Your dark theme should be a child theme of this parent but doesn't have to be per se. You make a theme that is intentionally just light and not setup to change on detection, and one for the detection itself which will stay dynamic. That way the user can choose whether they want it to change via their operating system (say at night) or if they always want light or dark respectively.
What is the purpose of the child styles, is this specific to Style Switch or is it for the same reason we use child styles on our other addons?
Well the auto detect theme is necessary. Rest is more or less for the same reason as any organized frontend theme system.
 

doublespaces

Well-known member
Indeed so. It works with all our themes but willing to bet that it'll work with most others as well. Any theme combination that has dark and light where they are the same template minus different color palette and maybe a bit of CSS. Images can be made to work with this with some additional lines of JavaScript or just by converting them to CSS images (background property)

Not exactly as this would trigger that "Confirm you wish to change this theme" modal. We do some fancy workarounds and temporarily load in the entire CSS for that theme until next page load. And some other fancy things. We are doing a write-up for those interested in the technical details.

You have your main parent theme where you make all the changes or whatever structure you have now should be fine. Your dark theme should be a child theme of this parent but doesn't have to be per se. You make a theme that is intentionally just light and not setup to change on detection, and one for the detection itself which will stay dynamic. That way the user can choose whether they want it to change via their operating system (say at night) or if they always want light or dark respectively.
Well the auto detect theme is necessary. Rest is more or less for the same reason as any organized frontend theme system.

I know some of those answers overlapped each other but thank you, I'll buy it now and see how it fits with my board. I think this is a nice comfort item that some people will find invaluable, particularly the people who may not even realize there is a dark theme. I didn't see it, but is there any plans for a day/night switcher, time based? I'm not certain how that would fit in with the existing system but its really the only other thought I had in mind.
 

Mike Creuzer

Well-known member
I know some of those answers overlapped each other but thank you, I'll buy it now and see how it fits with my board. I think this is a nice comfort item that some people will find invaluable, particularly the people who may not even realize there is a dark theme. I didn't see it, but is there any plans for a day/night switcher, time based?
For sure. It's a luxury item imo. And thank you very much.

ETA: re: day/night switcher - you can do this with iOS now and then this would work with that. Controlled via XenForo itself we could consider but not planned right now.
 

doublespaces

Well-known member
For sure. It's a luxury item imo. And thank you very much.

ETA: re: day/night switcher - you can do this with iOS now and then this would work with that. Controlled via XenForo itself we could consider but not planned right now.

Perhaps its better to depend on OS support since that wouldn't require Frankenstein'ing different concepts into the addon. I like that method better actually and I don't have an iPhone.
 

Jake B.

Well-known member
Android 10 may have that feature as well, it added support for dark mode and the browser supports the media query. So long as they give you an option to automatically change based on time of day you should be set, both iOS 13 and macOS 10.15 support this option
 

Paul

Well-known member
Hi Mike,

Any particular reason why this is available at an additional charge? Was looking at changing from my existing UIX and UIX Dark setup i have to a completely different theme setup, however that has the light/dark toggle as standard, built in??

Please dont shoot the messenger - only asking :)

cheers
 
Last edited:

doublespaces

Well-known member
Hi mike,

Any particular reason why this is available at an additional charge? Was looking at changing from my existing UIX and UIX Dark setup i have to a completely different theme setup, however that has the light/dark toggle as standard, built in??

Please dont shoot the messenger - only asking :)

cheers

This does it automatically and is theme agnostic for the most part.
 

doublespaces

Well-known member
I'm unable to find a permission for this? I'd like to deploy this to a small group of people such as myself/mods and then perhaps some premium users afterward before going to a site wide change?

Also, I'm using UIX and UIX dark. I have some extra.less adjustments but what else would qualify here? By default, is there anything else that UIX and UIX Dark require included in these fields?

1569377820295.png
 
Last edited:

doublespaces

Well-known member
Alright, as an update this is a re-explanation of how it works from my perspective:

1) Select all the 'light' styles that you want the toggle switch to appear on(for me this is just one style):
1569379334846.png

2) Select all the 'dark' styles you want the toggle to be available on:
1569379347624.png

3) Select the style you want to appear when toggling to a 'light' theme:
1569379397716.png

4) Select the style you want to appear when toggling to a 'dark' theme:
1569379430272.png

5) Select the style that when selected in the style selector, will provide OS light/dark detection and auto switching:
1569379502740.png

If I understand this correctly, this means I can set the 'light' style to be the default style. I can also set this light style to offer the auto-switching for supported OS/Browsers.

When the auto switch occurs or when the toggle is used, it will load the style sheets for the Primary light or dark style. If the auto detect theme is a light style, you'll need to make sure the Primary dark style has a similar layout otherwise when a switch occurs either automatically or manually, you'll get a messed up looking site. I presume this is because the stylesheets become active but some of the assets or other things which are loaded initially do not get swapped out.

The same goes for the other way, if your auto detect theme is a dark style, you'll need to make sure the Primary light style is just the light version of the same thing.

They also offer the ability to add extra stylesheets but I don't understand why or how I need them, because I didn't do any of that and the switch appears to be working seemlessly.

If someone selects a style which is not listed as a light or dark, then the toggle switch is not available and of course no auto switching will occur. It behaves just like a normal style.

And for clarification, when you switch a style, automatically or manually, the entire style isn't changing out as this requires a refresh. Just some of the little bits necessary to make the appearance change to look just like the light or dark counterpart. It assumes the primary difference between the two styles are the stylesheets more or less which can be swapped on the fly using javascript apparently. I assume this is HIGHLY theme independent, but it works flawlessly between UIX and UIX Dark.

If it matters, I could not notice a difference when switching from the original UIX to UIX Dark, when compared to UIX toggled to display the Dark styling. They looked the same for all I can tell.
 
Last edited:

doublespaces

Well-known member
Also, want to add that the 'Auto detect' style must be marked as either a light or dark style otherwise no autodetect changing will occur. You can test this on desktop by going to the Colors settings on Windows 10 and selecting one of the options:
1569383948613.png
 

Mike Creuzer

Well-known member
I'm unable to find a permission for this? I'd like to deploy this to a small group of people such as myself/mods and then perhaps some premium users afterward before going to a site wide change?

Also, I'm using UIX and UIX dark. I have some extra.less adjustments but what else would qualify here? By default, is there anything else that UIX and UIX Dark require included in these fields?

View attachment 211004
I do not believe there is a permission for the toggle. Its kinda a feature with guests in mind I suppose you could say. As its their experience, and users too, that will appreciate your site going dark after hours for them (less blinding for example). Technically could just modify the template mod and wrap your own conditional/permission if its a short term thing.
Also, I'm using UIX and UIX dark. I have some extra.less adjustments but what else would qualify here? By default, is there anything else that UIX and UIX Dark require included in these fields?
No, its just for some overrides during autodetect. I didn't need it for the sites I've installed this on. You might need the js callback to change logo out via ajax (and even that can be done in css technically, like what was done on https://forums.macrumors.com/)
Hi Mike,

Any particular reason why this is available at an additional charge? Was looking at changing from my existing UIX and UIX Dark setup i have to a completely different theme setup, however that has the light/dark toggle as standard, built in??

Please dont shoot the messenger - only asking :)

cheers
Hi Paul,

Wouldn't dream of shooting a messenger, valid question. The toggle in other themes (as I know it) does it via a page refresh. Thats as easy as creating an icon and linking to the style ID url built in to XenForo. That works fine, but this is just a bit cuter :p It does it without a page refresh and of course also auto detects OS (Windows, MacOS, iOS, Android, etc etc) theme setting preference. Its a quality of life tool we built for some boards who like that level of detail, not everyone will appreciate this and for those people not worth the cost. I said earlier in the thread, definitely a luxury type of thing, not needed.

It is included with our XF2 theme/add-on plan though, as most our add-ons are. I wasn't expecting this to fly off the shelves lol! But if you'd believe it, a lot of engineering went into this. We're doing a write up to explain why this is a bit tough to solve, will link here when done.
 

doublespaces

Well-known member
I do not believe there is a permission for the toggle. Its kinda a feature with guests in mind I suppose you could say. As its their experience, and users too, that will appreciate your site going dark after hours for them (less blinding for example). Technically could just modify the template mod and wrap your own conditional/permission if its a short term thing.

Actually, it works fine so I will just leave it enabled. Works surprisingly well actually.

No, its just for some overrides during autodetect. I didn't need it for the sites I've installed this on. You might need the js callback to change logo out via ajax (and even that can be done in css technically, like what was done on https://forums.macrumors.com/)

I am having to set the Forums-Node layout and Styling changes for my Node icons. The only other thing I have noticed, is that my logo appears twice on desktop mode while in the auto detect style, which is a child of my normal light theme, UIX2.

It is included with our XF2 theme/add-on plan though, as most our add-ons are. I wasn't expecting this to fly off the shelves lol! But if you'd believe it, a lot of engineering went into this. We're doing a write up to explain why this is a bit tough to solve, will link here when done.

I can appreciate the work actually. Watching it flip back and forth in front of your eyes is actually very impressive. I think this will be the Dark theme to a lot of people's attention who do not otherwise know there is anything besides the default, light theme.
 

doublespaces

Well-known member
Also, I'm starting to think that its better to remove your individual themes from manual selection and just force people onto the auto theme and let them toggle from there back and forth. This is assuming you only have one light/dark theme. If you have more, perhaps the addon Force Style Plus could be used somehow? Might be possible if we could force a different 'auto' style for each node or some other criteria and then set a primary light/dark per instance of this. Maybe this is getting too complicated, the good news is the addon works well. Just need to figure out how to stop having the duplicate logo.
 

BGObsession

Active member
Edited: nevermind - figured out which template to add the snippet to to put the toggle in the navbar, but it requires some coding skills to place it correctly. Support ticket submitted.
 
Last edited:
Top