Тёмный

Add a Dark Mode Toggle/Switch in WordPress Website using Elementor (WITHOUT PLUGIN) 

Make Dream Website
Подписаться 36 тыс.
Просмотров 25 тыс.
50% 1

Today I'll show you how to add a Dark Mode Toggle/Switch in WordPress Website using Elementor without Plugin.
✅Get Elementor Pro:
makedreamwebsi...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsi...
✅Get code snippet for Elementor Dark Mode Switch:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
In this Elementor tips and tricks tutorial, I’ll show you how you can create a dark mode switch/switcher on your WordPress website using Elementor. You may find a bunch of dark mode plugin (or night mode plugin) for WordPress but unfortunately none of them are working very well.
So, today I’ll show you how you can create a 100% working WordPress dark mode switcher where you can design a fully customizable toggle button, you can specifically edit each and every text color or the background color for the dark mode or even you can use 2 different images for 2 different modes (dark/light mode).
I’ll also show you how you can save that dark/light mode website on your browser cookie. So, when anyone revisit, they can see your site in their previously selected mode.
First, we create the toggle button by combining the divider and icon widgets. But, we need some JavaScript code to activate that dark mode toggle. Here you can customize everything like the page background color, text color or any other color of every elements. We have done this by inspecting the source code and edit the CSS code.
Lastly, we have also created a dark mode version of the header where we use 2 different logos and also create a dark version menu. I'll also show you how you can save the dark mode on the browser cookie so if we close and reopen our browser later, it preserve your previously chosen mode.
So, that’s how you can create a 100% customized WordPress dark mode without plugin. Although it’s pretty repetitive and time consuming to change all the content color one by one. But, if you want to design your dark mode on your own way, it’s the best solution for that.
If you enjoy, don't forget to like and subscribe.

Опубликовано:

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
Далее
Dark Mode no Elementor
21:01
Просмотров 9 тыс.
Give Your Website a Perfect Color Scheme, Fast & Easy
14:53