Logic Machine Forum
dark / light mode - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: dark / light mode (/showthread.php?tid=5288)

dark / light mode - hocine - 08.03.2024

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

RE: dark / light mode - admin - 08.03.2024

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

RE: dark / light mode - hocine - 08.03.2024

(08.03.2024, 07:43)admin Wrote: 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

RE: dark / light mode - admin - 08.03.2024

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.

RE: dark / light mode - hocine - 08.03.2024

(08.03.2024, 09:18)admin Wrote: 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

RE: dark / light mode - hocine - 08.03.2024

(08.03.2024, 09:18)admin Wrote: 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

RE: dark / light mode - admin - 11.03.2024

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