dark / light mode

[hocine]

Hello, Is it possible to put a switch on the visualisation to switch between dark theme and light theme ?

[admin]

Do you want to change it locally (only for the current user session) or globally (for all users)?

[hocine]

Do you want to change it locally (only for the current user session) or globally (for all users)?

I want only for the current user but if it's not possible global is good

[admin]

Add this to Custom JavaScript:

Code:

1234567891011121314

$(function(){   if (window.Storage) {     var dark = !!Storage.get('darkmode', '');     $('body').toggleClass('dark', dark);          $('.toggle-dark-mode').off('vclick').on('vclick', function() {       dark = !dark;       Storage.set('darkmode', dark ? 'y' : '');              $('body').toggleClass('dark', dark);     });   } });

Create a dummy object and attach a visualization element to it. Set Additional classes to toggle-dark-mode
Clicking this element will toggle between light/dark mode. This setting is stored in browser's local storage.

[hocine]

Add this to Custom JavaScript:

Code:

1234567891011121314

$(function(){   if (window.Storage) {     var dark = !!Storage.get('darkmode', '');     $('body').toggleClass('dark', dark);         $('.toggle-dark-mode').off('vclick').on('vclick', function() {       dark = !dark;       Storage.set('darkmode', dark ? 'y' : '');             $('body').toggleClass('dark', dark);     });   } });

Create a dummy object and attach a visualization element to it. Set Additional classes to toggle-dark-mode
Clicking this element will toggle between light/dark mode. This setting is stored in browser's local storage.

Thanks

[hocine]

Add this to Custom JavaScript:

Code:

1234567891011121314

$(function(){   if (window.Storage) {     var dark = !!Storage.get('darkmode', '');     $('body').toggleClass('dark', dark);         $('.toggle-dark-mode').off('vclick').on('vclick', function() {       dark = !dark;       Storage.set('darkmode', dark ? 'y' : '');             $('body').toggleClass('dark', dark);     });   } });

Create a dummy object and attach a visualization element to it. Set Additional classes to toggle-dark-mode
Clicking this element will toggle between light/dark mode. This setting is stored in browser's local storage.

when I switch from one mode to another the page trends do not immediately change color. I have to refresh the page manually

[admin]

This should work with iframes:

Code:

1234567891011121314151617181920212223242526

$(function(){   if (!window.Storage) {     return;   }   var bc = new BroadcastChannel('darkmode');      function get() {     return !!Storage.get('darkmode', '');   }      function set() {     $('body').toggleClass('dark', get());   }        $('.toggle-dark-mode').off('vclick').on('vclick', function() {     Storage.set('darkmode', get() ? '' : 'y');     bc.postMessage('set');     set();   });   bc.addEventListener('message', set);      set(); });