![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
September 25, 2019 at 9:08 pm #1142017
Any plans on implementing Dark Mode to Enfold?
I start seeing some sites that when the computer, phone or tablet changes to dark mode based on location, the website also does. Of course you need to implement this and I am about to do it.
I want to ask first if that is something planned for Enfold, so I will wait if that is the case.
If not, do you recommend a way to implement it?
Thanks.
September 25, 2019 at 9:51 pm #1142034Hey peterolle,
Not sure if anything is in development natively, but there are plugins available:
Best regards,
Jordan ShannonSeptember 25, 2019 at 10:57 pm #1142042and the script could also implemented (darkmode.js)
but all uses mix-blend-mode – and that is something not all browser will support.
See here a quick embedding via child-theme functions.php:function add_darkmode(){ ?> <script src="https: (Email address hidden if logged out) /lib/darkmode-js.min.js"></script> <script> new Darkmode({ bottom: '64px', // default: '32px' right: 'unset', // default: '32px' left: '32px', // default: 'unset' time: '0.5s', // default: '0.3s' mixColor: '#fff', // default: '#fff' backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: false, // default: true, label: '🌓', // default: '' autoMatchOsTheme: true // default: true }).showWidget(); </script> <?php } add_action('wp_footer', 'add_darkmode');
now there will be a little button on your page.: see here (not totaly styled): https://webers-testseite.de/guenni/
the script toggles one class to body ( #top) : darkmode–activated – so you can use it for styling your changings on activate state.
it now depends on your page what to style – and what mix-blend-mode you use.September 25, 2019 at 11:21 pm #1142043Hey Guenter,
Awesome! Thanks for sharing.
Best regards,
Jordan ShannonSeptember 26, 2019 at 8:31 am #1142142this is a small script of 6kb – you can host it on your server ( on GDPR Reasonst might be better ) – then you can split those child-theme functions.php entry:
function darkmode_js_script() { wp_enqueue_script( 'Darkmode', get_stylesheet_directory_uri().'/js/darkmode.min.js', '1.4', true ); } add_action( 'wp_enqueue_scripts', 'darkmode_js_script' ); function add_darkmode(){ ?> <script> new Darkmode({ bottom: '64px', // default: '32px' right: 'unset', // default: '32px' left: '32px', // default: 'unset' time: '0.5s', // default: '0.3s' mixColor: '#fff', // default: '#fff' backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: false, // default: true, label: '🌓', // default: '' autoMatchOsTheme: true // default: true }).showWidget(); </script> <?php } add_action('wp_footer', 'add_darkmode');
September 26, 2019 at 8:43 am #1142145dear peterolle – if you have seen my testpage please tell me because i want to switch back to the status before.
PS : on Impressum Page you can see that you can ignore elements.
The top section is dark on default – so :#top.page-id-230.darkmode--activated #av_section_1 { isolation: isolate; }
will do the trick
September 26, 2019 at 8:47 am #1142147Yes, you can remove it, thank you for sharing.
I will continue looking for a solution and hopefully someone from Enfold team can share if this is planned.
I am looking for a complete integration, full site, and if course that needs a lot of CSS for adapting everything. If I spend a month doing it and then Enfold has the feature, I rather wait.
Thanks again.
September 26, 2019 at 11:01 am #1142209Hi peterolle,
Well, I forwarded it to the dev team. Maybe it will be considered sometime in the future, but I am not sure it will be soon.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.