XenForo Dark mode / Light Mode switcher button

CR LEAKS

CR LEAKS

Administrative
Joined
Mar 25, 2022
Messages
1,272
Reaction score
5,191
Points
113
Credits
19,896
This Template modification will add a button to NavGroup (before Search Button) to let users switching between the Light style and the Dark style.

1. Create a new Template Modification:

  • Template: PAGE_CONTAINER
  • Key: add_a_style_switcher_button_to_navgroup (or anything you want)
  • Find field:


Code:
Please, Log in or Register to view codes content!
  • Replace field:


CSS:
Please, Log in or Register to view codes content!
REMEMBER: Replace YOUR_LIGHT_STYLE_ID and YOUR_DARK_STYLE_ID to Light style ID and Dark Style ID (for example 2 and 3):
1722682275089

2. Now, We will style our Switcher button with an FA icon, Add this css into your extras.less

Code:
Please, Log in or Register to view codes content!
3. Set one of two above styles is Default style.
Now we can click the button to switch between our Light and Dark style:

My light style:

1722682283190

My Dark style:

1722682288949
 
4,485Threads
10,411Messages
39,628Members
cecelia_roseLatest member
Top