Dark / Light Mode Automatic Toggle Switch / jsdmat

Dark / Light Mode Automatic Toggle Switch / jsdmat 0.4.0

No permission to download
Overview FAQ Updates (2) History Discussion
hstammlerj

hstammlerj

Active member
hstammlerj submitted a new resource:

Dark / Light Mode Automatic Toggle Switch / jsdmat - Automatically switches unlimited light & dark styles by JS utilizing browser's prefers-color-scheme.

About jsdmat​

This modification enables a XenForo installation to automatically toggle light and dark styles based on the user browser's UI setting "prefers-color-scheme".
Adding this CSS media feature directly to XenForo CSS definitions is hardly possible for the current architecture. Switching between light and dark UI without major modifications is easier done by switching between...
Click to expand...

Read more about this resource...
 
That's awesome,

I've tested it and works perfectly, one thing which I wish is to let user to switch and keep on in another style (if I am on dark mode and I switch Xenforo style manually to light style then I refresh page it will switch again to dark style).

Regards,
 
e-Dewan said:
one thing which I wish is to let user to switch and keep on in another style (if I am on dark mode and I switch Xenforo style manually to light style then I refresh page it will switch again to dark style).
Click to expand...
Yes, this is a bit complicated because the current jsdmat script yet isn't able to detect manual style chooser actions. Since the chooser overlay is added dynamically via AJAX call it wasn't that easy in the first attempt to build an additional listener to catch this click action. That click information is necessary because without it the jsdmat script cannot distinguish between a manual ("clicked") style change by the user and a style change pushed via XF due to global acting user settings (e.g. the user changed style at a second device some minutes ago).

Please stay tuned: the upcoming update will be able to handle manual actions much better and hopefully will make the need of separate "non-listed" child styles for "no-toggle-please" users obsolete. :)
 
hstammlerj updated Dark / Light Mode Automatic Toggle Switch / jsdmat with a new update entry:

Feature update

  • Added capability to react and incorporate user-driven style changes including lock and release scenarios.
  • Added call method to accept user-driven toggle requests ("light to dark" and vice versa).
  • Rebuilt mandatory template modification sheet (PAGE_CONTAINER) to comply to new jsdmat object structure.
  • Added recommended template modification sheet (style_chooser) to be able to capture user-driven style changes.
  • Added optional public navigation entry example to offer a...
Click to expand...

Read the rest of this update entry...
 
Hi @hstammlerj,

thanks for this great addition to the community. It seems that what you've described:

  • Styles being listed for auto toggle can't be chosen manually if they do not fit to browser preferences.
    • Effect: The auto toggle mechanism flips the style immediately back/away.
    • Solution: Add child styles not being part of the auto toggle definition, proper naming of styles recommended. (solved with 0.4.0 -> new style locking mechanism)

is still happening to us when installing 0.4.0 version. Auto-detect works great, but manually selecting the dark-theme brings the light (default) theme in place after a second or two. Is there a way around this?

Thanks
 
Hi @Moshe1010,
Moshe1010 said:
It seems that what you've described:
(...)
is still happening to us when installing 0.4.0 version. Auto-detect works great, but manually selecting the dark-theme brings the light (default) theme in place after a second or two. Is there a way around this?
Click to expand...
that's not intended to still happen, but the description points to an unknown malfunction concerning reading/writing the local storage object.
  • Did you perform a fresh install or an upgrade from a previous jsdmat version?
  • Please check the local storage for the presence and content of the "{prefix}_jsdmat" object. Feel free to post/PM the object content for further checks.
  • Does it happen again after you delete the browser cache or at least the local storage object?
  • Please check if the light/dark mode toggle works for your browser/client setup at https://www.rc-network.de/forums/ (the upcoming jsdmat version is already active there).
Greetings,
Herbert

ps: There is one known minor issue already being fixed for the upcoming version concerning the print preview toggling accidentally between light and dark mode, but this shouldn't affect normal use anyhow.
 
hstammlerj said:
  • Did you perform a fresh install or an upgrade from a previous jsdmat version?
Click to expand...
New version. Never had previous versions installed.

hstammlerj said:
  • Please check the local storage for the presence and content of the "{prefix}_jsdmat" object. Feel free to post/PM the object content for further checks.
Click to expand...

Sent via PM

hstammlerj said:
  • Does it happen again after you delete the browser cache or at least the local storage object?
Click to expand...
Yes. Also tried via incognito and a different browser (Safari and Chrome).

hstammlerj said:
  • Please check if the light/dark mode toggle works for your browser/client setup at https://www.rc-network.de/forums/ (the upcoming jsdmat version is already active there).
Click to expand...
Works
 
I'm helping @Moshe1010 out with this. Great work so far! I'm curious but do you have plans to just turn this into an add-on? It'd be easier to be able to install it, define the light/dark styles and go with it without the multiple template edits. The edits are easy enough but, just a suggestion. Thank you for the contribution so far.

@hstammlerj I realized my mistake with Moshe1010's problem. We were using a quick style switch rather than the default XF style switcher. I applied the publicNavigation edit to the quick link, it appears to work that way.
 
Thank you for finding the solution, that'd be also my bet after checking all data. :)

-> addendum for FAQ:
If you manually change style and it keeps flipping back automatically to the prefers-color-scheme preset, then the manual change detection call, which is located in the template edit of style_chooser, probably isn't there/active (at least not in the chosen style).

Russ said:
I'm curious but do you have plans to just turn this into an add-on? It'd be easier to be able to install it, define the light/dark styles and go with it without the multiple template edits. The edits are easy enough but, just a suggestion.
Click to expand...
Yes, I fully agree. By setting up jsdmat, I was curious if it will even last for some months until 2.3 rises like a phoenix bringing us a fully integrated light/dark mode, so I kept it as simple as possible. ;)
Now, more than one year later, I still hope 2.3 and a nicely integrated l/d mode will appear somewhen, but I have to admit jsdmat stays active and attractive much longer than thought before. So: yes, also for the own project implementation (and for XF cloud-hosted instances) I'm thinking about a full add-on to release/replace the modification guideline. :giggle:
 
Howdy @hstammlerj,

I'm trying to install this via zip upload, and getting the following error: "Could not process jsdmat-0.4.0.zip: File does not appear to be a valid add-on archive as expected."

I've installed other add-ons and themes just today, so I know that our upload mechanism works okay. Any suggestions for me?

Thanks so much!
 
TimWilson said:
I'm trying to install this via zip upload, and getting the following error: "Could not process jsdmat-0.4.0.zip: File does not appear to be a valid add-on archive as expected."
Click to expand...
Hi Tim,
sorry, the zip file is no add-on package (yet), it's (still) just a bunch of files (readme, code examples, js-files to be uploaded manually).
-> Please un-zip it locally and follow the installation instructions listed at the end of the jsdmat main page.
 
You must log in or register to reply here.
Back
Top Bottom