🔗 Dark/Light Mode Toggle + Dynamic Color Scheme Support in Site Kit (Duplicate)

[ghost]

Description

Summary

I’d like to suggest two interconnected features to improve the user experience and design flexibility in Elementor:

1. A built-in Dark/Light mode toggle switch (frontend).
2. Dynamic global color scheme support in the Site Kit, based on the selected theme mode (dark or light).

---

Problem

Currently, Elementor does not provide a native way to switch between dark and light modes on the frontend. Additionally, the global color styles set in the Site Kit remain static, which limits the ability to create responsive designs that adapt to the user's theme preference.

Many modern websites are expected to provide dark mode support, either through a manual toggle or by detecting the user’s system preferences (prefers-color-scheme), and adapting the color scheme accordingly.

---

Proposed Solution

1. Frontend Toggle Switch (Dark/Light Mode)

   • A widget or global setting that adds a toggle button for users to switch between dark and light modes.
   • Optional auto-detection of system preferences via prefers-color-scheme.

2. Dynamic Color Schemes in Site Kit

   • Allow defining two sets of global colors in the Site Kit:
     • One for Light Mode
     • One for Dark Mode
   • Elementor should automatically apply the relevant color set based on the selected or detected theme.

---

Benefits

• Enhances modern design practices and user accessibility.
• Reduces reliance on custom code or third-party plugins for a commonly requested feature.
• Improves Elementor’s standing as a professional design tool with full support for responsive and accessible design.

---

Related Workarounds

I understand that custom code or external plugins (e.g. via CSS variables or JS toggles) can implement this, but a native solution would be much more consistent, user-friendly, and maintainable.

---

Conclusion

This feature would bring Elementor in line with modern design expectations and improve its value for both developers and designers. I hope the team can consider this for a future release.

Thank you for your great work and attention!

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.

[lllopo]

In addition to that, I would like to add, that the kits are still lacking (and it is somewhat related to the above) :

1. Proper naming of the global colors variables. Just like we had some gibberish ID css classes names in the V4 output, we still have --e-global-color-703bbf7 like global color names instead of --e-global-color-primary for example.
2. The lack of CSS variables support in color pickers and typography properties. This is really, really needed. Apart of opening the door for 3rd party CSS frameworks integration like Core Framework it is also a way to implement dark mode with some additional CSS (and CSS classes) without direct support in Elementor for this.

I think it is related, but if you guys think it is not - feel free to move this.

[nicholaszein]

Hi @lllopo .

Please avoid including multiple requests in the same thread.

Keep in mind that the Editor V4 is still a work in progress, and support for variables was already announced it would be coming soon.

Please, help us keep these discussions organized.

Thank you

[nicholaszein]

Hi. Please, only use this form to give feedback about the Editor V4.

This is more of a feature request, and I'm sure there are existing requests about this topic that you should add your Upvote instead of publishing a new one.

We also ask to include only one request per thread. Multiple requests on the same thread cannot be addressed.

Please, help us keep this space organized.

Thank you