Dark Mode as a Default Theme?
Hey FC experts!
Is there a way to set up the "Dark Mode" as the Default theme? Like a custom code snippet or something? TIA! <3
Note: Just to clarify, what I'm saying is that users should be able to switch the mode, but when the site is loaded, it should have the dark mode by default.
The GSΒ You can use this script.
<script> let storage = localStorage.getItem('fcom_global_storage'); let globalStates = {}; if (storage) { try { globalStates = JSON.parse(storage); } catch (e) { globalStates = {}; } } if (!globalStates.fcom_color_mode) { globalStates.fcom_color_mode = 'dark'; localStorage.setItem('fcom_global_storage', JSON.stringify(globalStates)); } </script>
Raiyan MarzanΒ Thanks so much, Raiyan! Gonna implement this and let you know how it goes! Appreciate your help! ππ
This snippet should also work.
add_filter('language_attributes', function($output) {
// Odeber eventuΓ‘lnΓ inline "class" a pΕidej vΓ½chozΓ .dark
$output = preg_replace('/class=("|')(.*?)("|')/', '', $output);
return $output . ' class="dark"';
});
Drive ZoneΒ Thanks for sharing this! I appreciate your help! :-)
Also if you want to show light/dark mode which visitor/user prefer in his browser, you can use this JS:
const mode = localStorage.getItem('color-mode'); if (mode === 'light') { document.documentElement.classList.remove('dark'); document.documentElement.classList.add('light'); } else { document.documentElement.classList.remove('light'); document.documentElement.classList.add('dark'); }It load site in mode which is prefered by browser. In case of using this script use script tags.
Drive ZoneΒ Wow! This is so interesting! Once again, thank you so much for sharing this! <3
Btw, just to confirm this code will go inside the FC Portal Settings > > Custom Snippets > Custom JavaScript, right?
Just confirming because I also use the FluentSnippets plugin. So, I'm trying to figure out the best/safest place to keep such code.