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:

$(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:

$(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:

$(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:

$(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();
});