Dark mode Tutorial: How to add a Dark Mode Switch to Your WordPress Website using Kadence Theme
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In today's digital age, catering to the user's preference and comfort is vital for any website's success. One such feature that has gained a lot of popularity is Dark Mode. Not only does it provide visual comfort in low-light environments, but it also adds a sleek and modern touch to your website. If you've been wondering how to incorporate this feature into your WordPress website, you're at the right place!
In this tutorial, learn the process of adding a Dark Mode switch to your WordPress website. We will specifically use the Kadence Theme, enhanced with the Kadence Pro Theme Add-on. This comprehensive guide will take you step-by-step from the initial setup of the plugin to the final touches of configuring the Dark Mode switch.
Remember to like this video and subscribe to the channel if you find this content helpful. If you have any questions or would like to share your experiences, please leave a comment down below. I love hearing from you!
Timestamps and resources are below!
Enjoy!
Timestamps:
0:00 Introduction: How to Add Dark Mode to Your Website
00:55 How to install the Kadence Theme, Kadence Blocks Kadence Pro Theme Addon
05:37 Understanding the Kadence Global Color Palette
10:30 How to Build a Simple landing Page with Kadence & Kadence Blocks and assign colors
12:36 How to create a Dark Mode Color Scheme
28:22 How to Configure the Dark Mode Color Palette Switch
3:48:11 Thank you and conclusion
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee - www.buymeacoffee.com/cliftonw...
✅ Leave a Super Thanks in TH-cam Comments
🧰TOOLS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
🧰PRO VERSION OF TOOLS I USE
✅GiveWP Pro Addons - cliftonwp.com/give
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅GiveWP Pro Addons - cliftonwp.com/give
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #darkmode #kadencepro #kadence #kadencetutorials
![🔥[NEW TUTORIAL] How to Create Pricing Tables in WordPress with Kadence Blocks🔥](http://i.ytimg.com/vi/nGQMfAChHe0/mqdefault.jpg)
Great job my man! Love the content and this dark and light mode is really cool. I thought It would be more complicated, but you made it easy to understand thanks Clifton!
Wow! Good to see you again so soon. I come to this school everyday cause there's always something to learn and the content is always great. Thanks again my Mentor.
Thank you Charlie! Always great to hear from you!
So happy to see you back uploading regularly! Hope everything is fine with you.
Thank you Mark! I appreciate you and happy to be back too!
Thank you Mark! All is well and hope all is well with you!
Another useful tutorial came to us today! Thank you, Clifton! Hello from Russia! :)
Thank you Victor! Great to hear from you and thanks for watching!
Thanks for making such amazing tutorials. You are Kadence Master
Thank you Sabir! I appreciate you watching!
I don't like the idea of having the fixed switch down in the bottom corner at all times, but I figured that they probably included a header widget as well so you can add a button into the header bar. Very neat. Also noticed it has the ability to swap out your site logo as well so you can have a version that fits in better with your dark theme palette. Great tutorial, thanks for sharing this feature.
You are very welcome! Thank you for watching the video and I appreciate you!
Hi Clifton, thanks for your wonderful tutorial, very helpful as usual.
I've a question for you, I noticed when I activate dark mode on my websites which has installed Litespeed (or WP Rocket) plugins in order to cache pages, there is a strange behaviour of the dark mode toogle.
For example, if I visit a page in light mode, this page is cached in light mode. Then, I switch to dark mode, that's ok.
Finally, I refresh the page or navigate to other cached pages and - the issue is - it shows the light version for a while and then switch to dark version. This happens all th time, as the cached version is the light one.
Do I need to exclude css or javascript from caching? Or the Kadence header? Or is it not possible in any way?
I appreciate a lot if you give us a tip on path to insert in order to exclude dark mode toggle from caching.
Thanks,
Antonio
Once again, a super useful tutorial, thanks ! Does the pro version of Kadence allow you to create a monitoring/watch site about one or more topics (with rss and video content, etc...) or do you have to use other tools? I believe this kind of practice is detrimental to SEO, but for the creation of a personal site to have an organized data flow, it can be an interesting solution.
Thank you! I appreciate you watching! For what you are describing, you may need other tools in combination with Kadence to build that out. Thanks again!